diff --git a/src/addons/blog/pages/index/index.html b/src/addons/blog/pages/index/index.html
index a4d847ddc..aa91a5df5 100644
--- a/src/addons/blog/pages/index/index.html
+++ b/src/addons/blog/pages/index/index.html
@@ -41,19 +41,17 @@
                 </h3>
 
                 @if (entry.userid === currentUserId && optionsAvailable) {
-                <div class="core-button-spinner">
-                    <ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
-                        (click)="showEntryActionsPopover($event, entry)">
-                        <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
-                    </ion-button>
-                </div>
+                <ion-button fill="clear" [attr.aria-label]="'core.displayoptions' | translate"
+                    (click)="showEntryActionsPopover($event, entry)" class="entry-options">
+                    <ion-icon slot="icon-only" aria-hidden="true" name="ellipsis-vertical" />
+                </ion-button>
                 }
             </div>
 
             <div class="entry-creation-info flex ion-align-items-center">
-                <span>
+                <div class="entry-avatar">
                     <core-user-avatar [user]="entry.user" [courseId]="entry.courseid" />
-                </span>
+                </div>
 
                 @if (entry.user?.fullname && entry.created) {
                 <span [innerHTML]="'core.bynameondate' | translate: {
@@ -64,15 +62,14 @@
                 }
             </div>
 
-
-            <div class="entry-summary" [ngClass]="{ 'border-bottom': entry.lastmodified <= entry.created }" [collapsible-item]="64">
+            <div class="entry-summary" [collapsible-item]="64">
                 <div class="ion-margin-bottom">
                     <core-format-text [text]="entry.summary" [component]="component" [componentId]="entry.id" [contextLevel]="contextLevel"
                         [contextInstanceId]="contextInstanceId" [courseId]="entry.courseid" />
                 </div>
 
                 @if (tagsEnabled && entry.tags && entry.tags!.length > 0) {
-                <ion-item class="ion-text-wrap">
+                <ion-item class="ion-text-wrap" lines="none">
                     <ion-label>
                         <div slot="start">{{ 'core.tag.tags' | translate }}:</div>
                         <core-tag-list [tags]="entry.tags" />
@@ -85,15 +82,14 @@
                 }
 
                 @if (entry.uniquehash) {
-                <ion-item [href]="entry.uniquehash" core-link [detail]="true">
+                <ion-item [href]="entry.uniquehash" core-link [detail]="true" lines="none">
                     <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
                 </ion-item>
                 }
-
             </div>
 
             @if (entry.lastmodified > entry.created || (entry.userid === currentUserId && entry.publishstate !== 'draft')) {
-            <ion-item class="entry-last-modification">
+            <ion-item class="entry-last-modification" lines="none">
                 @if (entry.lastmodified > entry.created) {
                 <ion-note class="flex ion-align-items-center" slot="start">
                     <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate" />
diff --git a/src/addons/blog/pages/index/index.scss b/src/addons/blog/pages/index/index.scss
index c610046a4..e89eb0b9f 100644
--- a/src/addons/blog/pages/index/index.scss
+++ b/src/addons/blog/pages/index/index.scss
@@ -1,87 +1,68 @@
 @use "theme/globals" as *;
 
 :host {
-
-    ion-card {
-        padding: .5rem 1rem;
-    }
-
     .entry {
         border-bottom: 1px solid var(--stroke);
 
         &-visibility-permission {
             display: flex;
             align-items: center;
-            font-size: 0.875rem;
-            font-weight: 500;
+            font: var(-mdl-typography-label-font-lg);
 
             ion-icon {
-                margin-right: .3rem;
+                @include margin-horizontal(null, .3rem);
             }
         }
 
         &-draft {
-            margin-left: .3rem;
+            @include margin-horizontal(.3rem, null);
+
             position: relative;
             top: 4px;
         }
 
         &-subject {
             core-format-text {
-                font-size: 1.25rem;
-                font-weight: 500;
-            }
-
-            &::part(native) {
-                padding-left: 0;
+                font: var(--mdl-typography-heading4-font);
             }
         }
 
         &-creation-info {
+            .entry-avatar {
+                @include margin(.6rem, .6rem, .6rem, 0px);
+            }
+
             core-user-avatar {
-                --userpicture-padding: .6rem;
-                margin-left: -.5rem;
+                --core-avatar-size: 24px;
             }
         }
 
         &-last-modification {
-            --border-width: 0 0 1px 0;
-
-            &::part(native) {
-                padding: 0;
-            }
+            --padding-end: 0px;
+            --padding-start: 0px;
+            --padding-top: 0px;
+            --padding-bottom: 0px;
 
             ion-note {
                 padding-top: 0.9rem;
-                font-size: 0.875rem;
-                font-weight: 500;
+                font: var(-mdl-typography-label-font-lg);
             }
 
             ion-icon {
-                margin-right: .3rem;
+                @include margin-horizontal(null, .3rem);
             }
         }
     }
 
-    .core-button-spinner {
-        margin-right: -.5rem;
-        align-self: start;
-
-        ion-button::part(native) {
-            --padding-end: 0;
-            --padding-start: 0;
-            --padding-left: 0;
-            --padding-right: 0;
-        }
+    ion-button.entry-options {
+        --padding-end: 0px;
+        --padding-start: 0px;
+        --padding-top: 0px;
+        --padding-bottom: 0px;
     }
 
-    core-comments ::ng-deep {
-        &::part(native) {
-            --padding-start: 0;
-        }
-    }
-
-    .border-bottom {
-        border-bottom: 1px solid var(--stroke);
+    core-comments ::ng-deep ion-item {
+        --inner-border-width: 1px 0px 0px 0px;
+        --padding-start: 0px;
     }
 }
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index fa30ad311..de97418eb 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -16,6 +16,8 @@
         height: var(--core-avatar-size);
         max-width: var(--core-avatar-size);
         max-height: var(--core-avatar-size);
+        min-width: var(--core-avatar-size);
+        min-height: var(--core-avatar-size);
         padding: var(--userpicture-padding);
         &[alt] {
             text-indent: -999999px;
@@ -79,8 +81,8 @@
         font-weight: normal;
         width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
         height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
-        min-height: 0px;
-        min-width: 0px;
+        min-width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
+        min-height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
         font-size: calc(var(--core-avatar-size)*0.3);
         margin: var(--userpicture-padding);
 
@@ -106,8 +108,4 @@
 
 :host-context(ion-item) {
     @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
-    img {
-        min-width: var(--core-avatar-size);
-        min-height: var(--core-avatar-size);
-    }
 }