diff --git a/course/templates/activity_info.mustache b/course/templates/activity_info.mustache
index f415d2a4cf6..ecf9f074f49 100644
--- a/course/templates/activity_info.mustache
+++ b/course/templates/activity_info.mustache
@@ -50,16 +50,10 @@
     }
 }}
 <div data-region="activity-information" data-activityname="{{activityname}}" class="activity-information">
-    {{#hasdates}}
-    <div data-region="activity-dates" class="mb-1">
-        {{#activitydates}}
-            {{>core_course/activity_date}}
-        {{/activitydates}}
-    </div>
-    {{/hasdates}}
+
     {{#hascompletion}}
         {{#uservisible}}
-            <div data-region="completion-info">
+            <div class="completion-info" data-region="completion-info">
                 {{#isautomatic}}
                     <div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
                         {{#completiondetails}}
@@ -75,4 +69,14 @@
             </div>
         {{/uservisible}}
     {{/hascompletion}}
+
+    {{#hasdates}}
+    <div data-region="activity-dates" class="activity-dates small">
+        <div class="description-inner">
+            {{#activitydates}}
+                {{>core_course/activity_date}}
+            {{/activitydates}}
+        </div>
+    </div>
+    {{/hasdates}}
 </div>
diff --git a/lib/templates/activity_header.mustache b/lib/templates/activity_header.mustache
index f26224b9508..60417a265c0 100644
--- a/lib/templates/activity_header.mustache
+++ b/lib/templates/activity_header.mustache
@@ -70,15 +70,17 @@
 {{#title}}
     <h2>{{{title}}}</h2>
 {{/title}}
-{{#completion}}
-    <span class="sr-only">{{#str}} overallaggregation, completion {{/str}}</span>
-    {{{completion}}}
-{{/completion}}
-{{#description}}
-    <div class="box py-3 generalbox" id="intro">
-    {{{description}}}
-    </div>
-{{/description}}
+<div class="activity-header">
+    {{#completion}}
+        <span class="sr-only">{{#str}} overallaggregation, completion {{/str}}</span>
+        {{{completion}}}
+    {{/completion}}
+    {{#description}}
+        <div class="activity-description small" id="intro">
+            {{{description}}}
+        </div>
+    {{/description}}
+</div>
 {{#additional_items}}
     <nav aria-label="{{#str}} additionalcustomnav, core {{/str}}">
         {{> core/url_select}}
diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss
index f19f9b9bcb5..02ab2dc7cda 100644
--- a/theme/boost/scss/moodle/layout.scss
+++ b/theme/boost/scss/moodle/layout.scss
@@ -52,6 +52,10 @@
         padding-left: 15px;
         padding-right: 15px;
     }
+    .activity-header {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
 }
 
 @include media-breakpoint-up(md) {
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 49e459c9612..33e873e4dbb 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -10,11 +10,64 @@ select {
 }
 
 .path-mod {
-    div.activity-information {
-        border-bottom: $border-width solid $table-border-color;
-        padding-top: map-get($spacers, 2);
+    .activity-header {
+        background-color: $gray-100;
+        margin-bottom: map-get($spacers, 3);
+        padding-left: map-get($spacers, 3);
+        padding-right: map-get($spacers, 3);
+
+        @include border-radius();
+
+        & > div:last-child > div:last-child {
+            border-bottom: 0;
+        }
+    }
+    .activity-information {
+
+        .activity-dates {
+            padding-top: map-get($spacers, 3);
+            padding-bottom: map-get($spacers, 3);
+            border-bottom: $border-width solid $border-color;
+        }
+        .completion-info {
+            padding-top: map-get($spacers, 3);
+            padding-bottom: map-get($spacers, 3);
+            border-bottom: $border-width solid $border-color;
+        }
+    }
+    .activity-description {
+        padding-top: map-get($spacers, 3);
         padding-bottom: map-get($spacers, 3);
-        margin-bottom: map-get($spacers, 2);
+        & > .box.py-3 {
+            padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+            padding-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
+        }
+        & > .box.py-3:empty {
+            display: none;
+        }
+    }
+    .automatic-completion-conditions .badge {
+        font-size: 80%;
+        padding: map-get($spacers, 2);
+        margin-top: map-get($spacers, 1);
+        mix-blend-mode: multiply;
+        &.badge-light {
+            background-color: $gray-200 !important; /* stylelint-disable-line declaration-no-important */
+        }
+
+        .icon {
+            width: 0.7rem;
+            height: 0.7rem;
+            font-size: 0.7rem;
+        }
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+    .activity-description .no-overflow p:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 9a03cf6238a..a4fd0c2984f 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -17581,11 +17581,54 @@ textarea[data-auto-rows] {
 select {
   width: auto; }
 
-.path-mod div.activity-information {
-  border-bottom: 1px solid #dee2e6;
-  padding-top: 0.5rem;
+.path-mod .activity-header {
+  background-color: #f8f9fa;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 0.5rem; }
+  .path-mod .activity-header > div:last-child > div:last-child {
+    border-bottom: 0; }
+
+.path-mod .activity-information .activity-dates {
+  padding-top: 1rem;
   padding-bottom: 1rem;
-  margin-bottom: 0.5rem; }
+  border-bottom: 1px solid #dee2e6; }
+
+.path-mod .activity-information .completion-info {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #dee2e6; }
+
+.path-mod .activity-description {
+  padding-top: 1rem;
+  padding-bottom: 1rem; }
+  .path-mod .activity-description > .box.py-3 {
+    padding-top: 0 !important;
+    /* stylelint-disable-line declaration-no-important */
+    padding-bottom: 0 !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .path-mod .activity-description > .box.py-3:empty {
+    display: none; }
+
+.path-mod .automatic-completion-conditions .badge {
+  font-size: 80%;
+  padding: 0.5rem;
+  margin-top: 0.25rem;
+  mix-blend-mode: multiply; }
+  .path-mod .automatic-completion-conditions .badge.badge-light {
+    background-color: #e9ecef !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .path-mod .automatic-completion-conditions .badge .icon {
+    width: 0.7rem;
+    height: 0.7rem;
+    font-size: 0.7rem; }
+  .path-mod .automatic-completion-conditions .badge:first-child {
+    margin-top: 0; }
+
+.path-mod .activity-description .no-overflow p:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0; }
 
 .path-mod-choice .horizontal .choices .option {
   display: inline-block; }
@@ -20212,6 +20255,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   #page.drawers div[role="main"] {
     padding-left: 15px;
     padding-right: 15px; }
+  #page.drawers .activity-header {
+    margin-left: 15px;
+    margin-right: 15px; }
 
 @media (min-width: 768px) {
   .pagelayout-standard #page.drawers .main-inner,
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index c11d069c099..242b811e5da 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -17581,11 +17581,54 @@ textarea[data-auto-rows] {
 select {
   width: auto; }
 
-.path-mod div.activity-information {
-  border-bottom: 1px solid #dee2e6;
-  padding-top: 0.5rem;
+.path-mod .activity-header {
+  background-color: #f8f9fa;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 0.25rem; }
+  .path-mod .activity-header > div:last-child > div:last-child {
+    border-bottom: 0; }
+
+.path-mod .activity-information .activity-dates {
+  padding-top: 1rem;
   padding-bottom: 1rem;
-  margin-bottom: 0.5rem; }
+  border-bottom: 1px solid #dee2e6; }
+
+.path-mod .activity-information .completion-info {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #dee2e6; }
+
+.path-mod .activity-description {
+  padding-top: 1rem;
+  padding-bottom: 1rem; }
+  .path-mod .activity-description > .box.py-3 {
+    padding-top: 0 !important;
+    /* stylelint-disable-line declaration-no-important */
+    padding-bottom: 0 !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .path-mod .activity-description > .box.py-3:empty {
+    display: none; }
+
+.path-mod .automatic-completion-conditions .badge {
+  font-size: 80%;
+  padding: 0.5rem;
+  margin-top: 0.25rem;
+  mix-blend-mode: multiply; }
+  .path-mod .automatic-completion-conditions .badge.badge-light {
+    background-color: #e9ecef !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .path-mod .automatic-completion-conditions .badge .icon {
+    width: 0.7rem;
+    height: 0.7rem;
+    font-size: 0.7rem; }
+  .path-mod .automatic-completion-conditions .badge:first-child {
+    margin-top: 0; }
+
+.path-mod .activity-description .no-overflow p:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0; }
 
 .path-mod-choice .horizontal .choices .option {
   display: inline-block; }
@@ -20158,6 +20201,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   #page.drawers div[role="main"] {
     padding-left: 15px;
     padding-right: 15px; }
+  #page.drawers .activity-header {
+    margin-left: 15px;
+    margin-right: 15px; }
 
 @media (min-width: 768px) {
   .pagelayout-standard #page.drawers .main-inner,