diff --git a/classes/output/mobile.php b/classes/output/mobile.php
index dcf05a6ac5f..4f408422887 100644
--- a/classes/output/mobile.php
+++ b/classes/output/mobile.php
@@ -53,7 +53,6 @@ public static function mobile_view_activity($args) {
 
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
-        $versionname = $args['appversioncode'] >= 3950 ? 'latest' : 'ionic3';
         $cmid = $args['cmid'];
         $courseid = $args['courseid'];
         $takenstatus = empty($args['status']) ? '' : $args['status'];
@@ -252,7 +251,7 @@ public static function mobile_view_activity($args) {
             'templates' => [
                 [
                     'id' => 'main',
-                    'html' => $OUTPUT->render_from_template("mod_attendance/mobile_view_page_$versionname", $data),
+                    'html' => $OUTPUT->render_from_template("mod_attendance/mobile_view_page_latest", $data),
                 ],
             ],
             'javascript' => '',
@@ -272,7 +271,7 @@ public static function mobile_user_form($args) {
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
         $args = (object) $args;
-        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
+        $versionname = $args->appversioncode >= 44000 ? 'latest' : 'ionic5';
         $cmid = $args->cmid;
         $courseid = $args->courseid;
         $sessid = $args->sessid;
@@ -374,7 +373,7 @@ public static function mobile_teacher_form($args) {
         require_once($CFG->dirroot.'/mod/attendance/locallib.php');
 
         $args = (object) $args;
-        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
+        $versionname = $args->appversioncode >= 44000 ? 'latest' : 'ionic5';
         $cmid = $args->cmid;
         $courseid = $args->courseid;
         $sessid = $args->sessid;
diff --git a/templates/mobile_teacher_form_ionic3.mustache b/templates/mobile_teacher_form_ionic5.mustache
similarity index 64%
rename from templates/mobile_teacher_form_ionic3.mustache
rename to templates/mobile_teacher_form_ionic5.mustache
index f25374f2a01..4beb511592e 100644
--- a/templates/mobile_teacher_form_ionic3.mustache
+++ b/templates/mobile_teacher_form_ionic5.mustache
@@ -52,53 +52,53 @@
     <%#showmessage%>
         <%#messages%>
             <span class="messages">
-                <ion-item>
-                    {{ 'plugin.mod_attendance.<% string %>' | translate }}
+                <ion-item class="ion-text-wrap">
+                    <ion-label>{{ 'plugin.mod_attendance.<% string %>' | translate }}</ion-label>
                 </ion-item>
             </span>
         <%/messages%>
     <%/showmessage%>
     <span class="attendance_selectall">
-                <ion-item>
-                    {{ 'plugin.mod_attendance.setallstatuses' | translate }}
-                </ion-item>
-    <ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.statusall" (ionChange)="<% selectall %>">
+        <ion-item class="ion-text-wrap">
+            <ion-label>{{ 'plugin.mod_attendance.setallstatuses' | translate }}</ion-label>
+        </ion-item>
+        <ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.statusall" (ionChange)="<% selectall %>">
         <%#statuses%>
 
-        <span class="radiolabel">
-                <ion-item>
+            <span class="radiolabel">
+                <ion-item class="ion-text-wrap">
                     <ion-label><% acronym %></ion-label>
                     <ion-radio value="<% stid %>"></ion-radio>
                 </ion-item>
             </span>
         <%/statuses%>
-    </ion-list>
+        </ion-radio-group>
     </span>
     <%#users%>
     <span class="attendance_user_row">
     <!-- User and status of the submission. -->
-    <span ion-item text-wrap title="<% fullname %>">
-        <ion-avatar item-start>
+    <ion-item class="ion-text-wrap" title="<% fullname %>">
+        <ion-avatar slot="start">
             <img src="<% profileimageurl %>" core-external-content role="presentation" onError="this.src='assets/img/user-avatar.png'">
         </ion-avatar>
-        <h2><% fullname %></h2>
-    </span>
-    <ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.status<% userid %>">
+        <ion-label>
+            <h2><% fullname %></h2>
+        </ion-label>
+    </ion-item>
+    <ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.status<% userid %>">
         <%#statuses%>
         <span class="radiolabel">
-                <ion-item>
-                    <ion-label><% acronym %></ion-label>
-                    <ion-radio value="<% stid %>"></ion-radio>
-                </ion-item>
-            </span>
+            <ion-item class="ion-text-wrap">
+                <ion-label><% acronym %></ion-label>
+                <ion-radio value="<% stid %>"></ion-radio>
+            </ion-item>
+        </span>
         <%/statuses%>
-    </ion-list>
+    </ion-radio-group>
     </span>
     <%/users%>
-    <ion-item>
-        <button ion-button core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %><% btnargs %>}">
-            {{ 'plugin.mod_attendance.submitattendance' | translate }}
-        </button>
-    </ion-item>
+    <ion-button class="ion-margin" expand="block" core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %><% btnargs %>}">
+        {{ 'plugin.mod_attendance.submitattendance' | translate }}
+    </ion-button>
 
 </div>
\ No newline at end of file
diff --git a/templates/mobile_teacher_form_latest.mustache b/templates/mobile_teacher_form_latest.mustache
index 4beb511592e..cb9e2cc4d25 100644
--- a/templates/mobile_teacher_form_latest.mustache
+++ b/templates/mobile_teacher_form_latest.mustache
@@ -46,9 +46,17 @@
 }}
 {{=<% %>=}}
 <div class="attendance_mobile_teacher_form">
