diff --git a/course/amd/build/manual_completion_toggle.min.js b/course/amd/build/manual_completion_toggle.min.js
new file mode 100644
index 00000000000..5f6ef966684
--- /dev/null
+++ b/course/amd/build/manual_completion_toggle.min.js
@@ -0,0 +1,2 @@
+define ("core_course/manual_completion_toggle",["exports","core/templates","core/notification","core_course/repository"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=e(b);c=e(c);function e(a){return a&&a.__esModule?a:{default:a}}function f(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function g(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var i=a.apply(b,c);function g(a){f(i,d,e,g,h,"next",a)}function h(a){f(i,d,e,g,h,"throw",a)}g(void 0)})}}var h={MANUAL_TOGGLE:"button[data-action=toggle-manual-completion]"},i={TOGGLE_MARK_DONE:"manual:mark-done",TOGGLE_UNDO:"manual:undo"},j=!1,k=function(){if(j){return}document.addEventListener("click",function(a){var b=a.target.closest(h.MANUAL_TOGGLE);if(b){a.preventDefault();l(b).catch(c.default.exception)}});j=!0};a.init=k;var l=function(){var a=g(regeneratorRuntime.mark(function a(e){var f,g,h,j,k,l,m,n;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=e.innerHTML;e.setAttribute("disabled","disabled");g=e.getAttribute("data-toggletype");h=e.getAttribute("data-cmid");j=e.getAttribute("data-activityname");k=g===i.TOGGLE_MARK_DONE;a.next=8;return b.default.render("core/loading",{});case 8:l=a.sent;a.next=11;return b.default.replaceNodeContents(e,l,"");case 11:a.prev=11;a.next=14;return(0,d.toggleManualCompletion)(h,k);case 14:m={cmid:h,activityname:j,overallcomplete:k,overallincomplete:!k,istrackeduser:!0};a.next=17;return b.default.renderForPromise("core_course/completion_manual",m);case 17:n=a.sent;a.next=20;return b.default.replaceNode(e,n.html,n.js);case 20:a.next=27;break;case 22:a.prev=22;a.t0=a["catch"](11);e.removeAttribute("disabled");e.innerHTML=f;c.default.exception(a.t0);case 27:case"end":return a.stop();}}},a,null,[[11,22]])}));return function(){return a.apply(this,arguments)}}()});
+//# sourceMappingURL=manual_completion_toggle.min.js.map
diff --git a/course/amd/build/manual_completion_toggle.min.js.map b/course/amd/build/manual_completion_toggle.min.js.map
new file mode 100644
index 00000000000..e0720d18796
--- /dev/null
+++ b/course/amd/build/manual_completion_toggle.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/manual_completion_toggle.js"],"names":["SELECTORS","MANUAL_TOGGLE","TOGGLE_TYPES","TOGGLE_MARK_DONE","TOGGLE_UNDO","registered","init","document","addEventListener","e","toggleButton","target","closest","preventDefault","toggleManualCompletionState","catch","Notification","exception","originalInnerHtml","innerHTML","setAttribute","toggleType","getAttribute","cmid","activityname","completed","Templates","render","loadingHtml","replaceNodeContents","templateContext","overallcomplete","overallincomplete","istrackeduser","renderForPromise","renderObject","replaceNode","html","js","removeAttribute"],"mappings":"uNAyBA,OACA,O,qXAQMA,CAAAA,CAAS,CAAG,CACdC,aAAa,CAAE,8CADD,C,CASZC,CAAY,CAAG,CACjBC,gBAAgB,CAAE,kBADD,CAEjBC,WAAW,CAAE,aAFI,C,CAUjBC,CAAU,G,CAKDC,CAAI,CAAG,UAAM,CACtB,GAAID,CAAJ,CAAgB,CACZ,MACH,CACDE,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,CAAmC,SAACC,CAAD,CAAO,CACtC,GAAMC,CAAAA,CAAY,CAAGD,CAAC,CAACE,MAAF,CAASC,OAAT,CAAiBZ,CAAS,CAACC,aAA3B,CAArB,CACA,GAAIS,CAAJ,CAAkB,CACdD,CAAC,CAACI,cAAF,GACAC,CAA2B,CAACJ,CAAD,CAA3B,CAA0CK,KAA1C,CAAgDC,UAAaC,SAA7D,CACH,CACJ,CAND,EAOAZ,CAAU,GACb,C,UAQD,GAAMS,CAAAA,CAA2B,4CAAG,WAAMJ,CAAN,uGAE1BQ,CAF0B,CAENR,CAAY,CAACS,SAFP,CAKhCT,CAAY,CAACU,YAAb,CAA0B,UAA1B,CAAsC,UAAtC,EAGMC,CAR0B,CAQbX,CAAY,CAACY,YAAb,CAA0B,iBAA1B,CARa,CAS1BC,CAT0B,CASnBb,CAAY,CAACY,YAAb,CAA0B,WAA1B,CATmB,CAU1BE,CAV0B,CAUXd,CAAY,CAACY,YAAb,CAA0B,mBAA1B,CAVW,CAY1BG,CAZ0B,CAYdJ,CAAU,GAAKnB,CAAY,CAACC,gBAZd,gBAeNuB,WAAUC,MAAV,CAAiB,cAAjB,CAAiC,EAAjC,CAfM,QAe1BC,CAf0B,wBAgB1BF,WAAUG,mBAAV,CAA8BnB,CAA9B,CAA4CkB,CAA5C,CAAyD,EAAzD,CAhB0B,mCAoBtB,6BAAuBL,CAAvB,CAA6BE,CAA7B,CApBsB,SAuBtBK,CAvBsB,CAuBJ,CACpBP,IAAI,CAAEA,CADc,CAEpBC,YAAY,CAAEA,CAFM,CAGpBO,eAAe,CAAEN,CAHG,CAIpBO,iBAAiB,CAAE,CAACP,CAJA,CAKpBQ,aAAa,GALO,CAvBI,iBA8BDP,WAAUQ,gBAAV,CAA2B,+BAA3B,CAA4DJ,CAA5D,CA9BC,SA8BtBK,CA9BsB,wBAiCtBT,WAAUU,WAAV,CAAsB1B,CAAtB,CAAoCyB,CAAY,CAACE,IAAjD,CAAuDF,CAAY,CAACG,EAApE,CAjCsB,+DAqC5B5B,CAAY,CAAC6B,eAAb,CAA6B,UAA7B,EACA7B,CAAY,CAACS,SAAb,CAAyBD,CAAzB,CAGAF,UAAaC,SAAb,OAzC4B,wDAAH,uD","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Provides the functionality for toggling the manual completion state of a course module through\n * the manual completion button.\n *\n * @module      core_course/manual_completion_toggle\n * @package     core_course\n * @copyright   2021 Jun Pataleta <jun@moodle.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from 'core/templates';\nimport Notification from 'core/notification';\nimport {toggleManualCompletion} from 'core_course/repository';\n\n/**\n * Selectors in the manual completion template.\n *\n * @type {{MANUAL_TOGGLE: string}}\n */\nconst SELECTORS = {\n    MANUAL_TOGGLE: 'button[data-action=toggle-manual-completion]',\n};\n\n/**\n * Toggle type values for the data-toggletype attribute in the core_course/completion_manual template.\n *\n * @type {{TOGGLE_UNDO: string, TOGGLE_MARK_DONE: string}}\n */\nconst TOGGLE_TYPES = {\n    TOGGLE_MARK_DONE: 'manual:mark-done',\n    TOGGLE_UNDO: 'manual:undo',\n};\n\n/**\n * Whether the event listener has already been registered for this module.\n *\n * @type {boolean}\n */\nlet registered = false;\n\n/**\n * Registers the click event listener for the manual completion toggle button.\n */\nexport const init = () => {\n    if (registered) {\n        return;\n    }\n    document.addEventListener('click', (e) => {\n        const toggleButton = e.target.closest(SELECTORS.MANUAL_TOGGLE);\n        if (toggleButton) {\n            e.preventDefault();\n            toggleManualCompletionState(toggleButton).catch(Notification.exception);\n        }\n    });\n    registered = true;\n};\n\n/**\n * Toggles the manual completion state of the module for the given user.\n *\n * @param {HTMLElement} toggleButton\n * @returns {Promise<void>}\n */\nconst toggleManualCompletionState = async(toggleButton) => {\n    // Make a copy of the original content of the button.\n    const originalInnerHtml = toggleButton.innerHTML;\n\n    // Disable the button to prevent double clicks.\n    toggleButton.setAttribute('disabled', 'disabled');\n\n    // Get button data.\n    const toggleType = toggleButton.getAttribute('data-toggletype');\n    const cmid = toggleButton.getAttribute('data-cmid');\n    const activityname = toggleButton.getAttribute('data-activityname');\n    // Get the target completion state.\n    const completed = toggleType === TOGGLE_TYPES.TOGGLE_MARK_DONE;\n\n    // Replace the button contents with the loading icon.\n    const loadingHtml = await Templates.render('core/loading', {});\n    await Templates.replaceNodeContents(toggleButton, loadingHtml, '');\n\n    try {\n        // Call the webservice to update the manual completion status.\n        await toggleManualCompletion(cmid, completed);\n\n        // All good so far. Refresh the manual completion button to reflect its new state by re-rendering the template.\n        const templateContext = {\n            cmid: cmid,\n            activityname: activityname,\n            overallcomplete: completed,\n            overallincomplete: !completed,\n            istrackeduser: true, // We know that we're tracking completion for this user given the presence of this button.\n        };\n        const renderObject = await Templates.renderForPromise('core_course/completion_manual', templateContext);\n\n        // Replace the toggle button with the newly loaded template.\n        await Templates.replaceNode(toggleButton, renderObject.html, renderObject.js);\n\n    } catch (exception) {\n        // In case of an error, revert the original state and appearance of the button.\n        toggleButton.removeAttribute('disabled');\n        toggleButton.innerHTML = originalInnerHtml;\n\n        // Show the exception.\n        Notification.exception(exception);\n    }\n};\n"],"file":"manual_completion_toggle.min.js"}
\ No newline at end of file
diff --git a/course/amd/src/manual_completion_toggle.js b/course/amd/src/manual_completion_toggle.js
new file mode 100644
index 00000000000..c14eb9be3a4
--- /dev/null
+++ b/course/amd/src/manual_completion_toggle.js
@@ -0,0 +1,122 @@
+// 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/>.
+
+/**
+ * Provides the functionality for toggling the manual completion state of a course module through
+ * the manual completion button.
+ *
+ * @module      core_course/manual_completion_toggle
+ * @package     core_course
+ * @copyright   2021 Jun Pataleta <jun@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Templates from 'core/templates';
+import Notification from 'core/notification';
+import {toggleManualCompletion} from 'core_course/repository';
+
+/**
+ * Selectors in the manual completion template.
+ *
+ * @type {{MANUAL_TOGGLE: string}}
+ */
+const SELECTORS = {
+    MANUAL_TOGGLE: 'button[data-action=toggle-manual-completion]',
+};
+
+/**
+ * Toggle type values for the data-toggletype attribute in the core_course/completion_manual template.
+ *
+ * @type {{TOGGLE_UNDO: string, TOGGLE_MARK_DONE: string}}
+ */
+const TOGGLE_TYPES = {
+    TOGGLE_MARK_DONE: 'manual:mark-done',
+    TOGGLE_UNDO: 'manual:undo',
+};
+
+/**
+ * Whether the event listener has already been registered for this module.
+ *
+ * @type {boolean}
+ */
+let registered = false;
+
+/**
+ * Registers the click event listener for the manual completion toggle button.
+ */
+export const init = () => {
+    if (registered) {
+        return;
+    }
+    document.addEventListener('click', (e) => {
+        const toggleButton = e.target.closest(SELECTORS.MANUAL_TOGGLE);
+        if (toggleButton) {
+            e.preventDefault();
+            toggleManualCompletionState(toggleButton).catch(Notification.exception);
+        }
+    });
+    registered = true;
+};
+
+/**
+ * Toggles the manual completion state of the module for the given user.
+ *
+ * @param {HTMLElement} toggleButton
+ * @returns {Promise<void>}
+ */
+const toggleManualCompletionState = async(toggleButton) => {
+    // Make a copy of the original content of the button.
+    const originalInnerHtml = toggleButton.innerHTML;
+
+    // Disable the button to prevent double clicks.
+    toggleButton.setAttribute('disabled', 'disabled');
+
+    // Get button data.
+    const toggleType = toggleButton.getAttribute('data-toggletype');
+    const cmid = toggleButton.getAttribute('data-cmid');
+    const activityname = toggleButton.getAttribute('data-activityname');
+    // Get the target completion state.
+    const completed = toggleType === TOGGLE_TYPES.TOGGLE_MARK_DONE;
+
+    // Replace the button contents with the loading icon.
+    const loadingHtml = await Templates.render('core/loading', {});
+    await Templates.replaceNodeContents(toggleButton, loadingHtml, '');
+
+    try {
+        // Call the webservice to update the manual completion status.
+        await toggleManualCompletion(cmid, completed);
+
+        // All good so far. Refresh the manual completion button to reflect its new state by re-rendering the template.
+        const templateContext = {
+            cmid: cmid,
+            activityname: activityname,
+            overallcomplete: completed,
+            overallincomplete: !completed,
+            istrackeduser: true, // We know that we're tracking completion for this user given the presence of this button.
+        };
+        const renderObject = await Templates.renderForPromise('core_course/completion_manual', templateContext);
+
+        // Replace the toggle button with the newly loaded template.
+        await Templates.replaceNode(toggleButton, renderObject.html, renderObject.js);
+
+    } catch (exception) {
+        // In case of an error, revert the original state and appearance of the button.
+        toggleButton.removeAttribute('disabled');
+        toggleButton.innerHTML = originalInnerHtml;
+
+        // Show the exception.
+        Notification.exception(exception);
+    }
+};
diff --git a/course/classes/output/activity_information.php b/course/classes/output/activity_information.php
new file mode 100644
index 00000000000..2d281c31b22
--- /dev/null
+++ b/course/classes/output/activity_information.php
@@ -0,0 +1,154 @@
+<?php
+// 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/>.
+
+/**
+ * File containing the class activity information renderable.
+ *
+ * @package    core_course
+ * @copyright  2021 Jun Pataleta <jun@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+namespace core_course\output;
+
+defined('MOODLE_INTERNAL') || die();
+
+use cm_info;
+use completion_info;
+use context;
+use core\activity_dates;
+use core_completion\cm_completion_details;
+use core_user;
+use core_user\fields;
+use renderable;
+use renderer_base;
+use stdClass;
+use templatable;
+
+/**
+ * The activity information renderable class.
+ *
+ * @package    core_course
+ * @copyright  2021 Jun Pataleta <jun@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class activity_information implements renderable, templatable {
+
+    /** @var cm_info The course module information. */
+    protected $cminfo = null;
+
+    /** @var array The array of relevant dates for this activity. */
+    protected $activitydates = [];
+
+    /** @var cm_completion_details The user's completion details for this activity. */
+    protected $cmcompletion = null;
+
+    /**
+     * Constructor.
+     *
+     * @param cm_info $cminfo The course module information.
+     * @param cm_completion_details $cmcompletion The course module information.
+     * @param array $activitydates The activity dates.
+     */
+    public function __construct(cm_info $cminfo, cm_completion_details $cmcompletion, array $activitydates) {
+        $this->cminfo = $cminfo;
+        $this->cmcompletion = $cmcompletion;
+        $this->activitydates = $activitydates;
+    }
+
+    /**
+     * Export this data so it can be used as the context for a mustache template.
+     *
+     * @param renderer_base $output Renderer base.
+     * @return stdClass
+     */
+    public function export_for_template(renderer_base $output): stdClass {
+        $data = $this->build_completion_data();
+
+        $data->cmid = $this->cminfo->id;
+        $data->activityname = $this->cminfo->name;
+        $data->activitydates = $this->activitydates;
+
+        return $data;
+    }
+
+    /**
+     * Builds the completion data for export.
+     *
+     * @return stdClass
+     */
+    protected function build_completion_data(): stdClass {
+        $data = new stdClass();
+
+        $data->hascompletion = $this->cmcompletion->has_completion();
+        $data->isautomatic = $this->cmcompletion->is_automatic();
+
+        // Get the name of the user overriding the completion condition, if available.
+        $data->overrideby = null;
+        $overrideby = $this->cmcompletion->overridden_by();
+        $overridebyname = null;
+        if (!empty($overrideby)) {
+            $userfields = fields::for_name();
+            $overridebyrecord = core_user::get_user($overrideby, 'id ' . $userfields->get_sql()->selects, MUST_EXIST);
+            $data->overrideby = fullname($overridebyrecord);
+        }
+
+        // We'll show only the completion conditions and not the completion status if we're not tracking completion for this user
+        // (e.g. a teacher, admin).
+        $data->istrackeduser = $this->cmcompletion->is_tracked_user();
+
+        // Overall completion states.
+        $overallcompletion = $this->cmcompletion->get_overall_completion();
+        $data->overallcomplete = $overallcompletion == COMPLETION_COMPLETE;
+        $data->overallincomplete = $overallcompletion == COMPLETION_INCOMPLETE;
+
+        // Set an accessible description for manual completions with overridden completion state.
+        if (!$data->isautomatic && $data->overrideby) {
+            $setbydata = (object)[
+                'activityname' => $this->cminfo->name,
+                'setby' => $data->overrideby,
+            ];
+            $setbylangkey = $data->overallcomplete ? 'completion_setby:manual:done' : 'completion_setby:manual:markdone';
+            $data->accessibledescription = get_string($setbylangkey, 'course', $setbydata);
+        }
+
+        // Build automatic completion details.
+        $details = [];
+        foreach ($this->cmcompletion->get_details() as $key => $detail) {
+            // Set additional attributes for the template.
+            $detail->key = $key;
+            $detail->statuscomplete = in_array($detail->status, [COMPLETION_COMPLETE, COMPLETION_COMPLETE_PASS]);
+            $detail->statuscompletefail = $detail->status == COMPLETION_COMPLETE_FAIL;
+            $detail->statusincomplete = $detail->status == COMPLETION_INCOMPLETE;
+
+            // Add an accessible description to be used for title and aria-label attributes for overridden completion details.
+            if ($data->overrideby) {
+                $setbydata = (object)[
+                    'condition' => $detail->description,
+                    'setby' => $data->overrideby,
+                ];
+                $detail->accessibledescription = get_string('completion_setby:auto', 'course', $setbydata);
+            }
+
+            // We don't need the status in the template.
+            unset($detail->status);
+
+            $details[] = $detail;
+        }
+        $data->completiondetails = $details;
+
+        return $data;
+    }
+}
diff --git a/course/renderer.php b/course/renderer.php
index a015676ecfd..8da6c425bcb 100644
--- a/course/renderer.php
+++ b/course/renderer.php
@@ -2188,6 +2188,19 @@ class core_course_renderer extends plugin_renderer_base {
         return $this->coursecat_tree($chelper, $tree);
     }
 
