Index: lams_learning/web/css/components-learner.css
===================================================================
diff -u -rb61438aa2b38fbabbc39cceb7f6b45973a682557 -r722eca5a525f8ec6f93a1f8c740473a68876f1c1
--- lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
+++ lams_learning/web/css/components-learner.css	(.../components-learner.css)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
@@ -1,7 +1,25 @@
 .component-page-wrapper #lesson-name {
     margin-left: 1rem;
+    margin-top: .2rem;
 }
 
+.component-page-wrapper .top-menu  {
+    width: 10%;
+}
+.component-page-wrapper .top-menu #progress-bar-widget {
+    width: 100%;
+    margin-top: .6rem;
+}
+
+.component-page-wrapper .top-menu #progress-bar-widget .progress {
+    height: 1.5rem;
+    background-color: var(--bs-gray-200);
+}
+
+.component-page-wrapper .top-menu #progress-bar-widget .progress .progress-bar {
+    background-color: var(--bs-blue);
+}
+
 .component-page-wrapper .component-sidebar {
     top: 6rem;
     left: -72rem;
Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -rb61438aa2b38fbabbc39cceb7f6b45973a682557 -r722eca5a525f8ec6f93a1f8c740473a68876f1c1
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
@@ -37,7 +37,8 @@
                 });
             }
 
-            let progressBarItems = $('.component-page-wrapper .component-sidebar #progress-bar-items').empty();
+            let progressBarItems = $('.component-page-wrapper .component-sidebar #progress-bar-items').empty(),
+                completedActivityCount = 0;
             $.each(result.activities, function (activityIndex, activityData) {
                 let activityItem = $('<li>').attr('role', 'navigation menubaritem').appendTo(progressBarItems),
                     activityName = !activityData.name && activityData.type === 'g' ? 'Gate' : activityData.name,
@@ -51,6 +52,8 @@
                         activityIcon.addClass('fa-circle');
                     }
                 } else if (activityData.status === 1) {
+                    completedActivityCount++;
+
                     activityItem.addClass('progress-bar-item-complete').prepend(activityIcon);
                     if (activityData.type === 'g') {
                         activityIcon.addClass('fa-hourglass-full');
@@ -75,6 +78,13 @@
                     }
                 }
             });
+
+            let progressBarWidgetValue = Math.round(completedActivityCount / result.activities.length * 100),
+                progressBarWidget = $('.component-page-wrapper .component-page-content #progress-bar-widget');
+            $('.progress-bar', progressBarWidget)
+                .css('width', progressBarWidgetValue + '%')
+                .attr('aria-valuenow', progressBarWidgetValue);
+            $('#progress-bar-widget-value').text(progressBarWidgetValue + '%');
         }
     });
 }
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/PageLearner.tag
===================================================================
diff -u -rb61438aa2b38fbabbc39cceb7f6b45973a682557 -r722eca5a525f8ec6f93a1f8c740473a68876f1c1
--- lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision b61438aa2b38fbabbc39cceb7f6b45973a682557)
+++ lams_tool_nb/web/WEB-INF/tags/PageLearner.tag	(.../PageLearner.tag)	(revision 722eca5a525f8ec6f93a1f8c740473a68876f1c1)
@@ -58,6 +58,19 @@
                     <h1 id="lesson-name"></h1>
                 </div>
                 <div class="top-menu">
+                    <div id="progress-bar-widget" title="Your lesson completion">
+                        <div class="row">
+                            <div class="col-6">
+                                Progress
+                            </div>
+                            <div class="col-6 text-end" id="progress-bar-widget-value">
+                            </div>
+                        </div>
+                        <div class="progress">
+                            <div class="progress-bar" role="progressbar" aria-label="Progress bar widget"
+                                 aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                    </div>
                 </div>
             </header>