+    <%#attendance.intro%>
     <span class="description">
-    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+        <ion-card>
+            <ion-item class="ion-text-wrap">
+                <ion-label>
+                    <core-format-text text="<%attendance.intro%>" component="mod_attendance" componentId="<%cmid%>" collapsible-item />
+                </ion-label>
+            </ion-item>
+        </ion-card>
     </span>
+    <%/attendance.intro%>
     <%#showmessage%>
         <%#messages%>
             <span class="messages">
@@ -67,8 +75,7 @@
 
             <span class="radiolabel">
                 <ion-item class="ion-text-wrap">
-                    <ion-label><% acronym %></ion-label>
-                    <ion-radio value="<% stid %>"></ion-radio>
+                    <ion-radio value="<% stid %>"><% acronym %></ion-radio>
                 </ion-item>
             </span>
         <%/statuses%>
@@ -89,8 +96,7 @@
         <%#statuses%>
         <span class="radiolabel">
             <ion-item class="ion-text-wrap">
-                <ion-label><% acronym %></ion-label>
-                <ion-radio value="<% stid %>"></ion-radio>
+                <ion-radio value="<% stid %>"><% acronym %></ion-radio>
             </ion-item>
         </span>
         <%/statuses%>
@@ -101,4 +107,4 @@
         {{ 'plugin.mod_attendance.submitattendance' | translate }}
     </ion-button>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/mobile_user_form_ionic3.mustache b/templates/mobile_user_form_ionic5.mustache
similarity index 71%
rename from templates/mobile_user_form_ionic3.mustache
rename to templates/mobile_user_form_ionic5.mustache
index b47502da52d..103fdc107e8 100644
--- a/templates/mobile_user_form_ionic3.mustache
+++ b/templates/mobile_user_form_ionic5.mustache
@@ -49,34 +49,34 @@
     <%#showmessage%>
         <%#messages%>
             <span class="messages">
-                <ion-item>
-                    {{ 'plugin.mod_attendance.<% string %>' | translate }}
+                <ion-item class="ion-text-wrap">
+                    <ion-label>{{ 'plugin.mod_attendance.<% string %>' | translate }}</ion-label>
                 </ion-item>
             </span>
         <%/messages%>
     <%/showmessage%>
     <%#showpassword%>
-    <ion-list [(ngModel)]="studentpass">
     <ion-item>
         <ion-label>{{ 'plugin.mod_attendance.enterpassword' | translate }}:</ion-label>
-        <ion-input type="text" name="studentpass"></ion-input>
+        <ion-input type="text" name="studentpass" [(ngModel)]="studentpass"></ion-input>
     </ion-item>
-    </ion-list>
     <%/showpassword%>
     <%#showstatuses%>
-    <ion-list radio-group [(ngModel)]="status">
+    <ion-radio-group [(ngModel)]="status" name="status">
         <%#statuses%>
-        <ion-item>
+        <ion-item class="ion-text-wrap">
             <ion-label><% description %></ion-label>
-            <ion-radio value="<% stid %>"></ion-radio>
+            <ion-radio slot="end" value="<% stid %>"></ion-radio>
         </ion-item>
         <%/statuses%>
-    </ion-list>
-    <button ion-button core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %>, status: status, studentpass: studentpass}">
+    </ion-radio-group>
+    <ion-button class="ion-margin" expand="block" core-site-plugins-new-content component="mod_attendance" method="mobile_view_activity" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %>, status: status, studentpass: studentpass}">
         {{ 'plugin.mod_attendance.submitattendance' | translate }}
-    </button>
+    </ion-button>
     <%/showstatuses%>
     <%#disabledduetotime%>
-    {{ 'plugin.mod_attendance.somedisabledstatus' | translate }}
+    <ion-item>
+        <ion-label>{{ 'plugin.mod_attendance.somedisabledstatus' | translate }}</ion-label>
+    </ion-item>
     <%/disabledduetotime%>
 </div>
\ No newline at end of file
diff --git a/templates/mobile_user_form_latest.mustache b/templates/mobile_user_form_latest.mustache
index 103fdc107e8..1185a3558fc 100644
--- a/templates/mobile_user_form_latest.mustache
+++ b/templates/mobile_user_form_latest.mustache
@@ -45,7 +45,15 @@
 }}
 {{=<% %>=}}
 <div class="attendance_mobile_user_form">
