Index: lams_central/web/includes/javascript/authoring/authoringActivity.js
===================================================================
diff -u -r707c51d0e1951053e406ad4fac8013ccb7f550ab -rb61438aa2b38fbabbc39cceb7f6b45973a682557
--- lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 707c51d0e1951053e406ad4fac8013ccb7f550ab)
+++ lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
@@ -1,4 +1,4 @@
-/**
+/**
  * This file contains methods for Activity definition and manipulation on canvas.
  */
 
@@ -1950,4 +1950,4 @@
 			});
 		return Snap.parse(wrapper[0].outerHTML);
 	}
-}; 
+}; 
\ No newline at end of file
Index: lams_learning/web/css/components-learner.css
===================================================================
diff -u -re820169ce662888b003dbe47ef24a48cf19d124c -rb61438aa2b38fbabbc39cceb7f6b45973a682557
--- lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision e820169ce662888b003dbe47ef24a48cf19d124c)
+++ lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
@@ -21,7 +21,7 @@
     color: var(--bs-primary);
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items {
+.component-page-wrapper .component-sidebar .progress-bar-items {
     background-color: var(--lams-background-gray);
     padding: .5rem;
     margin-bottom: 0;
@@ -30,31 +30,32 @@
     text-align: left;
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li {
+.component-page-wrapper .component-sidebar .progress-bar-items > li {
     padding: .5rem 2rem;
     border-radius: 1.2rem;
     color: var(--bs-secondary);
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li.progress-bar-item-openable {
-    cursor: pointer;
+.component-page-wrapper .component-sidebar .progress-bar-items > li a {
+    text-decoration: none;
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li > .progress-bar-icon {
+.component-page-wrapper .component-sidebar .progress-bar-items > li > .progress-bar-icon {
     margin-right: .5rem;
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li.progress-bar-item-complete,
-.component-page-wrapper .component-sidebar #progress-bar-items > li.progress-bar-item-complete > .progress-bar-icon {
+.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-complete,
+.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-complete > .progress-bar-icon {
     color: var(--bs-green);
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li.progress-bar-item-current,
-.component-page-wrapper .component-sidebar #progress-bar-items > li.progress-bar-item-current > .progress-bar-icon {
+.component-page-wrapper .component-sidebar .progress-bar-items > li.support-bar-item,
+.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-current,
+.component-page-wrapper .component-sidebar .progress-bar-items > li.progress-bar-item-current > .progress-bar-icon {
     color: var(--bs-black);
 }
 
-.component-page-wrapper .component-sidebar #progress-bar-items > li:hover {
+.component-page-wrapper .component-sidebar .progress-bar-items > li:hover {
     background-color: var(--bs-white);
 }
 
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -re820169ce662888b003dbe47ef24a48cf19d124c -rb61438aa2b38fbabbc39cceb7f6b45973a682557
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision e820169ce662888b003dbe47ef24a48cf19d124c)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
@@ -1,4 +1,3 @@
-
 // refresh progress bar on first/next activity load
 function initLearnerPage(toolSessionId, userId) {
     $('.component-page-wrapper .sidebar-toggle-button').click(function () {
@@ -10,40 +9,72 @@
     });
 
     $.ajax({
-        url : LAMS_URL + 'learning/learner/getLearnerProgress.do',
-        data : {
-            'toolSessionID' : toolSessionId,
-            'userID'   : userId
+        url: LAMS_URL + 'learning/learner/getLearnerProgress.do',
+        data: {
+            'toolSessionID': toolSessionId,
+            'userID': userId
         },
-        cache : false,
-        dataType : 'json',
-        success : function(result){
+        cache: false,
+        dataType: 'json',
+        success: function (result) {
             $('.component-page-wrapper .component-page-content #lesson-name').text(result.lessonName);
+
+            // draw support activities if they exist
+            if (result.support) {
+                let supportBarItems = $('.component-page-wrapper .component-sidebar #support-bar').removeClass('d-none')
+                    .find('#support-bar-items').empty();
+                $.each(result.support, function (activityIndex, activityData) {
+                    let activityItem = $('<li>').attr('role', 'navigation menubaritem')
+                        .addClass('support-bar-item progress-bar-item-openable')
+                        .prepend('<i class="fa-solid fa-fw fa-circle-plus progress-bar-icon">').appendTo(supportBarItems);
+                    let activityLink = $('<a>').text(activityData.name).attr({
+                        'target': '_blank',
+                        'href': activityData.url,
+                        'role': 'navigation',
+                        'title': 'Open completed activty "' + activityData.url + '"'
+                    });
+                    activityItem.addClass('progress-bar-item-openable').append(activityLink);
+                });
+            }
+
             let progressBarItems = $('.component-page-wrapper .component-sidebar #progress-bar-items').empty();
+            $.each(result.activities, function (activityIndex, activityData) {
+                let activityItem = $('<li>').attr('role', 'navigation menubaritem').appendTo(progressBarItems),
+                    activityName = !activityData.name && activityData.type === 'g' ? 'Gate' : activityData.name,
+                    activityIcon = $('<i class="fa-solid fa-fw progress-bar-icon"></i>');
 
-            for (var activityIndex = 0; activityIndex < result.activities.length; activityIndex++) {
-                let activityData = result.activities[activityIndex],
-                    activityItem = $('<li>').attr('role', 'navigation menubaritem').appendTo(progressBarItems);
                 if (activityData.status === 0) {
-                    activityItem.addClass('progress-bar-item-current').text(activityData.name)
-                        .prepend('<i class="fa-solid fa-fw fa-circle progress-bar-icon">');
+                    activityItem.addClass('progress-bar-item-current').text(activityName).prepend(activityIcon);
+                    if (activityData.type === 'g') {
+                        activityIcon.addClass('fa-hourglass-half');
+                    } else {
+                        activityIcon.addClass('fa-circle');
+                    }
                 } else if (activityData.status === 1) {
-                    activityItem.addClass('progress-bar-item-complete')
-                        .prepend('<i class="fa-solid fa-fw fa-check progress-bar-icon">')
+                    activityItem.addClass('progress-bar-item-complete').prepend(activityIcon);
+                    if (activityData.type === 'g') {
+                        activityIcon.addClass('fa-hourglass-full');
+                    } else {
+                        activityIcon.addClass('fa-check');
+                    }
                     if (activityData.url) {
-                        let activityLink = $('<a>').text(activityData.name).attr({
-                            'target' : '_blank',
-                            'href' : activityData.url,
-                            'role' : 'navigation',
-                            'title' : 'Open completed activty "' + activityData.url + '"'
+                        let activityLink = $('<a>').text(activityName).attr({
+                            'target': '_blank',
+                            'href': activityData.url,
+                            'role': 'navigation',
+                            'title': 'Open completed activty "' + activityData.url + '"'
                         });
                         activityItem.addClass('progress-bar-item-openable').append(activityLink);
                     }
                 } else {
-                    activityItem.addClass('progress-bar-item-incomplete').text(activityData.name)
-                        .prepend('<i class="fa-regular fa-fw fa-circle progress-bar-icon">');
+                    activityItem.addClass('progress-bar-item-incomplete').text(activityName).prepend(activityIcon);
+                    if (activityData.type === 'g') {
+                        activityIcon.addClass('fa-hourglass-start');
+                    } else {
+                        activityIcon.addClass('fa-circle');
+                    }
                 }
-            }
+            });
         }
     });
 }
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -r3380518f9203a7480c1f76ca882699c708e8d14f -rb61438aa2b38fbabbc39cceb7f6b45973a682557
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 3380518f9203a7480c1f76ca882699c708e8d14f)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
@@ -79,8 +79,15 @@
             <a href="/" title="Return to index page" class="lams-logo" role="navigation">
                 <img src="<lams:LAMSURL/>images/svg/lamsv5_logo.svg" alt="LAMS logo" aria-hidden="true"/>
             </a>
+
+            <div id="support-bar" class="d-none pb-4 w-100">
+                <h6 class="sidebar-title"><i class="fa-solid fa-snowplow"></i>&nbsp;<span id="support-bar-title">Support activities</span></h6>
+                <ul id="support-bar-items" class="progress-bar-items">
+                </ul>
+            </div>
+
             <h6 class="sidebar-title"><i class="fa-solid fa-bars-progress"></i>&nbsp;<span id="progress-bar-title">Progress bar</span></h6>
-            <ul id="progress-bar-items">
+            <ul id="progress-bar-items" class="progress-bar-items w-100">
             </ul>
         </nav>