diff --git a/Changes.md b/Changes.md
index 59e90319..e24fd6de 100644
--- a/Changes.md
+++ b/Changes.md
@@ -4,6 +4,7 @@ History
 Version 404.1.1 - TBR
 ----------------------------
 1. Use section anchors in links when editing.
+2. Add badges to grid - #215.
 
 Version 404.1.0 - 11/04/2024
 ----------------------------
diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php
index 413962f3..a235d118 100644
--- a/classes/output/courseformat/content.php
+++ b/classes/output/courseformat/content.php
@@ -185,6 +185,14 @@ public function export_for_template(\renderer_base $output) {
                 foreach ($data->sections as $datasectionkey => $datasection) {
                     $datasectionmap[$datasection->id] = $datasectionkey;
                 }
+            } else {
+                // Visibility info for grid.
+                $sectionvisiblity = [];
+                foreach ($sections as $section) {
+                    $sectionvisiblity[$section->id] = new stdClass;
+                    $sectionvisiblity[$section->id]->ishidden = $section->ishidden;
+                    $sectionvisiblity[$section->id]->visibility = $section->visibility;
+                }
             }
             foreach ($sectionsforgrid as $section) {
                 // Do we have an image?
@@ -215,7 +223,9 @@ public function export_for_template(\renderer_base $output) {
 
                 // Current section?
                 if ((!empty($currentsectionid)) && ($currentsectionid == $section->id)) {
-                    $sectionimages[$section->id]->currentsection = true;
+                    $sectionimages[$section->id]->iscurrent = true;
+                    $sectionimages[$section->id]->hasbadge = true;
+                    $sectionimages[$section->id]->highlightedlabel = $format->get_section_highlighted_name();
                 }
 
                 if ($editing) {
@@ -235,10 +245,11 @@ public function export_for_template(\renderer_base $output) {
                     // Section name.
                     $sectionimages[$section->id]->sectionname = $section->name;
 
-                    /* User visible.  For more info, see: $format->is_section_visible($thissection) method in relation
-                       to 'hiddensections' course format setting. */
-                    if (!$section->uservisible) {
-                        $sectionimages[$section->id]->notavailable = true;
+                    // Visibility information.
+                    $sectionimages[$section->id]->ishidden = $sectionvisiblity[$section->id]->ishidden;
+                    if ($sectionimages[$section->id]->ishidden) {
+                        $sectionimages[$section->id]->visibility = $sectionvisiblity[$section->id]->visibility;
+                        $sectionimages[$section->id]->hasbadge = true;
                     }
 
                     // Section break.
diff --git a/templates/grid.mustache b/templates/grid.mustache
index 7b87fd19..04c9e307 100644
--- a/templates/grid.mustache
+++ b/templates/grid.mustache
@@ -26,7 +26,7 @@
     * sectionbreak - There is a section break for this section.
     * sectionbreakheading - Section break heading.
     * number - Section number.
-    * currentsection - Current section?
+    * iscurrent - Current section?
     * sectionurl - Section URL.
     * sectionname - Section name.
     * imageuri - Image URI.
@@ -52,7 +52,7 @@
                 "sectionbreak": true,
                 "sectionbreakheading": "This is the section heading",
                 "number": 42,
-                "currentsection": true,
+                "iscurrent": true,
                 "sectionurl": "https://mymoodle/course/view.php?id=4&section=2",
                 "sectionname": "The second section",
                 "imageuri": "https://mymoodle/pluginfile.php/358/format_grid/displayedsectionimage/42/1/ducking.jpg.webp",
@@ -73,21 +73,21 @@
     {{/sectionbreakheading}}
     <div class="thegrid d-flex flex-wrap grid-justify-{{gridjustification}}">
     {{/sectionbreak}}
-    <div id="section-{{number}}" class="grid-section card{{#currentsection}} currentgridsection{{/currentsection}}">
+    <div id="section-{{number}}" class="grid-section card{{#iscurrent}} currentgridsection{{/iscurrent}}">
         {{^popup}}
-        {{#notavailable}}<div class="grid-section-inner">{{/notavailable}}
-        {{^notavailable}}<a class="grid-section-inner" href="{{sectionurl}}">{{/notavailable}}
+        {{#hasbadge}}<div class="grid-section-inner">{{/hasbadge}}
+        {{^hasbadge}}<a class="grid-section-inner" href="{{sectionurl}}">{{/hasbadge}}
         {{/popup}}
         {{#popup}}
-        <div class="grid-modal grid-section-inner" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
+        <div class="grid-modal grid-section-inner d-flex flex-column h-100 justify-content-between" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
         {{/popup}}
-            <div class="card-header text-truncate" title="{{sectionname}}">{{{sectionname}}}{{#notavailable}}
+            <div class="card-header text-truncate h-100" title="{{sectionname}}">{{{sectionname}}}{{#hasbadge}}
                 <div data-region="sectionbadges" class="sectionbadges d-flex">
                     {{$ core_courseformat/local/content/section/badges }}
                         {{> core_courseformat/local/content/section/badges }}
                     {{/ core_courseformat/local/content/section/badges }}
                 </div>
-            {{/notavailable}}</div>
+            {{/hasbadge}}</div>
             {{#imageuri}}
             <div class="grid-image card-img-bottom text-center">
                 <img src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">