diff --git a/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js b/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
index a1f7109ed04..8e9b4caacee 100644
--- a/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
+++ b/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
@@ -1,4 +1,53 @@
+/***UTILITY FUNCTIONS FOR ANNOTATION AND HIGHLIGHT****/
+function appendStepAnnotation($element, number, top, left) {
+  var $marker = $("<span></span>", {"class": "marker"}).text(number);
+  var markerTop = $element.offset().top;
+  var markerLeft = $element.offset().left;
+  if(top !== undefined) {
+    $marker.css('top', markerTop + top);
+  }
+  if(left !== undefined) {
+    $marker.css('left', markerLeft + left);
+  }
+  $('body').append($marker);
+}
+
+function createRedThickOutline($element) {
+  $element.addClass("red-thick-outline");
+}
+
+function createRedMediumOutline($element) {
+  $element.addClass("red-medium-outline");
+}
+
+function clearRedMediumOutline($element) {
+  $element.removeClass("red-medium-outline");
+}
+
+function createRedMediumBorder($element) {
+  $element.addClass("red-medium-border");
+}
+
+function createRedThickOutlineWithOffset($element) {
+  $element.addClass("red-thick-outline");
+  $element.addClass("red-outline-thick-offset");
+}
+
 /***IMPLEMENTATION TO DECORATE PAGES - WHICH ARE CALLED IN SELENIUM****/