+    /**
+     * Renders the activity information.
+     *
+     * Defer to template.
+     *
+     * @param \core_course\output\activity_information $page
+     * @return string html for the page
+     */
+    public function render_activity_information(\core_course\output\activity_information $page) {
+        $data = $page->export_for_template($this->output);
+        return $this->output->render_from_template('core_course/activity_info', $data);
+    }
+
     /**
      * Renders the activity navigation.
      *
diff --git a/course/templates/activity_date.mustache b/course/templates/activity_date.mustache
new file mode 100644
index 00000000000..c50e292d6dc
--- /dev/null
+++ b/course/templates/activity_date.mustache
@@ -0,0 +1,30 @@
+{{!
+    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_course/activity_date
+
+    Template for displaying the activity's dates.
+
+    Example context (json):
+    {
+        "label": "Opens:",
+        "timestamp": 1293876000
+    }
+}}
+<div>
+    <strong>{{label}}</strong> {{#userdate}} {{timestamp}}, {{#str}} strftimedatetime, core_langconfig {{/str}} {{/userdate}}
+</div>
diff --git a/course/templates/activity_info.mustache b/course/templates/activity_info.mustache
new file mode 100644
index 00000000000..edcc65599b7
--- /dev/null
+++ b/course/templates/activity_info.mustache
@@ -0,0 +1,68 @@
+{{!
+    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_course/activity_info
+
+    Container to display activity information such as:
+      - Activity dates
+      - Activity completion requirements (automatic completion)
+      - Manual completion button
+
+    Example context (json):
+    {
+        "hascompletion": true,
+        "isautomatic": true,
+        "istrackeduser": true,
+        "activitydates": [
+            {
+                "label": "Opens:",
+                "timestamp": 1293876000
+            }
+        ],
+        "completiondetails": [
+             {
+                "statuscomplete": 1,
+                "description": "Viewed"
+            },
+            {
+                "statusincomplete": 1,
+                "description": "Receive a grade"
+            }
+        ]
+    }
+}}
+<div data-region="activity-information" class="activity-information">
+    <div class="mb-1">
+        {{#activitydates}}
+            {{>core_course/activity_date}}
+        {{/activitydates}}
+    </div>
+    <div>
+        {{#hascompletion}}
+            {{#isautomatic}}
+                <div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course{{/str}}">
+                    {{#completiondetails}}
+                        {{> core_course/completion_automatic }}
+                    {{/completiondetails}}
+                </div>
+            {{/isautomatic}}
+            {{^isautomatic}}
+                {{> core_course/completion_manual }}
+            {{/isautomatic}}
+        {{/hascompletion}}
+    </div>
+</div>
diff --git a/course/templates/completion_automatic.mustache b/course/templates/completion_automatic.mustache
new file mode 100644
index 00000000000..5875b87742a
--- /dev/null
+++ b/course/templates/completion_automatic.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_course/completion_automatic
+
+    Template for displaying an automatic completion rule and its status.
+
+    Example context (json):
+    {
+        "statuscomplete": 1,
+        "description": "View",
+        "istrackeduser": true,
+        "accessibledescription": "Done: View (Set by Admin User)"
+    }
+}}
+{{#istrackeduser}}
+    {{#statuscomplete}}
+    <span class="badge badge-success rounded mb-1" role="listitem" {{!
+        }}{{#accessibledescription}}{{!
+            }}title="{{.}}" {{!
+            }}aria-label="{{.}}" {{!
+        }}{{/accessibledescription}}>
+        <strong>{{#str}}completion_automatic:done, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
+    </span>
+    {{/statuscomplete}}
+    {{#statuscompletefail}}
+    <span class="badge badge-danger rounded mb-1" role="listitem" {{!
+        }}{{#accessibledescription}}{{!
+            }}title="{{.}}" {{!
+            }}aria-label="{{.}}" {{!
+        }}{{/accessibledescription}}>
+        <strong>{{#str}}completion_automatic:failed, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
+    </span>
+    {{/statuscompletefail}}
+    {{#statusincomplete}}
+    <span class="badge badge-secondary rounded mb-1" role="listitem" {{!
+        }}{{#accessibledescription}}{{!
+            }}title="{{.}}" {{!
+            }}aria-label="{{.}}" {{!
+        }}{{/accessibledescription}}>
+        <strong>{{#str}}completion_automatic:todo, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
+    </span>
+    {{/statusincomplete}}
+{{/istrackeduser}}
+{{^istrackeduser}}
+    <span class="badge badge-secondary rounded mb-1" role="listitem">
+        <span class="font-weight-normal">{{description}}</span>
+    </span>
+{{/istrackeduser}}
diff --git a/course/templates/completion_manual.mustache b/course/templates/completion_manual.mustache
new file mode 100644
index 00000000000..c8b38b1ac37
--- /dev/null
+++ b/course/templates/completion_manual.mustache
@@ -0,0 +1,67 @@
+{{!
+    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_course/completion_manual
+
+    Template for displaying the manual completion button.
+
+    Example context (json):
+    {
+        "cmid": 0,
+        "overallcomplete": true,
+        "overallincomplete": false
+    }
+}}
+{{#istrackeduser}}
+    {{#overallcomplete}}
+        <button class="btn btn-outline-success" data-action="toggle-manual-completion" data-toggletype="manual:undo" data-cmid="{{cmid}}" data-activityname="{{activityname}}" {{!
+        }}{{#accessibledescription}}{{!
+            }}title="{{.}}" {{!
+            }}aria-label="{{.}}" {{!
+        }}{{/accessibledescription}}{{!
+        }}{{^accessibledescription}}{{!
+            }}title="{{#str}}completion_manual:aria:done, course, {{activityname}} {{/str}}" {{!
+            }}aria-label="{{#str}}completion_manual:aria:done, course, {{activityname}} {{/str}}" {{!
+        }}{{/accessibledescription}}>
+            <i class="fa fa-check" aria-hidden="true"></i> {{#str}} completion_manual:done, core_course {{/str}}
+        </button>
+    {{/overallcomplete}}
+    {{#overallincomplete}}
+        <button class="btn btn-outline-secondary" data-action="toggle-manual-completion" data-toggletype="manual:mark-done" data-cmid="{{cmid}}" data-activityname="{{activityname}}" {{!
+        }}{{#accessibledescription}}{{!
+            }}title="{{.}}" {{!
+            }}aria-label="{{.}}" {{!
+        }}{{/accessibledescription}}{{!
+        }}{{^accessibledescription}}{{!
+            }}title="{{#str}}completion_manual:aria:markdone, course, {{activityname}} {{/str}}" {{!
+            }}aria-label="{{#str}}completion_manual:aria:markdone, course, {{activityname}} {{/str}}" {{!
+        }}{{/accessibledescription}}>
+            {{#str}} completion_manual:markdone, core_course {{/str}}
+        </button>
+    {{/overallincomplete}}
+{{/istrackeduser}}
+{{^istrackeduser}}
+    <button class="btn btn-outline-secondary" disabled>
+        {{#str}} completion_manual:markdone, core_course {{/str}}
+    </button>
+{{/istrackeduser}}
+
+{{#js}}
+require(['core_course/manual_completion_toggle'], toggle => {
+    toggle.init()
+});
+{{/js}}
diff --git a/lang/en/course.php b/lang/en/course.php
index 4e43f8798fe..7f1912d4be9 100644
--- a/lang/en/course.php
+++ b/lang/en/course.php
@@ -46,6 +46,17 @@ $string['aria:favourite'] = 'Course is starred';
 $string['aria:favouritestab'] = 'Starred activities';
 $string['aria:recommendedtab'] = 'Recommended activities';
 $string['aria:modulefavourite'] = 'Star {$a} activity';
+$string['completion_automatic:done'] = 'Done:';
+$string['completion_automatic:failed'] = 'Failed:';
+$string['completion_automatic:todo'] = 'To do:';
+$string['completion_manual:aria:done'] = '{$a} is marked as done. Press to undo.';
+$string['completion_manual:aria:markdone'] = 'Mark {$a} as done';
+$string['completion_manual:done'] = 'Done';
+$string['completion_manual:markdone'] = 'Mark as done';
+$string['completion_setby:auto'] = 'Done: {$a->condition} (set by {$a->setby})';
+$string['completion_setby:manual:done'] = '{$a->activityname} is marked by {$a->setby} as done. Press to undo.';
+$string['completion_setby:manual:markdone'] = '{$a->activityname} is marked by {$a->setby} as not done. Press to mark as done.';
+$string['completionrequirements'] = 'Completion requirements for this activity';
 $string['coursealreadyfinished'] = 'Course already finished';
 $string['coursenotyetstarted'] = 'The course has not yet started';
 $string['coursenotyetfinished'] = 'The course has not yet finished';
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 3b04d5d992a..9b2e352160d 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -35,6 +35,9 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+use core_completion\cm_completion_details;
+use core_course\output\activity_information;
+
 defined('MOODLE_INTERNAL') || die();
 
 /**
@@ -899,6 +902,21 @@ class core_renderer extends renderer_base {
         return '<div role="main">'.$this->unique_main_content_token.'</div>';
     }
 
+    /**
+     * Returns information about an activity.
+     *
+     * @param cm_info $cminfo The course module information.
+     * @param cm_completion_details $completiondetails The completion details for this activity module.
+     * @param array $activitydates The dates for this activity module.
+     * @return string the activity information HTML.
+     * @throws coding_exception
+     */
+    public function activity_information(cm_info $cminfo, cm_completion_details $completiondetails, array $activitydates): string {
+        $activityinfo = new activity_information($cminfo, $completiondetails, $activitydates);
+        $renderer = $this->page->get_renderer('core', 'course');
+        return $renderer->render($activityinfo);
+    }
+
     /**
      * Returns standard navigation between activities in a course.
      *
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 44cc6c52c53..5e62eced2e4 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1191,3 +1191,9 @@ span.editinstructions {
         white-space: pre-wrap;
     }
 }
+
+.automatic-completion-conditions {
+    .badge {
+        font-size: 100%;
+    }
+}
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 4e11c5c5d4d..a3f47f9eb4b 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -9,6 +9,15 @@ select {
     width: auto;
 }
 
+.path-mod {
+    div.activity-information {
+        border-bottom: $border-width solid $table-border-color;
+        padding-top: map-get($spacers, 2);
+        padding-bottom: map-get($spacers, 3);
+        margin-bottom: map-get($spacers, 2);
+    }
+}
+
 // Choice module
 
 .path-mod-choice {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index d93f03e8a92..bed1b9a9f15 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -14120,6 +14120,9 @@ span.editinstructions {
 .activity-navigation #next-activity-link {
   white-space: pre-wrap; }
 
+.automatic-completion-conditions .badge {
+  font-size: 100%; }
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target::before {
   content: " ";
@@ -16752,6 +16755,12 @@ textarea[data-auto-rows] {
 select {
   width: auto; }
 
+.path-mod div.activity-information {
+  border-bottom: 1px solid #dee2e6;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
+  margin-bottom: 0.5rem; }
+
 .path-mod-choice .horizontal .choices .option {
   display: inline-block; }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 662d4668fcd..ca8e0538a35 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -14335,6 +14335,9 @@ span.editinstructions {
 .activity-navigation #next-activity-link {
   white-space: pre-wrap; }
 
+.automatic-completion-conditions .badge {
+  font-size: 100%; }
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target::before {
   content: " ";
@@ -16979,6 +16982,12 @@ textarea[data-auto-rows] {
 select {
   width: auto; }
 
+.path-mod div.activity-information {
+  border-bottom: 1px solid #dee2e6;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
+  margin-bottom: 0.5rem; }
+
 .path-mod-choice .horizontal .choices .option {
   display: inline-block; }