diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index ee5cadb64..f2b99aa64 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -176,128 +176,115 @@
                     <!-- General statistics for the current group. -->
                     <ion-card class="addon-mod_lesson-lessonstats" *ngIf="overview">
                         <ion-card-header class="ion-text-wrap">
-                            <ion-card-subtitle>{{ 'addon.mod_lesson.lessonstats' | translate }}</ion-card-subtitle>
+                            <ion-card-title>{{ 'addon.mod_lesson.lessonstats' | translate }}</ion-card-title>
                         </ion-card-header>
 
                         <!-- In tablet, max 2 rows with 3 columns. -->
-                        <div class="ion-hide-md-down">
-                            <ion-grid class="ion-text-wrap" *ngIf="overview.lessonscored">
-                                <ion-row>
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</p>
-                                        <p *ngIf="overview.numofattempts > 0">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
-                                        </p>
-                                        <p *ngIf="overview.numofattempts <= 0">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
+                        <ion-grid class="ion-text-wrap ion-hide-md-down">
+                            <ion-row *ngIf="overview.lessonscored">
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
+                                    <p *ngIf="overview.numofattempts > 0">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
+                                    </p>
+                                    <p *ngIf="overview.numofattempts <= 0">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</p>
-                                        <p *ngIf="overview.highscore != null">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
-                                        </p>
-                                        <p *ngIf="overview.highscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
+                                    <p *ngIf="overview.highscore != null">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
+                                    </p>
+                                    <p *ngIf="overview.highscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</p>
-                                        <p *ngIf="overview.lowscore != null">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
-                                        </p>
-                                        <p *ngIf="overview.lowscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
+                                    <p *ngIf="overview.lowscore != null">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
+                                    </p>
+                                    <p *ngIf="overview.lowscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
+                            </ion-row>
+                            <ion-row>
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
+                                    <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
+                                    <p *ngIf="overview.avetime == null || !overview.numofattempts">
+                                        {{ 'addon.mod_lesson.notcompleted' | translate }}
+                                    </p>
+                                </ion-col>
 
-                            <ion-grid class="ion-text-wrap">
-                                <ion-row>
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</p>
-                                        <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
-                                        <p *ngIf="overview.avetime == null || !overview.numofattempts">
-                                            {{ 'addon.mod_lesson.notcompleted' | translate }}
-                                        </p>
-                                    </ion-col>
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</h3>
+                                    <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
+                                    <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</p>
-                                        <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
-                                        <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-
-                                    <ion-col class="ion-text-center">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</p>
-                                        <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
-                                        <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
-                        </div>
+                                <ion-col class="ion-text-center">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</h3>
+                                    <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
+                                    <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
+                            </ion-row>
+                        </ion-grid>
 
                         <!-- In phone, 3 rows with 1 or 2 columns. -->
