diff --git a/CHANGES.md b/CHANGES.md
index a6aa7e04447b4a94494db01bf63a5aa8f6ce3729..d6bcf2fae97a10036480b6e197983cd818ae1658 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2021-08-16 - Improvement: Adjusted tab appearance for in-course settings.
 * 2021-08-16 - Adjusted settings_link_page.mustache template due to upstream changes in theme Boost.
 * 2021-08-16 - Adjusted loginform.mustache template due to upstream changes in theme Boost.
 * 2021-08-16 - Bugfix: Remove overwritten template full_header.mustache. If the setting showsettingsincourse is enabled, this will place the cog icon _over_ instead of _near_ the edit button. This will fix a presentation issue with the in-course settings menu on smaller screens.  
diff --git a/scss/post.scss b/scss/post.scss
index e4967fc4e6fdbc17f10bdc339e060d8143acce13..1f82410359219e7d34a2d4c9087d9dfcf640bee5 100644
--- a/scss/post.scss
+++ b/scss/post.scss
@@ -952,21 +952,44 @@ body.scrolled #goto-top-link {
 #boost-campus-activity-settings {
     /* Initially do not display the settings. Visibility will be changed on click with incoursesettings.js. */
     display: none;
+
+    /* Improve layout and look of the settings as they are now placed within the page header. */
     margin-bottom: 1rem;
-    padding: 0 1rem 1.3rem 1rem;
+    .tab-content .card {
+        border: none;
+    }
 
+    /* Improve styling of the tabs so that they look more like real tabs. */
     .nav-tabs {
         border: none;
-        .active {
-            background-color: darken($body-bg, 5%);
-            border-color: darken($body-bg, 5%);
-        }
     }
-    /* Improve color of tab content so it looks more like a real tab. */
     .tab-content .card {
         background-color: darken($body-bg, 5%);
-        border: none;
     }
+
+    /* Do some more tweaks on smaller screens and bigger screens differently as Moodle uses different styles. */
+    @include media-breakpoint-up(md) {
+        /* Add some space. */
+        padding: 0 1rem 1.3rem 1rem;
+
+        /* Highlight the active tab. */
+        .nav-tabs {
+            .active {
+                background-color: darken($body-bg, 5%);
+                border-color: darken($body-bg, 5%);
+            }
+        }
+    }
+    @include media-breakpoint-down(sm) {
+        /* Add some space. */
+        padding: 1rem 0 1.3rem 0;
+
+        /* Remove the border around the course settings card as it would be incomplete. */
+        &.card {
+            border: none;
+        }
+    }
+
 }
 
 /* As this is already placed within the activity content card, the border around the settings card should be removed. */