diff --git a/blocks/myoverview/amd/src/courses_view.js b/blocks/myoverview/amd/src/courses_view.js
index 62d8c636599..a47d42f7894 100644
--- a/blocks/myoverview/amd/src/courses_view.js
+++ b/blocks/myoverview/amd/src/courses_view.js
@@ -29,53 +29,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
         LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]'
     };
 
-    /**
-     * Set a flag on the element to indicate that it has completed
-     * loading all event data.
-     *
-     * @method setLoadedAll
-     * @param {object} root The container element
-     */
-    var setLoadedAll = function(root) {
-        root.attr('data-loaded-all', true);
-    };
-
-    /**
-     * Set the element state to loading.
-     *
-     * @method startLoading
-     * @param {object} root The container element
-     */
-    var startLoading = function(root) {
-        var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
-
-        root.addClass('loading');
-        loadingIcon.removeClass('hidden');
-    };
-
-    /**
-     * Remove the loading state from the element.
-     *
-     * @method stopLoading
-     * @param {object} root The container element
-     */
-    var stopLoading = function(root) {
-        var loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
-
-        root.removeClass('loading');
-        loadingIcon.addClass('hidden');
-    };
-
-    /**
-     * Check if the element is currently loading some event data.
-     *
-     * @method isLoading
-     * @param {object} root The container element
-     */
-    var isLoading = function(root) {
-        return root.hasClass('loading');
-    };
-
     /**
      * Load the module.
      *
@@ -97,7 +50,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
             return $.Deferred().resolve();
         }
 
-        startLoading(root);
 
         // Request data from the server.
         return CoursesRepository.queryFromStatus(status, limit, offset).then(function(courses) {
@@ -112,7 +64,7 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
 
                 // Render the courses.
                 render(root, courses);
-                setLoadedAll(root);
+
             }
         }).fail(
             Notification.exception
@@ -123,37 +75,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
         });
     };
 
-    /**
-     * Render the paging bar.
-     *
-     * @param pagingRoot The root element of the paging bar.
-     * @param {int} limit Limit of courses per page.
-     * @param {int} total Total of courses per status.
-     * @returns {string} Rendered paging bar html.
-     */
-    var renderPagingBar = function(pagingRoot, limit, total) {
-        pagingRoot = $(pagingRoot);
-        pagingRoot.empty();
-        var pageCounter,
-            pageTotal = total / limit;
-
-        var pagingBar = {
-            haspages: (total > 0),
-            previous : {},
-            pages: [],
-            next: {}
-        };
-
-        for(pageCounter = 0; pageCounter < pageTotal; pageCounter++) {
-            pagingBar.pages.push({page: pageCounter + 1});
-        }
-
-        return Templates.render(
-            'core/paging_bar',pagingBar
-        ).done(function(html, js) {
-            Templates.appendNodeContents(pagingRoot, html, js);
-        });
-    };
 
     /**
      * Render the list of courses.
@@ -176,35 +97,6 @@ define(['jquery', 'core/templates', 'block_myoverview/courses_view_repository',
         });
     };
 
-    /**
-     * Register event listeners.
-     */
-    var registerEventListener = function(root, pagingRoot) {
-        root = $(root);
-        pagingRoot = $(pagingRoot);
-
-        var offset = +root.attr('data-offset'),
-            limit  = +root.attr('data-limit'),
-            status = root.attr('data-status');
-
-        pagingRoot.on('click', 'a', function(e) {
-            // Don't go anywhere!
-            e.preventDefault();
-
-            var targetElement = $(e.currentTarget);
-
-            var pageNumber = targetElement[0].innerText,
-                calc = (limit * pageNumber / pageNumber);
-
-            if (pageNumber == 1) {
-                calc = 0;
-            }
-
-            root.attr('data-offset', calc);
-            load(root, pagingRoot);
-        });
-    };
-
     return {
         init: function(root, pagingRoot) {
             root = $(root);
diff --git a/blocks/myoverview/amd/src/courses_view_repository.js b/blocks/myoverview/amd/src/courses_view_repository.js
index aa65a413125..6e8720babbb 100644
--- a/blocks/myoverview/amd/src/courses_view_repository.js
+++ b/blocks/myoverview/amd/src/courses_view_repository.js
@@ -30,7 +30,7 @@ define(['jquery'], function($) {
     },
 
     dataCache = {
-        past: [
+        0: [
             {
                 courseid: 1,
                 shortname: 'Course 1',
@@ -128,7 +128,7 @@ define(['jquery'], function($) {
                 status: STATUS.PAST
             }
         ],
-        inprogress: [
+        1: [
             {
                 courseid: 13,
                 shortname: 'Course 13',
@@ -234,7 +234,7 @@ define(['jquery'], function($) {
                 status: STATUS.IN_PROGRESS
             }
         ],
-        future: [
+        2: [
             {
                 courseid: 26,
                 shortname: 'Course 26',
@@ -345,7 +345,8 @@ define(['jquery'], function($) {
      */
     var queryFromStatus = function(status, limit, offset) {
         var deferred = $.Deferred();
-
+        offset = parseInt(offset);
+        limit = parseInt(limit);
         setTimeout(function() {
             deferred.resolve(dataCache[status].slice(offset, offset + limit));
         }, 1000);
diff --git a/blocks/myoverview/amd/src/paging_content.js b/blocks/myoverview/amd/src/paging_content.js
index 7f3aa9446b6..159a4d2a7c9 100644
--- a/blocks/myoverview/amd/src/paging_content.js
+++ b/blocks/myoverview/amd/src/paging_content.js
@@ -27,6 +27,7 @@ define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
 
     var SELECTORS = {
         ROOT: '[data-region="paging-content"]',
+        PAGE_REGION: '[data-region="paging-content-item"]'
     };
 
     var PagingContent = function(root, pagingBarElement, loadContentCallback) {
@@ -38,37 +39,41 @@ define(['jquery', 'core/templates', 'block_myoverview/paging_bar'],
     PagingContent.rootSelector = SELECTORS.ROOT;
 
     PagingContent.prototype.createPage = function(pageNumber) {
-        this.loadContent(pageNumber).done(function(html, js) {
-            Templates.appendTo(this.root, html, js);
-        }.bind(this));
 
-        var page = null;
-
-        return page;
+        return this.loadContent(pageNumber).then(function(html, js) {
+            console.log(html);
+            Templates.appendNodeContents(this.root, html, js);
+        }.bind(this)).then(function () {
+                return this.findPage(pageNumber);
+            }.bind(this)
+        );
     };
 
     PagingContent.prototype.findPage = function(pageNumber) {
-
+        return this.root.find('[data-page="'+pageNumber+'"]');
     };
 
     PagingContent.prototype.showPage = function(pageNumber) {
+
         var existingPage = this.findPage(pageNumber);
+        this.root.find(SELECTORS.PAGE_REGION).addClass('hidden');
 
-        if (existingPage) {
-            existingPage.addClass('active');
+        if (existingPage.length) {
+            existingPage.removeClass('hidden');
         } else {
-            var newPage = this.createPage(pageNumber);
-            newPage.addClass('active');
-
-            this.root.append(newPage);
+            this.createPage(pageNumber).done(function (newPage) {
+                newPage.removeClass('hidden');
+                }
+            );
         }
     };
 
     PagingContent.prototype.registerEventListeners = function() {
-        this.pagingBar.one(PagingBar.events.PAGE_SELECTED, function(e, data) {
+
+        this.pagingBar.on(PagingBar.events.PAGE_SELECTED, function(e, data) {
             if (!data.isSamePage) {
                 this.showPage(data.pageNumber);
-            };
+            }
         }.bind(this));
     };
 
diff --git a/blocks/myoverview/templates/course-paging-content-item.mustache b/blocks/myoverview/templates/course-paging-content-item.mustache
index 8c247f6820c..02063c6ad9d 100644
--- a/blocks/myoverview/templates/course-paging-content-item.mustache
+++ b/blocks/myoverview/templates/course-paging-content-item.mustache
@@ -25,6 +25,8 @@
 }}
 {{< block_myoverview/paging-content-item }}
     {{$content}}
-        <p>FILL ME WITH CONTENT</p>
+        {{#courses}}
+            {{> block_myoverview/courses-view-course-item }}
+        {{/courses}}
     {{/content}}
 {{/ block_myoverview/paging-content-item }}
diff --git a/blocks/myoverview/templates/course-paging-content.mustache b/blocks/myoverview/templates/course-paging-content.mustache
index 1857f06ccbb..e0114a7303c 100644
--- a/blocks/myoverview/templates/course-paging-content.mustache
+++ b/blocks/myoverview/templates/course-paging-content.mustache
@@ -25,6 +25,6 @@
 }}
 {{< block_myoverview/paging-content }}
     {{$paging-content-item}}
-        {{> block_myoverview/course-paging-content-item }}
+        {{> block_myoverview/course-summary }}
     {{/paging-content-item}}
 {{/ block_myoverview/paging-content }}
diff --git a/blocks/myoverview/templates/courses-view-by-status.mustache b/blocks/myoverview/templates/courses-view-by-status.mustache
index 7cfbedf106c..158b8f0b13e 100644
--- a/blocks/myoverview/templates/courses-view-by-status.mustache
+++ b/blocks/myoverview/templates/courses-view-by-status.mustache
@@ -27,6 +27,7 @@
      data-status="{{$status}}{{/status}}">
 
     {{> block_myoverview/course-paging-content }}
+
     <div class="text-xs-center text-center">
         {{> block_myoverview/paging-bar }}
     </div>
@@ -42,9 +43,10 @@ require(
     ],
     function($, Templates, PagingBar, PagingContent, CoursesRepository) {
 
-    var root = $('{{$id}}courses-view-status-{{uniqid}}{{/id}}');
+    var root = $('#{{$id}}courses-view-status-{{uniqid}}{{/id}}');
     var pagingBarElement = root.find(PagingBar.rootSelector);
     var pagingContentElement = root.find(PagingContent.rootSelector);
+
     var loadContentCallback = function(pageNumber) {
         var limit = root.attr('data-limit');
         var offset = (pageNumber - 1) * limit;
@@ -52,11 +54,12 @@ require(
 
         return CoursesRepository.queryFromStatus(status, limit, offset)
             .then(function(courses) {
-                return Templates.render('block_myoverview/course-paging-content-item', courses);
+                return Templates.render('block_myoverview/course-paging-content-item', {courses: courses});
             })
     };
 
     var content = new PagingContent(pagingContentElement, pagingBarElement, loadContentCallback);
     content.registerEventListeners();
+    content.showPage(1);
 });
 {{/js}}
diff --git a/blocks/myoverview/templates/courses-view-course-item.mustache b/blocks/myoverview/templates/courses-view-course-item.mustache
index c31b0a77aa9..c72d9f39655 100644
--- a/blocks/myoverview/templates/courses-view-course-item.mustache
+++ b/blocks/myoverview/templates/courses-view-course-item.mustache
@@ -28,7 +28,7 @@
         "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
     }
 }}
-<li class="list-group-item col-md-4 m-b-1">
+<div class="list-group-item col-md-4 m-b-1">
     <div class="d-inline-block">
         <div class="d-inline-block m-x-1">
             <div class="course-info-container" id="course-info-container-{{id}}">
@@ -50,4 +50,4 @@
             </div>
         </div>
     </div>
-</li>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/blocks/myoverview/templates/courses-view-future.mustache b/blocks/myoverview/templates/courses-view-future.mustache
deleted file mode 100644
index de3c961ca27..00000000000
--- a/blocks/myoverview/templates/courses-view-future.mustache
+++ /dev/null
@@ -1,44 +0,0 @@
-{{!
-    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/courses-view
-
-    This template renders the courses view for the myoverview block.
-
-    Example context (json):
-    {}
-}}
-<ul class="list-group unstyled" id="courses-view-future-{{uniqid}}">
-    <span class="hidden" data-region="loading-icon-container">
-        {{> core/loading }}
-    </span>
-    <div id="courses-future-container"
-        data-limit="{{$limit}}6{{/limit}}"
-        data-offset="{{$offset}}0{{/offset}}"
-        data-status="future"
-        data-region="courses-future-container">
-    </div>
-</ul>
-<div class="text-xs-center text-center" data-region="courses-future-paging-bar" id="courses-future-paging-bar-{{uniqid}}"></div>
-{{#js}}
-require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
-    var root = $("#courses-future-container"),
-        pagingRoot = $("#courses-future-paging-bar-{{uniqid}}");
-
-    CoursesView.init(root, pagingRoot);
-});
-{{/js}}
\ No newline at end of file
diff --git a/blocks/myoverview/templates/courses-view-past.mustache b/blocks/myoverview/templates/courses-view-past.mustache
deleted file mode 100644
index 0d4731c7318..00000000000
--- a/blocks/myoverview/templates/courses-view-past.mustache
+++ /dev/null
@@ -1,44 +0,0 @@
-{{!
-    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/courses-view
-
-    This template renders the courses view for the myoverview block.
-
-    Example context (json):
-    {}
-}}
-<ul class="list-group unstyled" id="courses-view-past-{{uniqid}}">
-    <span class="hidden" data-region="loading-icon-container">
-        {{> core/loading }}
-    </span>
-    <div id="courses-past-container"
-        data-limit="{{$limit}}6{{/limit}}"
-        data-offset="{{$offset}}0{{/offset}}"
-        data-status="past"
-        data-region="courses-past-container">
-    </div>
-</ul>
-<div class="text-xs-center text-center" data-region="courses-view-past-paging-bar" id="courses-past-paging-bar-{{uniqid}}"></div>
-{{#js}}
-require(['jquery', 'block_myoverview/courses_view'], function($, CoursesView) {
-    var root = $("#courses-past-container"),
-        pagingRoot = $("#courses-past-paging-bar-{{uniqid}}");
-
-    CoursesView.init(root, pagingRoot);
-});
-{{/js}}
\ No newline at end of file
diff --git a/blocks/myoverview/templates/main.mustache b/blocks/myoverview/templates/main.mustache
index f9da7333538..e2495dce7d1 100644
--- a/blocks/myoverview/templates/main.mustache
+++ b/blocks/myoverview/templates/main.mustache
@@ -43,7 +43,7 @@
         <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">
+        <div role="tabpanel" class="tab-pane fade " id="myoverview_courses_view">
             {{#coursesview}}
                 {{> block_myoverview/courses-view }}
             {{/coursesview}}
diff --git a/blocks/myoverview/templates/paging-content-item.mustache b/blocks/myoverview/templates/paging-content-item.mustache
index 232b1ef08a9..512a448f7b8 100644
--- a/blocks/myoverview/templates/paging-content-item.mustache
+++ b/blocks/myoverview/templates/paging-content-item.mustache
@@ -23,7 +23,7 @@
     {
     }
 }}
-<div data-region="paging-content-item">
+<div data-region="paging-content-item" data-page="{{page}}" class="container-fluid">
     {{$content}}
         {{{content}}}
     {{/content}}