diff --git a/src/addon/badges/pages/issued-badge/issued-badge.html b/src/addon/badges/pages/issued-badge/issued-badge.html
index 656d54114..e28898229 100644
--- a/src/addon/badges/pages/issued-badge/issued-badge.html
+++ b/src/addon/badges/pages/issued-badge/issued-badge.html
@@ -9,79 +9,79 @@
     </ion-refresher>
     <core-loading [hideUntil]="badgeLoaded">
 
-        <div class="list">
-            <div class="item item-text-wrap item-avatar-center">
-                <img *ngIf="badge.badgeurl" class="avatar" src="{{badge.badgeurl}}" core-external-content alt="{{badge.name}}" role="presentation">
-                <span *ngIf="badge.dateexpire && currentTime >= badge.dateexpire" class="badge badge-assertive">
-                        {{ 'addon.badges.expired' | translate }}
-                </span>
-            </div>
-        </div>
+        <ion-item-group>
+            <ion-item text-wrap class="item-avatar-center">
+                <img *ngIf="badge.badgeurl" class="avatar" [src]="badge.badgeurl" core-external-content [alt]="badge.name">
+                <ion-badge color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
+                    {{ 'addon.badges.expired' | translate }}
+                </ion-badge>
+            </ion-item>
+        </ion-item-group>
 
-        <div class="list" *ngIf="user.fullname">
-            <div class="item item-divider">
+        <ion-item-group *ngIf="user.fullname">
+            <ion-item-divider color="light">
                 <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
-            </div>
-            <div class="item">
-                <p class="item-heading">{{ 'core.name' | translate}}</p>
+            </ion-item-divider>
+            <ion-item text-wrap>
+                <h2>{{ 'core.name' | translate}}</h2>
                 <p>
-                    <core-format-text watch="true" clean="true" [text]="user.fullname"></core-format-text>
+                    <core-format-text clean="true" [text]="user.fullname"></core-format-text>
                 </p>
-            </div>
-        </div>
+            </ion-item>
+        </ion-item-group>
 
-        <div class="list">
-            <div class="item item-divider">
+        <ion-item-group>
+            <ion-item-divider color="light">
                 <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
-            </div>
-            <div class="item" *ngIf="badge.issuername">
-                <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
+            </ion-item-divider>
+            <ion-item text-wrap *ngIf="badge.issuername">
+                <h2>{{ 'addon.badges.issuername' | translate}}</h2>
                 <p>
-                    <core-format-text watch="true" clean="true" [text]="badge.issuername"></core-format-text>
+                    <core-format-text clean="true" [text]="badge.issuername"></core-format-text>
                 </p>
-            </div>
-            <div class="item" *ngIf="badge.issuercontact">
-                <p class="item-heading">{{ 'addon.badges.contact' | translate}}</p>
+            </ion-item>
+            <ion-item text-wrap *ngIf="badge.issuercontact">
+                <h2>{{ 'addon.badges.contact' | translate}}</h2>
                 <p>
-                    <core-format-text watch="true" clean="true" [text]="badge.issuercontact"></core-format-text>
+                    <core-format-text clean="true" [text]="badge.issuercontact"></core-format-text>
                 </p>
-            </div>
-        </div>
+            </ion-item>
+        </ion-item-group>
 
-        <div class="list">
-            <div class="item item-divider">
+        <ion-item-group>
+            <ion-item-divider color="light">
                 <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
-            </div>
-            <div class="item" *ngIf="badge.name">
-                <p class="item-heading">{{ 'core.name' | translate}}</p>
+            </ion-item-divider>
+            <ion-item text-wrap *ngIf="badge.name">
+                <h2>{{ 'core.name' | translate}}</h2>
                 <p>{{badge.name}}</p>
-            </div>
-            <div class="item item-text-wrap" *ngIf="badge.description">
-                <p class="item-heading">{{ 'core.description' | translate}}</p>
+            </ion-item>
+            <ion-item text-wrap *ngIf="badge.description">
+                <h2>{{ 'core.description' | translate}}</h2>
                 <p>
-                    <core-format-text watch="true" clean="true" [text]="badge.description"></core-format-text>
+                    <core-format-text clean="true" [text]="badge.description"></core-format-text>
                 </p>
-            </div>
-            <div class="item item-text-wrap" *ngIf="course.fullname">
-                <p class="item-heading">{{ 'core.course' | translate}}</p>
+            </ion-item>
+            <ion-item text-wrap *ngIf="course.fullname">
+                <h2>{{ 'core.course' | translate}}</h2>
                 <p>
-                    <core-format-text watch="true" clean="true" [text]="course.fullname"></core-format-text>
+                    <core-format-text clean="true" [text]="course.fullname"></core-format-text>
                 </p>
-            </div>
-        </div>
+            </ion-item>
+        </ion-item-group>
 
-        <div class="list">
-            <div class="item item-divider">
+        <ion-item-group>
+            <ion-item-divider color="light">
                 <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
-            </div>
-            <div class="item" *ngIf="badge.dateissued">
-                <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
+            </ion-item-divider>
+            <ion-item text-wrap *ngIf="badge.dateissued">
+                <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
                 <p>{{badge.dateissued | coreToLocaleString }}</p>
-            </div>
-            <div class="item item-text-wrap" *ngIf="badge.dateexpire">
-                <p class="item-heading">{{ 'addon.badges.expirydate' | translate}}</p>
+            </ion-item>
+            <ion-item text-wrap *ngIf="badge.dateexpire">
+                <h2>{{ 'addon.badges.expirydate' | translate}}</h2>
                 <p>{{badge.dateexpire | coreToLocaleString }}</p>
-            </div>
-        </div>
+            </ion-item>
+        </ion-item-group>
     </core-loading>
 </ion-content>
diff --git a/src/addon/badges/pages/user-badges/user-badges.html b/src/addon/badges/pages/user-badges/user-badges.html
index 58c3b5d82..9768f7901 100644
--- a/src/addon/badges/pages/user-badges/user-badges.html
+++ b/src/addon/badges/pages/user-badges/user-badges.html
@@ -14,15 +14,16 @@
 
             <ion-list *ngIf="badges && badges.length" no-margin>
                 <a ion-item text-wrap *ngFor="let badge of badges" [title]="badge.name" (click)="loadIssuedBadge(badge.uniquehash)" [class.core-split-item-selected]="badge.uniquehash == badgeHash">
-                    <img src="{{badge.badgeurl}}" alt="{{badge.name}}" item-start core-external-content>
-                    <span *ngIf="badge.dateexpire && currentTime >= badge.dateexpire" class="badge badge-assertive">
-                        {{ 'addon.badges.expired' | translate }}
-                    </span>
+                    <ion-avatar item-start>
+                        <img [src]="badge.badgeurl" [alt]="badge.name" item-start core-external-content>
+                    </ion-avatar>
                     <h2><core-format-text [text]="badge.name"></core-format-text></h2>
                     <p>{{ badge.dateissued | coreToLocaleString }}</p>
+                    <ion-badge item-end color="danger" *ngIf="badge.dateexpire && currentTime >= badge.dateexpire">
+                        {{ 'addon.badges.expired' | translate }}
+                    </ion-badge>
                 </a>
             </ion-list>
-
         </core-loading>
     </ion-content>
 </core-split-view>
\ No newline at end of file