diff --git a/classes/output/mobile.php b/classes/output/mobile.php
index 5e480c7..e4d3eda 100644
--- a/classes/output/mobile.php
+++ b/classes/output/mobile.php
@@ -44,9 +44,10 @@ class mobile {
         global $OUTPUT, $DB, $USER;
 
         $args = (object) $args;
+        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
 
         $cmid = $args->cmid;
-        $groupid = empty($args->group) ? 0 : $args->group; // By default, group 0.
+        $groupid = empty($args->group) ? 0 : (int) $args->group; // By default, group 0.
 
         // Capabilities check.
         $cm = get_coursemodule_from_id('customcert', $cmid);
@@ -114,6 +115,7 @@ class mobile {
             'showreport' => $showreport,
             'hasrecipients' => !empty($recipients),
             'recipients' => array_values($recipients),
+            'numrecipients' => count($recipients),
             'currenttimestamp' => time()
         ];
 
@@ -121,11 +123,13 @@ class mobile {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template('mod_customcert/mobile_view_activity_page', $data),
+                    'html' => $OUTPUT->render_from_template("mod_customcert/mobile_view_activity_page_$versionname", $data),
                 ],
             ],
             'javascript' => '',
-            'otherdata' => ''
+            'otherdata' => [
+                'group' => $groupid,
+            ]
         ];
     }
 