+function highlightDashboardWidget() {
+  createRedMediumOutline($("#task-widget"));
+  createRedMediumOutline($("#process-widget"));
+}
+
+function highlightAndNumberingDashboardSections() {
+  var processWidget = $("#process-widget");
+  createRedMediumOutline(processWidget);
+  appendStepAnnotation(processWidget, "1", 0 , processWidget.width()/2);
+  var taskWidget = $("#task-widget");
+  createRedMediumOutline(taskWidget);
+  appendStepAnnotation(taskWidget, "2", 0, taskWidget.width()/2);
+}
+
 function numberingTaskFilter() {
   var taskOrder = jQuery("#task-widget\\:compact-task-widget-sort-menu");
   appendStepAnnotation(taskOrder, 2, -15,100)
@@ -33,6 +82,31 @@ function highlightLogo() {
   createRedMediumOutline($(".portal-home-logo.portal-home-logo-small"));
 }
 
+function numberingTaskItem() {
+  var taskPriorityFirstRow = jQuery(".priority-cell:eq(0)");
+  appendStepAnnotation(taskPriorityFirstRow, "1", -35, 0);
+  
+  var taskNameFirstRow = jQuery(".task-start-info-task-name:eq(0)");
+  appendStepAnnotation(taskNameFirstRow, "2", -10, 160);
+  
+  var taskIdSecondRow = jQuery(".task-start-info-task-name:eq(1)");
+  appendStepAnnotation(taskIdSecondRow, "3", -10, 170);
+  
+  var taskDatesThirddRow = jQuery(".task-start-info-content:eq(2)");
+  appendStepAnnotation(taskDatesThirddRow, "4", -10, -45);
+  appendStepAnnotation(taskDatesThirddRow, "5", -10, 120);
+  
+  var taskDescriptionFourthRow = jQuery(".task-start-info-task-description:eq(3)");
+  appendStepAnnotation(taskDescriptionFourthRow, "6", -10, 175);
+}
+
+function numberingTaskFilterAndSort() {
+  var taskFilter = $("#task-widget\\:filter-form\\:filter-container");
+  appendStepAnnotation(taskFilter, 1, -15, taskFilter.width()/2);
+  var taskSort = $("#task-widget\\:sort-task-form\\:sort-task-menu");
+  appendStepAnnotation(taskSort, 2, -15, taskSort.width()/2);
+}
+
 function highlightProcessNavigation() {
   createRedThickOutlineWithOffset($('.layout-menu .PROCESS'));
 }
@@ -128,6 +202,72 @@ function highlightShowMoreNoteLink() {
   createRedMediumOutline($('a.js-note-show-more-link'));
 }
 
+function highlightCustomCaseList() {
+  var caseHeader = $("[id$='case-widget:widget-column-header']");
+  createRedMediumOutline(caseHeader);
+  appendStepAnnotation(caseHeader, "1", -15, caseHeader.width()/2);
+  
+  var action = $(".case-header-container.case-header-data:eq(1)");
+  createRedMediumOutline(action);
+  appendStepAnnotation(action, "2", -15, caseHeader.width()/2);
+}
+
+function highlightCustomColumnsConfigOnCaseList() {
+  var customColumnHeader = $(".ui-commandlink.customized-case-header-column:eq(0)");
+  createRedMediumOutline(customColumnHeader)
+  appendStepAnnotation(customColumnHeader, "1", -30, -20);
+  
+  var columnsCheckbox = $("[id$=':select-columns-form:columns-checkbox']");
+  var customCheckbox = columnsCheckbox.find("td:eq(5)");
+  createRedMediumOutline(customCheckbox);
+  appendStepAnnotation(customCheckbox, "2", -20, customCheckbox.width() - 10);
+  
+  var caseHeader = $(".case-info-row.js-case-start-link:eq(6)");
+  var customCaseItemCell = caseHeader.find("span.customized-case-header-column:eq(0)");
+  createRedMediumOutline(customCaseItemCell);
+  appendStepAnnotation(customCaseItemCell, "3", -20, - 20);
+}
+
+function highlightCaseCreatorFilter() {
+  var filterLabel = $("[id$=':creator-filter:filter-open-form:advanced-filter-command']");
+  createRedMediumOutline(filterLabel);
+  appendStepAnnotation(filterLabel, "1", -25, -30);
+  
+  var removeFilterCommand = $("[id$=':creator-filter:filter-open-form:advanced-filter-remove-command']");
+  createRedMediumOutline(removeFilterCommand);
+  appendStepAnnotation(removeFilterCommand, "2", -25, removeFilterCommand.width());
+  
+  var updateCommand = $("[id$=':creator-filter:filter-input-form:update-command']");
+  createRedMediumOutline(updateCommand);
+  appendStepAnnotation(updateCommand, "3", -2, -40)
+}
+
+function highlightEditSwitchProcessButton() {
+  var editSwitchCommand = $("[id$='process-widget:user-process-action-form:editing-switch-command']");
+  createRedMediumOutline(editSwitchCommand);
+  appendStepAnnotation(editSwitchCommand, "1", -45, editSwitchCommand.width()/2);
+}
+
+function highlightEditStepUserProcess(isDeleteProcess) {
+  var userProcessList = $("[id$='process-widget:edit-process-item-form:order-list-items']");
+  var userProcessItem = userProcessList.find("li.ui-orderlist-item.ui-sortable-handle:eq(0)");
+  if (isDeleteProcess) {
+    var processDeleteLink = userProcessItem.find("[id$=':process-delete-link']");
+    createRedMediumOutline(processDeleteLink);
+    appendStepAnnotation(processDeleteLink, "2", -40, processDeleteLink.width()/2);
+  } else {
+    appendStepAnnotation(userProcessItem, "2", 4, userProcessItem.width()/2);
+  }
+  
+  var processSaveLink = $("[id$='process-widget:user-process-action-form:save-process-command']");
+  createRedMediumOutline(processSaveLink);
+  appendStepAnnotation(processSaveLink, "3", -40, -20);
+}
+
+function highlightSortUserProcess() {
+  createRedMediumOutline($("[id$=':user-process-action-form:name-sort-command']"));
+}
+
 function highlightProcessMoreInformationLink() {
   var displayingProcessItem = $(".js-process-start-list-item").filter(function() {
     if($(this).css('display') != 'none')
@@ -140,6 +280,47 @@ function highlightProcessMoreInformationLink() {
 }
 
 // Task
+function highlightCustomTaskList() {
+  var caseHeader = $("[id$='task-widget:task-widget-sub-header']");
+  createRedMediumOutline(caseHeader);
+  appendStepAnnotation(caseHeader, "1", -15, caseHeader.width()/2);
+  
+  var action = $(".full-mode.task-start-list-item.js-task-start-list-item:eq(2)");
+  createRedMediumOutline(action);
+  appendStepAnnotation(action, "2", -15, caseHeader.width()/2);
+}
+
+function highlightCustomColumnsConfigOnTaskList() {
+  var customColumnHeader = $("[id$=':task-custom']")[0];
+  createRedMediumOutline($(customColumnHeader))
+  appendStepAnnotation($(customColumnHeader), "1", -30, -20);
+  
+  var columnsCheckbox = $("[id$='task-columns-configuration:select-columns-form:columns-checkbox']");
+  var customCheckbox = columnsCheckbox.find("td:eq(7)");
+  createRedMediumOutline(customCheckbox);
+  appendStepAnnotation(customCheckbox, "2", -20, customCheckbox.width() - 10);
+  
+  var taskHeader = $(".task-start-link.js-task-start-link:eq(4)");
+  var customTaskItemCell = taskHeader.find(".task-custom-field-cell");
+  createRedMediumOutline(customTaskItemCell);
+  appendStepAnnotation(customTaskItemCell, "3", -20, - 20);
+}
+
+
+function highlightTaskStateFilter() {
+  var filterLabel = $("[id$=':state-filter:filter-open-form:advanced-filter-command']");
+  createRedMediumOutline(filterLabel);
+  appendStepAnnotation(filterLabel, "1", -25, -30);
+  
+  var removeFilterCommand = $("[id$=':state-filter:filter-open-form:advanced-filter-remove-command']");
+  createRedMediumOutline(removeFilterCommand);
+  appendStepAnnotation(removeFilterCommand, "2", -25, removeFilterCommand.width());
+  
+  var updateCommand = $("[id$=':state-filter:filter-input-form:update-command']");
+  createRedMediumOutline(updateCommand);
+  appendStepAnnotation(updateCommand, "3", -2, -40)
+}
+
 function highlightJoinGroupChatOption() {
   createRedMediumOutline($('#horizontal-task-action-form\\:chat-group').parent());
 }
@@ -168,10 +349,36 @@ function scrollToMiddleOfLayoutContent() {
   window.scrollTo(0, document.body.scrollHeight/2);
 }
 
+function scrollToMiddleOfLayoutContent2() {
+  window.scrollTo(0, document.body.scrollHeight/4);
+}
+
 function scrollToBottomOfLayoutContent() {
   window.scrollTo(0, document.body.scrollHeight);
 }
 
+function highlightCustomTaskDetail() {
+  var customTop = $('.custom-task-details-panel-top');
+  appendStepAnnotation(customTop, 1, -45, customTop.width()/2);
+  
+  var customBottom = $('.custom-task-details-panel-bottom');
+  appendStepAnnotation(customBottom, 2, -45, customBottom.width()/2);
+}
+
+function highlightCustomTaskDetailWithNewStyle() {
+  var customPanel1 = $('.custom-task-panel-1');
+  appendStepAnnotation(customPanel1, 1, -10, customPanel1.width()/2);
+  
+  var customPanel2 = $('.custom-task-panel-2');
+  appendStepAnnotation(customPanel2, 2, -10, customPanel2.width()/2);
+
+  var customPanel3 = $('.custom-task-panel-3');
+  appendStepAnnotation(customPanel3, 3, -10, customPanel3.width()/2);
+  
+  var customPanel4 = $('.custom-task-panel-4');
+  appendStepAnnotation(customPanel4, 4, -10, customPanel4.width()/2);
+}
+
 function highlightCaseDetailComponents() {
   var general = $('#case-details-information-panel');
   appendStepAnnotation(general, 1, 0, general.width()/2);
@@ -216,6 +423,14 @@ function highlightTaskActionItem(taskIndex, actionIndex) {
   createRedMediumOutline(actionItem);
 }
 
+function highlightShowAllProcesses() {
+  createRedThickOutlineWithOffset($('.layout-menu .PROCESS'));
+}
+
+function highlightTaskExportToExcelButton() {
+  createRedMediumOutline($("[id$=':task-export-to-excel-form']"));
+}
+
 function highlightCaseExportToExcelButton() {
   createRedMediumOutline($("a[id$=':case-export-to-excel']"));
 }
@@ -241,6 +456,16 @@ function highlightCustomWidgetInCaseDetails() {
   createRedMediumOutline($(".custom-widget-card"));
 }
 
+function addStepToCustomWidgetTopTaskDetails() {
+  var topWidget = $(".custom-task-details-panel-top");
+  appendStepAnnotation(topWidget, 1, -30, topWidget.width()/2)
+}
+
+function addStepTCustomWidgetTopTaskDetails() {
+  var bottomWidget = $(".custom-task-details-panel-bottom");
+  appendStepAnnotation(bottomWidget, 2, -30, bottomWidget.width()/2)
+}
+
 function highlightIFrameWidgetTaskDetails() {
   createRedMediumOutline($(".custom-widget-card.task-detail-card"));
 }
@@ -257,6 +482,10 @@ function clearHighlightUserName() {
   clearRedMediumOutline($('#user-settings-menu'));
 }
 
+function highlightServerInfo() {
+  createRedMediumOutline($("#server-infor"));
+}
+
 function highlightUserExampleNavigation() {
   createRedThickOutlineWithOffset($('.layout-menu .CUSTOM'));
 }
@@ -329,4 +558,8 @@ function createBlackThinOutline($element) {
 
 function createBlackMediumOutline($element) {
   $element.addClass("black-medium-outline");
-}
\ No newline at end of file
+}
+
+function highlightElement(elementSelector) {
+  createRedMediumOutline($(elementSelector));
+}