diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache
index 00e2c6e21cb..7fcaecff643 100644
--- a/course/format/templates/local/content/addsection.mustache
+++ b/course/format/templates/local/content/addsection.mustache
@@ -36,7 +36,7 @@
     }
 }}
 {{#showaddsection}}
-<div id="changenumsections" class="mdl-right">
+<div id="changenumsections" class="mdl-left">
     {{#increase}}
     <a href="{{{url}}}" class="increase-sections">
         {{#pix}}t/switch_plus, moodle, {{#str}} increasesections, moodle {{/str}}{{/pix}}
diff --git a/course/renderer.php b/course/renderer.php
index 6ad2d8cc12e..baded6fb91f 100644
--- a/course/renderer.php
+++ b/course/renderer.php
@@ -287,23 +287,11 @@ class core_course_renderer extends plugin_renderer_base {
             return '';
         }
 
-        $straddeither = get_string('addresourceoractivity');
-
-        $ajaxcontrol = html_writer::start_tag('div', array('class' => 'mdl-right'));
-        $ajaxcontrol .= html_writer::start_tag('div', array('class' => 'section-modchooser'));
-
-        $icon = $this->output->pix_icon('t/add', '');
-        $span = html_writer::tag('span', $straddeither, array('class' => 'section-modchooser-text'));
-
-        $ajaxcontrol .= html_writer::tag('button', $icon . $span, [
-            'class' => 'section-modchooser-link btn btn-link',
-            'data-action' => 'open-chooser',
-            'data-sectionid' => $section,
-            'data-sectionreturnid' => $sectionreturn,
-        ]);
-
-        $ajaxcontrol .= html_writer::end_tag('div');
-        $ajaxcontrol .= html_writer::end_tag('div');
+        $data = [
+            'sectionid' => $section,
+            'sectionreturn' => $sectionreturn
+        ];
+        $ajaxcontrol = $this->render_from_template('course/activitychooserbutton', $data);
 
         // Load the JS for the modal.
         $this->course_activitychooser($course->id);
diff --git a/course/templates/activitychooserbutton.mustache b/course/templates/activitychooserbutton.mustache
new file mode 100644
index 00000000000..a3a93bed639
--- /dev/null
+++ b/course/templates/activitychooserbutton.mustache
@@ -0,0 +1,38 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_course/activitychooserbutton
+
+    Displays a add activity or resource button.
+
+    Context variables required for this template:
+    * sectionid - Relative section number (field course_sections.section).
+    * sectionreturn - The section to link back to.
+
+    Example context (json):
+    {
+        "sectionid": 1,
+        "sectionreturn": 0
+    }
+}}
+<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add d-flex align-items-center px-3 py-2 mb-3"
+     data-action="open-chooser" data-sectionid="{{sectionid}}" data-sectionreturnid="{{sectionreturn}}">
+    <span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-2">
+        {{#pix}} t/add, core {{/pix}}
+    </span>
+    {{#str}}addresourceoractivity, core{{/str}}
+</button>
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 721b1e1310e..16867438b3a 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1253,3 +1253,25 @@ span.editinstructions {
         font-size: 100%;
     }
 }
+
+$activity-item-background: theme-color-level('primary', -12) !default;
+$activity-item-border: theme-color-level('primary', -2) !default;
+$activity-item-color: $body-color;
+$activity-item-hover: theme-color-level('primary', -10) !default;
+.activity-add {
+    @if $enable-rounded {
+        @include border-radius($card-border-radius);
+    }
+    @include alert-variant($activity-item-background, $activity-item-border, $activity-item-border);
+    border-width: $border-width;
+    border-style: dashed;
+    .pluscontainer {
+        border: $border-width solid $activity-item-border;
+    }
+    &:hover {
+        cursor: pointer;
+        background-color: $activity-item-hover;
+    }
+    width: 100%;
+    border-radius: 4px;
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index feaa304dea4..566f1e6f1af 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -14548,6 +14548,24 @@ span.editinstructions {
 .automatic-completion-conditions .badge {
   font-size: 100%; }
 
+.activity-add {
+  color: #3586ce;
+  background-color: #f5f9fd;
+  border-color: #3586ce;
+  border-width: 1px;
+  border-style: dashed;
+  width: 100%;
+  border-radius: 4px; }
+  .activity-add hr {
+    border-top-color: #2e79bc; }
+  .activity-add .alert-link {
+    color: #296ca7; }
+  .activity-add .pluscontainer {
+    border: 1px solid #3586ce; }
+  .activity-add:hover {
+    cursor: pointer;
+    background-color: #cfe2f3; }
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 70px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d36bcb7ae4d..e57d9d20e3f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -14548,6 +14548,25 @@ span.editinstructions {
 .automatic-completion-conditions .badge {
   font-size: 100%; }
 
+.activity-add {
+  border-radius: 0.25rem;
+  color: #3586ce;
+  background-color: #f5f9fd;
+  border-color: #3586ce;
+  border-width: 1px;
+  border-style: dashed;
+  width: 100%;
+  border-radius: 4px; }
+  .activity-add hr {
+    border-top-color: #2e79bc; }
+  .activity-add .alert-link {
+    color: #296ca7; }
+  .activity-add .pluscontainer {
+    border: 1px solid #3586ce; }
+  .activity-add:hover {
+    cursor: pointer;
+    background-color: #cfe2f3; }
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target {
   scroll-margin-top: 60px; }