diff --git a/css/activities.css b/css/activities.css
index c63c043131..8db0b377cb 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -982,6 +982,7 @@ table {
 #helpBodyDiv .message {
   text-align: center;
   line-height: 1.2;
+  margin: auto;
 }
 
 #helpBodyDiv .icon-container {
diff --git a/js/widgets/help.js b/js/widgets/help.js
index 1f29c161ce..e4ceaefa08 100644
--- a/js/widgets/help.js
+++ b/js/widgets/help.js
@@ -325,6 +325,8 @@ class HelpWidget {
     _showPage(page) {
         const helpBody = docById("helpBodyDiv");
         helpBody.innerHTML = "" ;
+        const totalPages = HELPCONTENT.length;
+        const pageCount = `${page + 1}/${totalPages}`;
 
         // Previous HTML content is removed, and new one is generated. 
         let body = "";
@@ -345,8 +347,8 @@ class HelpWidget {
         
         const helpContentHTML =
         `<h1 class="heading">${HELPCONTENT[page][0]}</h1> 
-         <p class ="description">${HELPCONTENT[page][1]}</p>
-        ` ;
+         <p class="description">${HELPCONTENT[page][1]}</p>
+         <p>${pageCount}</p>`;
         
         body += helpContentHTML ;