diff --git a/blocks/timeline/styles.css b/blocks/timeline/styles.css
index 9128004e2ba..6e9ce7c6628 100644
--- a/blocks/timeline/styles.css
+++ b/blocks/timeline/styles.css
@@ -16,11 +16,6 @@
 #block-region-side-pre .block_timeline h6.event-action a.btn {
     width: auto;
 }
-/* Override the width/height of the .activityiconcontainer class in the timeline block. */
-.block_timeline .activityiconcontainer {
-    width: 40px;
-    height: 40px;
-}
 
 .block_timeline .timeline-action-button {
     margin-left: auto;
diff --git a/blocks/timeline/templates/event-list-item.mustache b/blocks/timeline/templates/event-list-item.mustache
index 943c65d89c4..46b3f8fc0f8 100644
--- a/blocks/timeline/templates/event-list-item.mustache
+++ b/blocks/timeline/templates/event-list-item.mustache
@@ -53,7 +53,7 @@
             <small class="text-right text-nowrap align-self-center ml-1">
                 {{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
             </small>
-            <div class="activityiconcontainer {{purpose}} courseicon align-self-top align-self-center mx-3  mb-1 mb-sm-0 text-nowrap">
+            <div class="activityiconcontainer small {{purpose}} courseicon align-self-top align-self-center mx-3  mb-1 mb-sm-0 text-nowrap">
                 {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
             </div>
             <div class="event-name-container flex-grow-1 line-height-3 nowrap text-truncate">
diff --git a/calendar/templates/upcoming_mini.mustache b/calendar/templates/upcoming_mini.mustache
index c95287773c7..6838eae1d55 100644
--- a/calendar/templates/upcoming_mini.mustache
+++ b/calendar/templates/upcoming_mini.mustache
@@ -40,19 +40,25 @@
     {{> core/overlay_loading}}
     {{#events}}
         <div{{!
-            }} class="event"{{!
+            }} class="event d-flex border-bottom pt-2 pb-3"{{!
             }} data-eventtype-{{normalisedeventtype}}="1"{{!
             }} data-region="event-item"{{!
         }}>
-            <span>{{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}</span>
-            <a{{!
-                }} data-type="event"{{!
-                }} data-action="view-event"{{!
-                }} data-event-id="{{id}}"{{!
-                }} href="{{viewurl}}"{{!
-            }}>{{{name}}}</a>
-            <div class="date">{{{formattedtime}}}</div>
-            <hr>
+            <div class="activityiconcontainer small {{{purpose}}} courseicon mr-3">
+                {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
+            </div>
+            <div class="overflow-auto">
+                <h6 class="d-flex mb-1">
+                    <a{{!
+                        }} class="text-truncate"{{!
+                        }} data-type="event"{{!
+                        }} data-action="view-event"{{!
+                        }} data-event-id="{{id}}"{{!
+                        }} href="{{viewurl}}"{{!
+                    }}>{{{name}}}</a>
+                </h6>
+                <div class="date small">{{{formattedtime}}}</div>
+            </div>
         </div>
     {{/events}}
     {{^events}}
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index ba1dc00d3ac..b3999bfc9bb 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -244,7 +244,6 @@ $card-gutter : $card-deck-margin * 2;
     }
 }
 
-
 .block_recentlyaccessedcourses {
     .paging-bar-container {
         margin-top: -2.4rem;
diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
index 8e8f0bb1b79..17bf8fe0cae 100644
--- a/theme/boost/scss/moodle/icons.scss
+++ b/theme/boost/scss/moodle/icons.scss
@@ -140,6 +140,10 @@ $iconsizes: map-merge((
         height: 24px;
         width: 24px;
     }
+    &.small {
+        width: $activity-iconcontainer-width - 10px;
+        height: $activity-iconcontainer-height - 10px;
+    }
 }
 
 @each $type, $value in $activity-icon-colors {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 62cf20c7aea..bdedfb9386e 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12359,6 +12359,9 @@ body.dragging .dragging {
     margin: 0;
     height: 24px;
     width: 24px; }
+  .activityiconcontainer.small {
+    width: 40px;
+    height: 40px; }
 
 .activityiconcontainer.administration {
   background-color: #5d63f6; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 188efd99834..8280e2b68a6 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12359,6 +12359,9 @@ body.dragging .dragging {
     margin: 0;
     height: 24px;
     width: 24px; }
+  .activityiconcontainer.small {
+    width: 40px;
+    height: 40px; }
 
 .activityiconcontainer.administration {
   background-color: #5d63f6; }