diff --git a/public/course/templates/activity_date.mustache b/public/course/templates/activity_date.mustache
index 9a8aabadd5c..a1241b1847d 100644
--- a/public/course/templates/activity_date.mustache
+++ b/public/course/templates/activity_date.mustache
@@ -25,6 +25,6 @@
         "datestring": "6 April 2021, 6:46 PM"
     }
 }}
-<div>
-    <strong>{{label}}</strong> {{{datestring}}}
+<div class="date-item">
+    <span class="date-item-label">{{label}}</span> {{{datestring}}}
 </div>
diff --git a/public/course/templates/activity_info.mustache b/public/course/templates/activity_info.mustache
index 37d65f213ae..e3a553ed7cc 100644
--- a/public/course/templates/activity_info.mustache
+++ b/public/course/templates/activity_info.mustache
@@ -50,24 +50,6 @@
     }
 }}
 <div data-region="activity-information" data-activityname="{{activityname}}" class="activity-information">
-
-    {{#hascompletion}}
-        {{#uservisible}}
-            {{#isautomatic}}
-                <div class="completion-info" data-region="completion-info">
-                    <div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
-                        <div class="automatic-completion-title"><strong>{{#str}}completionrequirements, core_completion{{/str}}</strong></div>
-                        <ul class="activity-completion-list">
-                            {{#completiondetails}}
-                                {{> core_course/completion_automatic }}
-                            {{/completiondetails}}
-                        </ul>
-                    </div>
-                </div>
-            {{/isautomatic}}
-        {{/uservisible}}
-    {{/hascompletion}}
-
     {{#hasdates}}
     <div data-region="activity-dates" class="activity-dates">
         {{#activitydates}}
@@ -75,4 +57,28 @@
         {{/activitydates}}
     </div>
     {{/hasdates}}
+
+    <div data-region="activity-details" class="activity-details">
+        {{#description}}
+            <div class="activity-description" id="intro">
+                {{{description}}}
+            </div>
+        {{/description}}
+        {{#hascompletion}}
+            {{#uservisible}}
+                {{#isautomatic}}
+                    <div class="completion-info" data-region="completion-info">
+                        <div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
+                            <div class="automatic-completion-title"><strong>{{#str}}completionrequirements, core_completion{{/str}}</strong></div>
+                            <ul class="activity-completion-list">
+                                {{#completiondetails}}
+                                    {{> core_course/completion_automatic }}
+                                {{/completiondetails}}
+                            </ul>
+                        </div>
+                    </div>
+                {{/isautomatic}}
+            {{/uservisible}}
+        {{/hascompletion}}
+    </div>
 </div>
diff --git a/public/lib/classes/output/activity_header.php b/public/lib/classes/output/activity_header.php
index 9b1abe0aa70..78fcdaff7ec 100644
--- a/public/lib/classes/output/activity_header.php
+++ b/public/lib/classes/output/activity_header.php
@@ -197,6 +197,7 @@ class activity_header implements renderable, templatable {
             $activitydates = new \core_course\output\activity_dates($activitydates);
             $activitydatesdata = (array) $activitydates->export_for_template($output);
             $data = array_merge($activitycompletiondata, $activitydatesdata);
+            $data['description'] = $this->description;
 
             if (
                 !empty($data)
diff --git a/public/lib/templates/activity_header.mustache b/public/lib/templates/activity_header.mustache
index 4d77a9ea2ee..73823b048be 100644
--- a/public/lib/templates/activity_header.mustache
+++ b/public/lib/templates/activity_header.mustache
@@ -71,11 +71,7 @@
     <h2>{{{title}}}</h2>
 {{/title}}
 <div class="activity-header" data-for="page-activity-header">{{!
-    }}{{#description}}
-        <div class="activity-description" id="intro">
-            {{{description}}}
-        </div>
-    {{/description}}
+    }}
     {{#completion}}
         {{{completion}}}
     {{/completion}}
diff --git a/public/theme/boost/scss/moodle/course.scss b/public/theme/boost/scss/moodle/course.scss
index f50bc9413c7..29bdefa00b5 100644
--- a/public/theme/boost/scss/moodle/course.scss
+++ b/public/theme/boost/scss/moodle/course.scss
@@ -331,6 +331,10 @@ $divider-hover-color: $primary !default;
         @include media-breakpoint-down(sm) {
             margin-top: map-get($spacers, 2);
         }
+        .date-item-label {
+            font-weight: 600;
+            margin-right: map-get($spacers, 1);
+        }
     }
     .activity-name-area {
         grid-area: name;
diff --git a/public/theme/boost/scss/moodle/modules.scss b/public/theme/boost/scss/moodle/modules.scss
index e2a3c239471..0bcdacb06ec 100644
--- a/public/theme/boost/scss/moodle/modules.scss
+++ b/public/theme/boost/scss/moodle/modules.scss
@@ -10,7 +10,11 @@ select {
 }
 
 .path-mod {
-    .activity-header:not(:empty) {
+    .activity-header {
+        max-width: $course-content-maxwidth;
+        margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
+    }
+    .activity-details:not(:empty) {
         background-color: $gray-100;
         margin-bottom: map-get($spacers, 3);
         padding-left: map-get($spacers, 3);
@@ -22,17 +26,34 @@ select {
             border-bottom: 0;
         }
     }
-    .activity-information {
+    .activity-dates {
+        padding-top: map-get($spacers, 2);
+        padding-bottom: map-get($spacers, 3);
+        display: grid;
+        grid-template-columns: 1fr 1fr; // Creates two equal columns
+        gap: map-get($spacers, 2) map-get($spacers, 4); // Vertical and horizontal spacing
+        width: 100%;
+        align-items: center;
+        .date-item {
+            color: $gray-700;
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
 
-        .activity-dates {
-            padding-top: map-get($spacers, 3);
-            padding-bottom: map-get($spacers, 3);
-            border-bottom: $border-width solid $border-color;
+            &:not(:last-child)::after {
+                display: none;
+            }
+
+            .date-item-label {
+                font-weight: 600;
+                margin-right: map-get($spacers, 1);
+            }
         }
+    }
+    .activity-details {
         .completion-info {
             padding-top: map-get($spacers, 2);
             padding-bottom: map-get($spacers, 2);
-            border-bottom: $border-width solid $border-color;
         }
     }
     .activity-description {
@@ -127,6 +148,12 @@ select {
     }
 }
 
+@media (max-width: 767px) {
+    .path-mod .activity-dates {
+        grid-template-columns: 1fr; // Stack them on small screens
+    }
+}
+
 // Choice module
 
 .path-mod-choice {
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index db180b4e3c4..90bd668e584 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -30721,6 +30721,10 @@ body:not(.editing) .activity-item {
     margin-top: 0.5rem;
   }
 }
+.activity-item .activity-dates .date-item-label {
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
 .activity-item .activity-name-area {
   grid-area: name;
 }
@@ -35616,25 +35620,45 @@ select {
   width: auto;
 }
 
-.path-mod .activity-header:not(:empty) {
+.path-mod .activity-header {
+  max-width: 830px;
+  margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
+}
+.path-mod .activity-details:not(:empty) {
   background-color: #f8f9fa;
   margin-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
   border-radius: 0.5rem;
 }
-.path-mod .activity-header:not(:empty) > div:last-child > div:last-child {
+.path-mod .activity-details:not(:empty) > div:last-child > div:last-child {
   border-bottom: 0;
 }
-.path-mod .activity-information .activity-dates {
-  padding-top: 1rem;
+.path-mod .activity-dates {
+  padding-top: 0.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #dee2e6;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem 1.5rem;
+  width: 100%;
+  align-items: center;
 }
-.path-mod .activity-information .completion-info {
+.path-mod .activity-dates .date-item {
+  color: #495057;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.path-mod .activity-dates .date-item:not(:last-child)::after {
+  display: none;
+}
+.path-mod .activity-dates .date-item .date-item-label {
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
+.path-mod .activity-details .completion-info {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid #dee2e6;
 }
 .path-mod .activity-description {
   padding-top: 1rem;
@@ -35712,6 +35736,11 @@ select {
   margin-right: 0.25rem;
 }
 
+@media (max-width: 767px) {
+  .path-mod .activity-dates {
+    grid-template-columns: 1fr;
+  }
+}
 .path-mod-choice .horizontal .choices .option {
   display: inline-block;
 }
diff --git a/public/theme/classic/scss/classic/course.scss b/public/theme/classic/scss/classic/course.scss
index c587f17734c..8f423de8eb3 100644
--- a/public/theme/classic/scss/classic/course.scss
+++ b/public/theme/classic/scss/classic/course.scss
@@ -55,3 +55,15 @@
     align-items: center;
     gap: 20px;
 }
+
+.path-mod {
+    .activity-header {
+        max-width: initial;
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, "xl")) {
+    .path-mod .activity-dates {
+        grid-template-columns: 1fr; // Stack them on small screens
+    }
+}
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index c2bb24285b3..88673695967 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -30721,6 +30721,10 @@ body:not(.editing) .activity-item {
     margin-top: 0.5rem;
   }
 }
+.activity-item .activity-dates .date-item-label {
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
 .activity-item .activity-name-area {
   grid-area: name;
 }
@@ -35616,25 +35620,45 @@ select {
   width: auto;
 }
 
-.path-mod .activity-header:not(:empty) {
+.path-mod .activity-header {
+  max-width: 830px;
+  margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
+}
+.path-mod .activity-details:not(:empty) {
   background-color: #f8f9fa;
   margin-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
   border-radius: 0.375rem;
 }
-.path-mod .activity-header:not(:empty) > div:last-child > div:last-child {
+.path-mod .activity-details:not(:empty) > div:last-child > div:last-child {
   border-bottom: 0;
 }
-.path-mod .activity-information .activity-dates {
-  padding-top: 1rem;
+.path-mod .activity-dates {
+  padding-top: 0.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid #dee2e6;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem 1.5rem;
+  width: 100%;
+  align-items: center;
 }
-.path-mod .activity-information .completion-info {
+.path-mod .activity-dates .date-item {
+  color: #495057;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.path-mod .activity-dates .date-item:not(:last-child)::after {
+  display: none;
+}
+.path-mod .activity-dates .date-item .date-item-label {
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
+.path-mod .activity-details .completion-info {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid #dee2e6;
 }
 .path-mod .activity-description {
   padding-top: 1rem;
@@ -35712,6 +35736,11 @@ select {
   margin-right: 0.25rem;
 }
 
+@media (max-width: 767px) {
+  .path-mod .activity-dates {
+    grid-template-columns: 1fr;
+  }
+}
 .path-mod-choice .horizontal .choices .option {
   display: inline-block;
 }