diff --git a/templates/mobile_view_activity_page.mustache b/templates/mobile_view_activity_page_ionic3.mustache
similarity index 100%
rename from templates/mobile_view_activity_page.mustache
rename to templates/mobile_view_activity_page_ionic3.mustache
diff --git a/templates/mobile_view_activity_page_latest.mustache b/templates/mobile_view_activity_page_latest.mustache
new file mode 100644
index 0000000..6018c2e
--- /dev/null
+++ b/templates/mobile_view_activity_page_latest.mustache
@@ -0,0 +1,169 @@
+{{!
+    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 mod_customcert/mobile_view_activity_page
+
+    The main page to view the custom certificate activity
+
+    Classes required for JS:
+    * None
+
+    Data attibutes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * certificate
+    * cmid
+    * hasissues
+    * issues
+    * showgroups
+    * groups
+    * canmanage
+    * requiredtimemet
+    * hasrecipients
+    * recipients
+    * fileurl
+    * showreport
+    * currenttimestamp
+
+    Example context (json):
+    {
+        "certificate": {
+            "id": "1",
+            "course": "2",
+            "name": "A rad certificate name!",
+            "intro": "A certificate",
+            "requiredtime": "60"
+        },
+        "cmid": "25",
+        "issue": {
+            "timecreated": "1528370177"
+        },
+        "showgroups": "true",
+        "groups": [
+            {
+                "id": "2",
+                "selected": "false",
+                "name": "Group A"
+            }
+        ],
+        "canmanage": "true",
+        "requiredtimemet": "true",
+        "fileurl": "http://yoursite.com/mod/customcert/mobile/pluginfile.php?id=4",
+        "showreport": "true",
+        "hasrecipients": "true",
+        "recipients": [
+            {
+                "id": "2",
+                "issueid": "3",
+                "displayname": "Michaelangelo (Mickey)",
+                "fileurl": "http://yoursite.com/mod/customcert/mobile/pluginfile.php?id=4",
+                "timecreated": "1528370177"
+            }
+        ],
+        "currenttimestamp": "1528370177"
+    }
+}}
+{{=<% %>=}}
+<core-course-module-description description="<% certificate.intro %>" component="mod_customcert" componentId="<% cmid %>"></core-course-module-description>
+<ion-list>
+<%^canmanage%>
+    <%#requiredtimemet%>
+        <ion-item>
+            <ion-label>
+                {{ 'plugin.mod_customcert.receiveddate' | translate }}
+                <br />
+                <div class="timerewarded">
+                    <%#issue%>
+                        {{ <% timecreated %> | coreToLocaleString }}
+                    <%/issue%>
+                    <%^issue%>
+                        {{ 'plugin.mod_customcert.notissued' | translate }}
+                    <%/issue%>
+                </div>
+            </ion-label>
+            <div slot="end" class="flex-row">
+                <ion-button fill="clear" [core-download-file]="{fileurl: '<% fileurl %>', timemodified: '<% currenttimestamp %>'}" moduleId="<% cmid %>" courseId="<% certificate.course %>" component="mod_customcert" [attr.aria-label]="'core.download' | translate">
+                    <ion-icon name="cloud-download" slot="icon-only" aria-hidden="true"></ion-icon>
+                </ion-button>
+            </div>
+        </ion-item>
+    <%/requiredtimemet%>
+    <%^requiredtimemet%>
+        <ion-item>
+            <ion-label>
+                <p>{{ 'plugin.mod_customcert.requiredtimenotmet' | translate: {$a: { requiredtime: <% certificate.requiredtime %>} } }}</p>
+            </ion-label>
+        </ion-item>
+    <%/requiredtimemet%>
+<%/canmanage%>
+<%#canmanage%>
+    <ion-button expand="block" class="ion-margin" core-course-download-module-main-file moduleId="<% cmid %>" courseId="<% certificate.course %>" component="mod_customcert" [files]="[{fileurl: '<% fileurl %>', timemodified: '<% currenttimestamp %>'}]">
+        <ion-icon name="cloud-download" slot="start" aria-hidden="true"></ion-icon>
+        {{ 'plugin.mod_customcert.getcustomcert' | translate }}
+    </ion-button>
+<%/canmanage%>
+<%#showreport%>
+    <ion-item>
+        <ion-label>
+            {{ 'plugin.mod_customcert.listofissues' | translate: { $a: <% numrecipients %> } }}
+        </ion-label>
+    </ion-item>
+    <%#showgroups%>
+        <ion-item>
+            <ion-label>{{ 'plugin.mod_customcert.selectagroup' | translate }}</ion-label>
+            <ion-select [(ngModel)]="CONTENT_OTHERDATA.group" name="group" (ionChange)="updateContent({cmid: <% cmid %>, courseid: <% certificate.course %>, group: CONTENT_OTHERDATA.group})" interface="popover">
+                <%#groups%>
+                    <ion-select-option [value]="<% id %>"><% name %></ion-select-option>
+                <%/groups%>
+            </ion-select>
+        </ion-item>
+    <%/showgroups%>
+    <%#hasrecipients%>
+        <%#recipients%>
+            <ion-item>
+                <ion-label>
+                    <% displayname %>
+                    <br />
+                    <div class="timerewarded">{{ <% timecreated %> | coreToLocaleString }}</div>
+                </ion-label>
+                <div slot="end" class="flex-row">
+                    <ion-button fill="clear" [core-download-file]="{fileurl: '<% fileurl %>', timemodified: '<% currenttimestamp %>'}" moduleId="<% cmid %>" courseId="<% certificate.course %>" component="mod_customcert" [attr.aria-label]="'core.download' | translate">
+                        <ion-icon name="cloud-download" slot="icon-only" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                    <%#canmanage%>
+                        <ion-button fill="clear" core-site-plugins-call-ws name="mod_customcert_delete_issue"
+                                [params]="{certificateid: <% certificate.id %>, issueid: <% issueid %>}"
+                                [preSets]="{getFromCache: 0, saveToCache: 0, typeExpected: 'boolean'}"
+                                confirmMessage="{{ 'plugin.mod_customcert.deleteissueconfirm' | translate }}"
+                                refreshOnSuccess="true" [attr.aria-label]="'core.delete' | translate">
+                            <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
+                        </ion-button>
+                    <%/canmanage%>
+                </div>
+            </ion-item>
+        <%/recipients%>
+    <%/hasrecipients%>
+    <%^hasrecipients%>
+        <ion-item>
+            <ion-label>
+                {{ 'plugin.mod_customcert.nothingtodisplay' | translate }}
+            </ion-label>
+        </ion-item>
+    <%/hasrecipients%>
+<%/showreport%>
+</ion-list>