-    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+    <%#attendance.intro%>
+    <ion-card>
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <core-format-text text="<%attendance.intro%>" component="mod_attendance" componentId="<%cmid%>" collapsible-item />
+            </ion-label>
+        </ion-item>
+    </ion-card>
+    <%/attendance.intro%>
     <%#showmessage%>
         <%#messages%>
             <span class="messages">
@@ -65,8 +73,7 @@
     <ion-radio-group [(ngModel)]="status" name="status">
         <%#statuses%>
         <ion-item class="ion-text-wrap">
-            <ion-label><% description %></ion-label>
-            <ion-radio slot="end" value="<% stid %>"></ion-radio>
+            <ion-radio value="<% stid %>"><% description %></ion-radio>
         </ion-item>
         <%/statuses%>
     </ion-radio-group>
@@ -79,4 +86,4 @@
         <ion-label>{{ 'plugin.mod_attendance.somedisabledstatus' | translate }}</ion-label>
     </ion-item>
     <%/disabledduetotime%>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/mobile_view_page_ionic3.mustache b/templates/mobile_view_page_ionic3.mustache
deleted file mode 100644
index 8d134f17ab5..00000000000
--- a/templates/mobile_view_page_ionic3.mustache
+++ /dev/null
@@ -1,144 +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 mod_attendance/mobile_view_page
-
-    The main page to view the attendance activity
-
-    Classes required for JS:
-    * None
-
-    Data attibutes required for JS:
-    * All data attributes are required
-
-    Context variables required for this template:
-    * attendance
-    * summary
-    * cmid
-
-    Example context (json):
-    {
-        "attendance": {
-            "id": "1",
-            "course": "2",
-            "name": "Class Attendance",
-            "intro": "Intro"
-        },
-        "summary": {
-            "numtakensessions": "1",
-            "pointssessionscompleted": "2",
-            "percentagesessionscompleted": "2"
-        },
-        "cmid": "25",
-        "timestamp": "1234"
-    }
-}}
-{{=<% %>=}}
-<div class="attendance_mobile_view_page">
-    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
-    <%#showmessage%>
-    <%#messages%>
-    <span class="messages">
-        <ion-item>
-            {{ 'plugin.mod_attendance.<% string %>' | translate }}
-        </ion-item>
-    </span>
-    <%/messages%>
-    <%/showmessage%>
-    <%#sessions%>
-    <ion-item>
-        <h2><% time %></h2>
-        <h3><% groupname %></h3>
-        <h3><% currentstatus %></h3>
-        <%#sessid%>
-        <button ion-button core-site-plugins-new-content component="mod_attendance" method="<% attendancefunction %>" [args]="{cmid: <% cmid %>, courseid: <% courseid %>, sessid: <% sessid %>, timestamp: <% timestamp %>}">
-            {{ 'plugin.mod_attendance.submitattendance' | translate }}
-        </button>
-        <%/sessid%>
-    </ion-item>
-    <%/sessions%>
-    <ion-item>
-    <ion-grid>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.sessionscompleted' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.numtakensessions %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.pointssessionscompleted' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.pointssessionscompleted %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.percentagesessionscompleted' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.percentagesessionscompleted %>
-            </ion-col>
-        </ion-row>
-
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.sessionstotal' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.numallsessions %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.pointsallsessions' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.percentagesessionscompleted %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.percentageallsessions' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.allsessionspercentage %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.maxpossiblepoints' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.maxpossiblepoints %>
-            </ion-col>
-        </ion-row>
-        <ion-row>
-            <ion-col col-9 text-wrap class="text-left">
-                {{ 'plugin.mod_attendance.maxpossiblepercentage' | translate }}
-            </ion-col>
-            <ion-col col-2 class="text-left">
-                <% summary.maxpossiblepercentage %>
-            </ion-col>
-        </ion-row>
-
-    </ion-grid>
-    </ion-item>
-</div>
\ No newline at end of file
diff --git a/templates/mobile_view_page_latest.mustache b/templates/mobile_view_page_latest.mustache
index af7746e80b9..b6da5fbbbc1 100644
--- a/templates/mobile_view_page_latest.mustache
+++ b/templates/mobile_view_page_latest.mustache
@@ -49,7 +49,9 @@
 }}
 {{=<% %>=}}
 <div class="attendance_mobile_view_page">
-    <core-course-module-description description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"></core-course-module-description>
+    <core-course-module-info [module]="module" description="<% attendance.intro %>" component="mod_attendance" componentId="<% cmid %>"
+        [courseId]="courseId">
+    </core-course-module-info>
     <%#showmessage%>
     <%#messages%>
     <span class="messages">
@@ -145,4 +147,4 @@
     </ion-grid>
     </ion-label>
     </ion-item>
-</div>
\ No newline at end of file
+</div>