-                        <div class="ion-hide-md-up">
-                            <ion-grid class="ion-text-wrap">
-                                <ion-row>
-                                    <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</p>
-                                        <p *ngIf="overview.numofattempts > 0">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
-                                        </p>
-                                        <p *ngIf="overview.numofattempts <= 0">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
+                        <ion-grid class="ion-text-wrap ion-hide-md-up">
+                            <ion-row>
+                                <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
+                                    <p *ngIf="overview.numofattempts > 0">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
+                                    </p>
+                                    <p *ngIf="overview.numofattempts <= 0">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                                    <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</p>
-                                        <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
-                                        <p *ngIf="overview.avetime == null || !overview.numofattempts">
-                                            {{ 'addon.mod_lesson.notcompleted' | translate }}
-                                        </p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
+                                <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
+                                    <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
+                                    <p *ngIf="overview.avetime == null || !overview.numofattempts">
+                                        {{ 'addon.mod_lesson.notcompleted' | translate }}
+                                    </p>
+                                </ion-col>
+                            </ion-row>
+                            <ion-row>
+                                <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
+                                    <p *ngIf="overview.highscore != null">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
+                                    </p>
+                                    <p *ngIf="overview.highscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                            <ion-grid class="ion-text-wrap">
-                                <ion-row>
-                                    <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</p>
-                                        <p *ngIf="overview.highscore != null">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
-                                        </p>
-                                        <p *ngIf="overview.highscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
+                                <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</h3>
+                                    <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
+                                    <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
+                            </ion-row>
+                            <ion-row>
+                                <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
+                                    <p *ngIf="overview.lowscore != null">
+                                        {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
+                                    </p>
+                                    <p *ngIf="overview.lowscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
 
-                                    <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</p>
-                                        <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
-                                        <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
-
-                            <ion-grid class="ion-text-wrap">
-                                <ion-row>
-                                    <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</p>
-                                        <p *ngIf="overview.lowscore != null">
-                                            {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
-                                        </p>
-                                        <p *ngIf="overview.lowscore == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-
-                                    <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                        <p class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</p>
-                                        <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
-                                        <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
-                        </div>
+                                <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</h3>
+                                    <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
+                                    <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
+                                </ion-col>
+                            </ion-row>
+                        </ion-grid>
                     </ion-card>
 
                     <!-- List of students that have retakes. -->
                     <ion-card *ngIf="overview">
                         <ion-card-header class="ion-text-wrap">
-                            <ion-card-subtitle>{{ 'addon.mod_lesson.overview' | translate }}</ion-card-subtitle>
+                            <ion-card-title>{{ 'addon.mod_lesson.overview' | translate }}</ion-card-title>
                         </ion-card-header>
 
                         <ion-item class="ion-text-wrap" *ngFor="let student of overview.students" button
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index fc16197fb..a3ad6de00 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -83,13 +83,15 @@
                                 </core-rich-text-editor>
                             </ion-item>
                             <ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
-                                <p class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</p>
-                                <p>
-                                    <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                        [text]="question.useranswer" contextLevel="module"
-                                        [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                    </core-format-text>
-                                </p>
+                                <ion-label>
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</h3>
+                                    <p>
+                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
+                                            [text]="question.useranswer" contextLevel="module"
+                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                        </core-format-text>
+                                    </p>
+                                </ion-label>
                             </ion-item>
                         </ng-container>
 
@@ -126,24 +128,18 @@
                         <!-- Matching. -->
                         <ng-container *ngSwitchCase="'matching'">
                             <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
-                                <ion-grid>
-                                    <ion-row>
-                                        <ion-col>
-                                            <p><core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component"
-                                                [componentId]="lesson?.coursemodule" [text]="row.text" contextLevel="module"
-                                                [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                            </core-format-text></p>
-                                        </ion-col>
-                                        <ion-col>
-                                            <ion-select [id]="row.id" [formControlName]="row.name" interface="action-sheet"
-                                                [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id">
-                                                <ion-select-option *ngFor="let option of row.options" [value]="option.value">
-                                                    {{option.label}}
-                                                </ion-select-option>
-                                            </ion-select>
-                                        </ion-col>
-                                    </ion-row>
-                                </ion-grid>
+                                <ion-label>
+                                    <p><core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component"
+                                        [componentId]="lesson?.coursemodule" [text]="row.text" contextLevel="module"
+                                        [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                    </core-format-text></p>
+                                </ion-label>
+                                <ion-select [id]="row.id" [formControlName]="row.name" interface="action-sheet"
+                                    [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id">
+                                    <ion-select-option *ngFor="let option of row.options" [value]="option.value">
+                                        {{option.label}}
+                                    </ion-select-option>
+                                </ion-select>
                             </ion-item>
                         </ng-container>
                     </ng-container>
@@ -192,7 +188,7 @@
                 </div>
 
                 <ion-card-header class="ion-text-wrap" *ngIf="eolData.gradelesson">
-                    <ion-card-subtitle>{{ 'addon.mod_lesson.congratulations' | translate }}</ion-card-subtitle>
+                    <ion-card-title>{{ 'addon.mod_lesson.congratulations' | translate }}</ion-card-title>
                 </ion-card-header>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.notenoughtimespent" lines="none">
                     <ion-label>{{ eolData.notenoughtimespent.message }}</ion-label>
diff --git a/src/addons/mod/lesson/pages/player/player.scss b/src/addons/mod/lesson/pages/player/player.scss
index 79a950420..8733de161 100644
--- a/src/addons/mod/lesson/pages/player/player.scss
+++ b/src/addons/mod/lesson/pages/player/player.scss
@@ -1,3 +1,11 @@
+:host {
+   --background-odd: var(--gray-lighter);
+}
+
+:host-context(body.dark) {
+   --background-odd: var(--gray-darker);
+}
+
 :host ::ng-deep {
     .addon-mod_lesson-slideshow {
         max-width: 100%;
@@ -5,15 +13,16 @@
         margin: 0 auto;
     }
 
+    .studentanswer {
+        padding-inline-start: 8px;
+    }
+
     table {
         width: 100%;
         margin-top: 1.5rem;
 
         tr:nth-child(odd) {
-            background-color: var(--gray-lighter);
-            // @include darkmode() {
-            //     background-color: $core-dark-item-divider-bg-color;
-            // }
+            background-color: var(--background-odd);
         }
 
         tr:last-child td {
@@ -26,21 +35,4 @@
             border-bottom: 1px solid var(--gray);
         }
     }
-
-    // @todo
-    // .item-ios table {
-    //     @extend .card-ios;
-    //     @include darkmode() {
-    //         color: $white;
-    //         background-color: $core-dark-item-bg-color;
-    //     }
-    // }
-
-    // .item-md table {
-    //     @extend .card-md;
-    //     @include darkmode() {
-    //         color: $white;
-    //         background-color: $core-dark-item-bg-color;
-    //     }
-    // }
 }
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 9649820af..a6fa046c7 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -36,28 +36,32 @@
 
             <!-- Retake stats. -->
             <ion-list *ngIf="retake && retake.userstats && retake.userstats.gradeinfo" class="addon-mod_lesson-userstats">
-                <ion-grid class="ion-text-wrap">
-                    <ion-row>
-                        <ion-col>
-                            <p class="item-heading">{{ 'addon.mod_lesson.grade' | translate }}</p>
-                            <p>{{ 'core.percentagenumber' | translate:{$a: retake.userstats.grade} }}</p>
-                        </ion-col>
+                <ion-item>
+                    <ion-label class="ion-text-wrap">
+                        <ion-grid class="ion-no-padding">
+                            <ion-row>
+                                <ion-col>
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.grade' | translate }}</h3>
+                                    <p>{{ 'core.percentagenumber' | translate:{$a: retake.userstats.grade} }}</p>
+                                </ion-col>
 
-                        <ion-col>
-                            <p class="item-heading">{{ 'addon.mod_lesson.rawgrade' | translate }}</p>
-                            <p>{{ retake.userstats.gradeinfo.earned }} / {{ retake.userstats.gradeinfo.total }}</p>
-                        </ion-col>
-                    </ion-row>
-                </ion-grid>
+                                <ion-col>
+                                    <h3 class="item-heading">{{ 'addon.mod_lesson.rawgrade' | translate }}</h3>
+                                    <p>{{ retake.userstats.gradeinfo.earned }} / {{ retake.userstats.gradeinfo.total }}</p>
+                                </ion-col>
+                            </ion-row>
+                        </ion-grid>
+                    </ion-label>
+                </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <p class="item-heading">{{ 'addon.mod_lesson.timetaken' | translate }}</p>
+                        <h3 class="item-heading">{{ 'addon.mod_lesson.timetaken' | translate }}</h3>
                         <p>{{ timeTakenReadable }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <p class="item-heading">{{ 'addon.mod_lesson.completed' | translate }}</p>
+                        <h3 class="item-heading">{{ 'addon.mod_lesson.completed' | translate }}</h3>
                         <p>{{ retake.userstats.completed * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
@@ -74,11 +78,11 @@
                 <ion-card *ngFor="let page of retake.answerpages" class="addon-mod_lesson-answerpage"
                     [ngClass]="{'text-dimmed': page.grayout}">
                     <ion-card-header class="ion-text-wrap">
-                        <ion-card-subtitle>{{page.qtype}}: {{page.title}}</ion-card-subtitle>
+                        <ion-card-title>{{page.qtype}}: {{page.title}}</ion-card-title>
                     </ion-card-header>
                     <ion-item class="ion-text-wrap" lines="none">
                         <ion-label>
-                            <p class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</p>
+                            <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
                             <p>
                                 <core-format-text [component]="component" [componentId]="lesson?.coursemodule" [maxHeight]="50"
                                     [text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
@@ -89,7 +93,7 @@
                     </ion-item>
                     <ion-item class="ion-text-wrap" lines="none">
                         <ion-label>
-                            <p class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</p>
+                            <h3 class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</h3>
                         </ion-label>
                     </ion-item>
                     <ion-item class="ion-text-wrap" lines="none"
@@ -100,20 +104,24 @@
                     </ion-item>
                     <div *ngIf="page.answerdata && page.answerdata.answers && page.answerdata.answers.length"
                         class="addon-mod_lesson-answer">
-                        <div *ngFor="let answer of page.answerdata.answers">
-                            <ion-grid class="ion-text-wrap" *ngIf="page.isContent">
-                                <!-- Content page, display a button and the content. -->
-                                <ion-row>
-                                    <ion-col>
-                                        <ion-button expand="block" class="ion-text-wrap" color="light" [disabled]="true">{{ answer[0].buttonText }}</ion-button>
-                                    </ion-col>
-                                    <ion-col>
-                                        <p [innerHTML]="answer[0].content"></p>
-                                    </ion-col>
-                                </ion-row>
-                            </ion-grid>
+                        <ng-container *ngFor="let answer of page.answerdata.answers">
+                            <ion-item lines="none" *ngIf="page.isContent">
+                                <ion-label class="ion-text-wrap">
+                                    <ion-grid class="ion-no-padding">
+                                        <!-- Content page, display a button and the content. -->
+                                        <ion-row>
+                                            <ion-col>
+                                                <ion-button expand="block" class="ion-text-wrap" color="light" [disabled]="true">{{ answer[0].buttonText }}</ion-button>
+                                            </ion-col>
+                                            <ion-col>
+                                                <p [innerHTML]="answer[0].content"></p>
+                                            </ion-col>
+                                        </ion-row>
+                                    </ion-grid>
+                                </ion-label>
+                            </ion-item>
 
-                            <div *ngIf="page.isQuestion">
+                            <ng-container *ngIf="page.isQuestion">
                                 <!-- Question page, show the right input for the answer. -->
 
                                 <!-- Truefalse or matching. -->
@@ -152,27 +160,31 @@
                                 </ion-item>
 
                                 <!-- Matching. -->
-                                <ion-grid class="ion-text-wrap" *ngIf="answer[0].isSelect">
-                                    <ion-row>
-                                        <ion-col>
-                                            <p>
-                                                <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                                    [text]=" answer[0].content" contextLevel="module"
-                                                    [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                                </core-format-text>
-                                            </p>
-                                        </ion-col>
-                                        <ion-col>
-                                            <p>{{answer[0].value}}</p>
-                                            <ion-badge *ngIf="answer[1]" color="dark">
-                                                <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
-                                                    [text]="answer[1]" contextLevel="module"
-                                                    [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
-                                                </core-format-text>
-                                            </ion-badge>
-                                        </ion-col>
-                                    </ion-row>
-                                </ion-grid>
+                                <ion-item lines="none" *ngIf="answer[0].isSelect">
+                                    <ion-label class="ion-text-wrap">
+                                        <ion-grid class="ion-no-padding">
+                                            <ion-row>
+                                                <ion-col>
+                                                    <p>
+                                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
+                                                            [text]=" answer[0].content" contextLevel="module"
+                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                                        </core-format-text>
+                                                    </p>
+                                                </ion-col>
+                                                <ion-col>
+                                                    <p>{{answer[0].value}}</p>
+                                                    <ion-badge *ngIf="answer[1]" color="dark">
+                                                        <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
+                                                            [text]="answer[1]" contextLevel="module"
+                                                            [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId">
+                                                        </core-format-text>
+                                                    </ion-badge>
+                                                </ion-col>
+                                            </ion-row>
+                                        </ion-grid>
+                                    </ion-label>
+                                </ion-item>
 
                                 <!-- Essay or couldn't determine. -->
                                 <ion-item class="ion-text-wrap" lines="none"
@@ -192,7 +204,7 @@
                                         </ion-badge>
                                     </ion-label>
                                 </ion-item>
-                            </div>
+                            </ng-container>
 
                             <ion-item class="ion-text-wrap" *ngIf="!page.isContent && !page.isQuestion" lines="none">
                                 <!-- Another page (end of branch, ...). -->
@@ -211,11 +223,11 @@
                                     </ion-badge>
                                 </ion-label>
                             </ion-item>
-                        </div>
+                        </ng-container>
 
                         <ion-item class="ion-text-wrap" *ngIf="page.answerdata.response" lines="none">
                             <ion-label>
-                                <p class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</p>
+                                <h3 class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</h3>
                                 <p>
                                     <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                         [text]="page.answerdata.response" contextLevel="module"
diff --git a/src/core/features/contentlinks/pages/choose-site/choose-site.html b/src/core/features/contentlinks/pages/choose-site/choose-site.html
index 488670d69..0ee63b9e9 100644
--- a/src/core/features/contentlinks/pages/choose-site/choose-site.html
+++ b/src/core/features/contentlinks/pages/choose-site/choose-site.html
@@ -11,7 +11,7 @@
         <ion-list>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <p class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</p>
+                    <h3 class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</h3>
                     <p>{{ url }}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html
index 74738d626..bb9043094 100644
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@@ -95,7 +95,7 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" color="medium" (click)="sectionChanged(previousSection)"
+                <ion-button *ngIf="previousSection" color="light" (click)="sectionChanged(previousSection)"
                     title="{{ 'core.previous' | translate }}">
                     <ion-icon name="fas-chevron-left" slot="icon-only"></ion-icon>
                     <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 5fafd20e2..54dab33ce 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -67,7 +67,7 @@
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <p class="item-heading">{{ 'core.whyisthisrequired' | translate }}</p>
+                    <h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
                     <p>{{ 'core.explanationdigitalminor' | translate }}</p>
                 </ion-label>
             </ion-item>
@@ -225,7 +225,7 @@
         </ion-item-divider>
         <ion-item class="ion-text-wrap" lines="none">
             <ion-label>
-                <p class="item-heading">{{ 'core.considereddigitalminor' | translate }}</p>
+                <h3 class="item-heading">{{ 'core.considereddigitalminor' | translate }}</h3>
                 <p>{{ 'core.digitalminor_desc' | translate }}</p>
                 <p *ngIf="supportName">{{ supportName }}</p>
                 <p *ngIf="supportEmail">{{ supportEmail }}</p>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 7dc22b6cd..be6ee775b 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -33,6 +33,16 @@ ion-item.ion-text-wrap ion-label {
     white-space: normal !important;
 }
 
+// It fixes the click on links where ion-ripple-effect is present.
+.ion-activatable ion-label,
+.item-multiple-items ion-label {
+    z-index: 3;
+    pointer-events: none;
+    ion-anchor, ion-button, a, button {
+        pointer-events: visible;
+    }
+}
+
 
 // Ionic toolbar.
 ion-toolbar ion-back-button,
@@ -372,6 +382,10 @@ ion-toolbar ion-title .core-bar-button-image img {
 }
 
 // Select.
+ion-select::part(text) {
+    white-space: normal;
+}
+
 ion-select.core-button-select,
 .core-button-select {
     --background: var(--core-button-select-background);