diff --git a/Modern Development/Service Portal Widgets/HR Task Progress Bar/CSS.js b/Modern Development/Service Portal Widgets/HR Task Progress Bar/CSS.js
new file mode 100644
index 0000000000..0a5abade37
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/HR Task Progress Bar/CSS.js	
@@ -0,0 +1,16 @@
+/*Parent container using flex to adjust width automatically*/
+.parent {
+  display: flex;
+  justify-content: space-evenly;  
+  background: cornflowerblue;
+}
+/*Text (HR task) will be shown in Red colo and green background*/
+.child{
+  color:#FF0000;
+  width:100%;
+  background: lightgreen;
+}
+/*single color when task is not in WIP*/
+.child_1{
+  width:100%;
+}
diff --git a/Modern Development/Service Portal Widgets/HR Task Progress Bar/HTML.js b/Modern Development/Service Portal Widgets/HR Task Progress Bar/HTML.js
new file mode 100644
index 0000000000..5431ccfe5f
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/HR Task Progress Bar/HTML.js	
@@ -0,0 +1,6 @@
+<!-- HTML to show progress bar on HRM Page -->
+<div class="parent">
+  <div ng-class="{{tasks.state}}==18||data.state==18 ? 'child':'child_1'" ng-repeat="tasks in data.taskArr">
+   {{tasks.number}}
+  </div>
+</div>
diff --git a/Modern Development/Service Portal Widgets/HR Task Progress Bar/README.md b/Modern Development/Service Portal Widgets/HR Task Progress Bar/README.md
new file mode 100644
index 0000000000..2f01b73095
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/HR Task Progress Bar/README.md	
@@ -0,0 +1,12 @@
+**Steps to add widget to page**
+1. Open "hrm_ticket_page" portal page.
+2. Create a widget with HTML, CSS, Client, Server code as per this document.
+3. Add the widget to top of "hrm_ticket_page" page.
+
+**Output** 
+1.  If the HR case has associated tasks, those tasks will be shown as progress bar.
+2.  WIP tasks will be shown with green background and red text.
+3.  All other state tasks will be shown in black text and blue background.
+
+   
+<img width="2144" height="1320" alt="image" src="https://github.com/user-attachments/assets/aaa00792-0f35-4f98-a46b-a60ef7270c33" />
diff --git a/Modern Development/Service Portal Widgets/HR Task Progress Bar/Server.js b/Modern Development/Service Portal Widgets/HR Task Progress Bar/Server.js
new file mode 100644
index 0000000000..84c82854fc
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/HR Task Progress Bar/Server.js	
@@ -0,0 +1,15 @@
+(function() {
+    data.state = '';
+    data.taskArr = []; // array to return HR task fields
+    var recordId = $sp.getParameter('sys_id'); // get sys_id of HR case from URL
+    var getTask = new GlideRecord('sn_hr_core_task');
+    getTask.addEncodedQuery('parent=' + recordId); // encoded Query to get all task related to HR case
+    getTask.query();
+    while (getTask.next()) {
+        var obj = {}; // object to store HR task values as JSON
+        obj.number = getTask.getValue('number'); // add HR task number
+        obj.state = getTask.getValue('state');  // add HR task state
+        obj.sys_id = getTask.getValue('sys_id'); // add HR task sys_id
+        data.taskArr.push(obj);
+    }
+})();
diff --git a/Modern Development/Service Portal Widgets/HR Task Progress Bar/client_script.js b/Modern Development/Service Portal Widgets/HR Task Progress Bar/client_script.js
new file mode 100644
index 0000000000..2d4e54a21f
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/HR Task Progress Bar/client_script.js	
@@ -0,0 +1,10 @@
+api.controller = function(spUtil, $scope) {
+    /* widget controller */
+    var c = this;
+   // record watcher to show changes on progress bar dynamically
+    spUtil.recordWatch($scope, "sn_hr_core_task", "active=true", function(name) {
+        c.data.state = name.data.record.state; 
+        c.server.update();
+
+    });
+};