diff --git a/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/UserSelection/UserSelection.xhtml b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/UserSelection/UserSelection.xhtml
index 312054815eb..cbeddf397d8 100644
--- a/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/UserSelection/UserSelection.xhtml
+++ b/AxonIvyPortal/portal-components/src_hd/com/axonivy/portal/components/UserSelection/UserSelection.xhtml
@@ -56,14 +56,19 @@
 
   <h:panelGroup id="#{cc.attrs.componentId}-label-panel" layout="block"
     rendered="#{not empty cc.attrs.label and !cc.attrs.floatingLabel}"
-    styleClass="#{cc.attrs.labelPanelStyleClass}">
+    styleClass="#{cc.attrs.labelPanelStyleClass} ui-g-6 pl-0">
     <p:outputLabel id="#{cc.attrs.componentId}-label" value="#{cc.attrs.label}" for="#{cc.attrs.componentId}"
       styleClass="#{cc.attrs.labelStyleClass}" />
   </h:panelGroup>
 
   <c:set var="completeMethod" value="#{not empty cc.attrs.completeMethod ? cc.attrs.completeMethod : userSelectionBean.completeUserMethod}" />
+  <h:panelGroup layout="block"
+    styleClass="#{cc.attrs.messageStyleClass} #{cc.attrs.floatingLabel ? 'message-for-floating-label' : ''}">
+    <p:message id="#{cc.attrs.componentId}-message"
+      for="#{cc.attrs.componentId}" rendered="#{cc.attrs.isRenderedMessage}"/>
+  </h:panelGroup>
   <h:panelGroup id="#{cc.attrs.componentId}-autocomplete-panel" layout="block"
-    styleClass="user-selection-panel #{cc.attrs.autoCompletePanelStyleClass} #{cc.attrs.floatingLabel and ivyPrimefacesThemeResolver.sessionTheme.contains('serenity') ? 'md-inputfield' : ''} #{cc.attrs.floatingLabel and ivyPrimefacesThemeResolver.sessionTheme.contains('freya') ? 'ui-float-label' : ''}">
+    styleClass="pl-0 user-selection-panel #{cc.attrs.autoCompletePanelStyleClass} #{cc.attrs.floatingLabel and ivyPrimefacesThemeResolver.sessionTheme.contains('serenity') ? 'md-inputfield' : ''} #{cc.attrs.floatingLabel and ivyPrimefacesThemeResolver.sessionTheme.contains('freya') ? 'ui-float-label' : ''}">
     <p:autoComplete id="#{cc.attrs.componentId}"
       value="#{cc.attrs.selectedUser}"
       scrollHeight="#{cc.attrs.scrollHeight}"
@@ -104,11 +109,6 @@
       styleClass="#{cc.attrs.labelStyleClass}"
       rendered="#{cc.attrs.floatingLabel}" />
   </h:panelGroup>
-  <h:panelGroup layout="block"
-    styleClass="#{cc.attrs.messageStyleClass} #{cc.attrs.floatingLabel ? 'message-for-floating-label' : ''}">
-    <p:message id="#{cc.attrs.componentId}-message"
-      for="#{cc.attrs.componentId}" rendered="#{cc.attrs.isRenderedMessage}"/>
-  </h:panelGroup>
   <h:outputScript name="theme-checker.js" library="js" />
   <script type="text/javascript">
     ThemeChecker.updateLayoutByTheme('#{ivyPrimefacesThemeResolver.sessionTheme}');
diff --git a/AxonIvyPortal/portal-components/webContent/resources/css/user-selection-component.css b/AxonIvyPortal/portal-components/webContent/resources/css/user-selection-component.css
index 26acc8c3d47..3ed176146eb 100644
--- a/AxonIvyPortal/portal-components/webContent/resources/css/user-selection-component.css
+++ b/AxonIvyPortal/portal-components/webContent/resources/css/user-selection-component.css
@@ -2,6 +2,11 @@
   width: 100%;
 }
 
+.ui-fluid.user-selection-panel {
+  display: inline-block;
+  width: 85%;
+}
+
 .message-for-floating-label {
   padding-left: 2px;
 }
diff --git a/AxonIvyPortal/portal-selenium-test/.settings/ch.ivyteam.ivy.designer.prefs b/AxonIvyPortal/portal-selenium-test/.settings/ch.ivyteam.ivy.designer.prefs
index b9e91137fab..e65c0e57732 100644
--- a/AxonIvyPortal/portal-selenium-test/.settings/ch.ivyteam.ivy.designer.prefs
+++ b/AxonIvyPortal/portal-selenium-test/.settings/ch.ivyteam.ivy.designer.prefs
@@ -1,6 +1,5 @@
-ch.ivyteam.ivy.designer.preferences.DataClassPreferencePage\:DEFAULT_DATA_CLASS=ch.ivyteam.ivy.project.portal.test.Data
 ch.ivyteam.ivy.designer.preferences.DataClassPreferencePage\:DEFAULT_NAMESPACE=ch.ivyteam.ivy.project.portal.test
 ch.ivyteam.ivy.project.preferences\:PORTAL_VERSION=10
 ch.ivyteam.ivy.project.preferences\:PRIMEFACES_VERSION=13
-ch.ivyteam.ivy.project.preferences\:PROJECT_VERSION=114006
+ch.ivyteam.ivy.project.preferences\:PROJECT_VERSION=120001
 eclipse.preferences.version=1
diff --git a/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Data.d.json b/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Data.d.json
index 80ad991cf03..78f1a7ebd9e 100644
--- a/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Data.d.json
+++ b/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Data.d.json
@@ -1,5 +1,5 @@
 {
-  "$schema" : "https://json-schema.axonivy.com/data-class/11.4.0/data-class.json",
+  "$schema" : "https://json-schema.axonivy.com/data-class/12.0.0/data-class.json",
   "simpleName" : "Data",
   "namespace" : "ch.ivyteam.ivy.project.portal.test",
   "isBusinessCaseData" : false
diff --git a/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Responsible.d.json b/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Responsible.d.json
index d2ac71c96a2..8793319083d 100644
--- a/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Responsible.d.json
+++ b/AxonIvyPortal/portal-selenium-test/dataclasses/ch/ivyteam/ivy/project/portal/test/Responsible.d.json
@@ -1,5 +1,5 @@
 {
-  "$schema" : "https://json-schema.axonivy.com/data-class/11.4.0/data-class.json",
+  "$schema" : "https://json-schema.axonivy.com/data-class/12.0.0/data-class.json",
   "simpleName" : "Responsible",
   "namespace" : "ch.ivyteam.ivy.project.portal.test",
   "isBusinessCaseData" : false,
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AbsencePage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AbsencePage.java
index fd98f5e6fc6..0db6b045aa4 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AbsencePage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AbsencePage.java
@@ -24,6 +24,8 @@ public class AbsencePage extends TemplatePage {
 
   private static final String DELETE_ABSENCE__LINK_ID_PATTERN =
       "absences-management-form:absence-table:%d:delete-absence";
+  private static final String ABSENCE_ACTION_BUTTON_PATTERN = 
+      "absences-management-form:absence-table:%d:absence-action-button";
   private static final String EDIT_ABSENCE__LINK_ID_PATTERN = "absences-management-form:absence-table:%d:edit-absence";
 
   @Override
@@ -44,10 +46,10 @@ public void countAbsences(int expectedSize) {
   }
 
   public void showAbsencesInThePast(boolean shown) {
-    SelenideElement checkBox = $("input[id*='show-absence-in-the-past']");
+    SelenideElement checkBox = $(".show-absence-in-the-past-panel");
     boolean checkBoxSelected = checkBox.isSelected();
     if (checkBoxSelected != shown) {
-      waitForElementClickableThenClick("div[id*='show-absence-in-the-past'] div.ui-chkbox-box");
+      waitForElementClickableThenClick(checkBox);
     }
   }
 
@@ -157,7 +159,7 @@ public void saveSubstitute() {
   }
 
   public WebElement getAbsenceForm() {
-    return $("[id$='absences-management-form']");
+    return $("[id$='absences-management-container']");
   }
 
   public SelenideElement getAddAbsenceDialog() {
@@ -171,12 +173,20 @@ public void waitForAbsencesGrowlMessageDisplay() {
     $(growlMessage.findElement(By.className("ui-growl-item-container"))).shouldBe(appear, DEFAULT_TIMEOUT);
   }
 
+  public void clickOnAbsenceAction(int index) {
+    $(By.id(String.format(ABSENCE_ACTION_BUTTON_PATTERN, index))).click();
+  }
   public void canDeleteAbsence(int index) {
+    clickOnAbsenceAction(index);
     waitForElementDisplayed($(By.id(String.format(DELETE_ABSENCE__LINK_ID_PATTERN, index))), true);
+    //Click to close
+    clickOnAbsenceAction(index);
   }
 
   public void canEditAbsence(int index) {
+    clickOnAbsenceAction(index);
     waitForElementDisplayed($(By.id(String.format(EDIT_ABSENCE__LINK_ID_PATTERN, index))), true);
+    clickOnAbsenceAction(index);
   }
 
   public void isDeputySettingSectionDisplayed(boolean isDisplay) {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AdminSettingsPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AdminSettingsPage.java
index bda89abb789..60aa44d5459 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AdminSettingsPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AdminSettingsPage.java
@@ -37,13 +37,16 @@ private void editGlobalVariable(String variableName, String variableValue, boole
     $("button[id$='admin-setting-component:adminTabView:restore-all-to-default-button']")
         .shouldBe(Condition.appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition());
     waitForElementDisplayed(By.id("admin-setting-component:adminTabView:settingTable"), true);
-
     var variableRow = $("[id='admin-setting-component:adminTabView:settingTable']").$$(".setting-key")
         .filter(Condition.text(variableName)).get(0);
 
     if (variableRow != null) {
-      SelenideElement editButton = variableRow.ancestor("tr").$(By.cssSelector("a[id$=edit]"));
-      editButton.shouldBe(clickable(), DEFAULT_TIMEOUT).click();
+      variableRow.ancestor("tr").scrollTo();
+      SelenideElement actionButton = variableRow.ancestor("tr").$(By.cssSelector("button[id$=settings-action-button]"));
+      actionButton.shouldBe(getClickableCondition()).click();
+      String currentElementId = actionButton.attr("id");
+      String editButtonId = currentElementId.replace("settings-action-button", "edit-application");
+      $("a[id='" + editButtonId + "']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     }
     waitForElementDisplayed(By.cssSelector("[id$=':settingDialogForm']"), true);
     saveGlobalVariable(variableValue, isBooleanType);
@@ -72,12 +75,12 @@ private void saveGlobalVariable(String value, boolean isBooleanType) {
     waitForElementClickableThenClick("[id='admin-setting-component:save-setting']");
   }
 
-  public void clickOnbackToNewDashboardPageOnAdminSetting() {
-    WaitHelper.waitForNavigation(() -> waitForElementClickableThenClick(findElementById("back-to-home-button")));
+  public void closeConfirmationDialog() {
+    clickOnHomeLogo();
   }
 
-  public void closeConfirmationDialog() {
-    clickOnbackToNewDashboardPageOnAdminSetting();
+  public void clickOnHomeLogo() {
+    $("span[class*='si si-house-chimney-2']").shouldBe(Condition.appear, DEFAULT_TIMEOUT).shouldBe(getClickableCondition()).click();
   }
 
   public void setGlobalFooterInfo() {
@@ -141,7 +144,8 @@ public WebElement getAddApplicationDialog() {
   }
 
   public WebElement getEditSettingDialogOfFirstRow() {
-    waitForElementClickableThenClick($(By.id("admin-setting-component:adminTabView:settingTable:0:edit")));
+    waitForElementClickableThenClick($(By.id("admin-setting-component:adminTabView:settingTable:0:settings-action-button")));
+    $("a[id='admin-setting-component:adminTabView:settingTable:0:edit-application']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     waitForElementDisplayed(By.id("admin-setting-component:settingDialog"), true);
     Sleeper.sleep(300);// Wait a bit focus effects, just only use this for capture screenshot
     return findElementById("admin-setting-component:settingDialog");
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AnnouncementPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AnnouncementPage.java
index 400b11cd410..6ad614fe877 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AnnouncementPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/AnnouncementPage.java
@@ -3,10 +3,6 @@
 import static com.codeborne.selenide.Condition.appear;
 import static com.codeborne.selenide.Selenide.$;
 
-import org.openqa.selenium.By;
-
-import com.codeborne.selenide.WebDriverRunner;
-
 public class AnnouncementPage extends TemplatePage {
 
   @Override
@@ -18,16 +14,16 @@ public String getInfoSummary() {
     return $("div[id$='announcement-tab']").shouldBe(appear, DEFAULT_TIMEOUT).$("span.ui-messages-error-summary").shouldBe(appear, DEFAULT_TIMEOUT).getText();
   }
 
-  public void publish() {
-    waitForElementClickableThenClick("button[id$='publish-announcement']");
-  }
-
-  public void dePublish() {
-    waitForElementClickableThenClick("button[id$='delete-announcement']");
+  public void clickOnSwitchButton() {
+    waitForElementClickableThenClick("div[id$='announcement-toggle-switch']");
   }
 
   public void setAnnoucement(int Language, String content) {
     $("input[id$='" + Language + ":announcement-input']").sendKeys(content);
   }
+  
+  public void clickOnSaveButton() {
+    $("[id$='save-changes-announcement']").shouldBe(getClickableCondition()).click();
+  }
 
 }
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
index aa0604186ed..43c52b8b98c 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardConfigurationPage.java
@@ -406,8 +406,6 @@ public void openImportPublicDashboards() {
   }
 
   public SelenideElement getImportDialog() {
-    $("input[id$='dashboard-template-selection-component:dashboard-import-component:import-dashboard-form:dashboards-information-form:0:import-dashboard-title']")
-        .hover();
     return $("div[id$=':dashboard-import-dialog']");
   }
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardNewsWidgetPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardNewsWidgetPage.java
index 138026532ca..ad434100d7b 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardNewsWidgetPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/DashboardNewsWidgetPage.java
@@ -122,7 +122,7 @@ public void clickOnEditIconOfNews(int index) {
   }
 
   public SelenideElement getNewsItemIcon(int index) {
-    return getNewsItem(index).$(String.format(NEWS_ITEM_ATTR_FORMAT, index, "news-icon:awesome-icon-display"))
+    return getNewsItem(index).$(String.format(NEWS_ITEM_ATTR_FORMAT, index, "news-icon:current-icon-display"))
         .shouldBe(appear, DEFAULT_TIMEOUT);
   }
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewAbsencePage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewAbsencePage.java
index ab10c37e06f..aee6452d248 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewAbsencePage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewAbsencePage.java
@@ -74,7 +74,7 @@ public void proceed() {
 
   public void closeAddAbsenceDialog() {
     $("[id='absence-dialog_title']").click();
-    $("a[id*='close-add-absence-dialog']").shouldBe(appear, DEFAULT_TIMEOUT)
+    $("div[id='absence-dialog']").$("span.ui-icon-closethick").shouldBe(appear, DEFAULT_TIMEOUT)
         .shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("[id$='absence-dialog']").shouldBe(Condition.disappear, DEFAULT_TIMEOUT);
   }
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
index c916f51310e..43cf14d56b6 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/ProcessWidgetPage.java
@@ -112,7 +112,8 @@ public void addExternalLink(String name, String link, String iconClass, String i
 
     $("input[id$=':search-icon-name-field']").sendKeys(iconClass);
 
-    $("a[title='" + iconClass + "']").click();
+    $("div[id='process-widget:add-external-link-form:external-link-icon:icons-selection-form:icons']")
+        .$("a[title='" + iconClass + "']").click();
     $("div[id$='process-widget:add-external-link-form:external-link-icon:select-icon-dialog']")
         .shouldBe(Condition.disappear, DEFAULT_TIMEOUT);
 
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/UserProfilePage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/UserProfilePage.java
index 40e904afc0e..8548db251b2 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/UserProfilePage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/UserProfilePage.java
@@ -69,7 +69,7 @@ public void inputFormattingLanguage(String newLanguage) {
   }
 
   public String getLanguageSettingTitle() {
-    return findElementByCssSelector("h2[id$='language-setting-title']").getText();
+    return findElementByCssSelector("h5[id$='language-setting-title']").getText();
   }
 
   public void changeNewDashboardPageToCase() {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/AnnouncementTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/AnnouncementTest.java
index bb8196ebaf1..b8311da068d 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/AnnouncementTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/test/AnnouncementTest.java
@@ -28,8 +28,9 @@ public void testNotificationLocalizationWhenChangingLanguageSetting() {
     AnnouncementPage announcementPage = adminSettingsPage.openAnnouncementTab();
     announcementPage.setAnnoucement(0, "lies mich");
     announcementPage.setAnnoucement(1, "Readme1");
-    announcementPage.publish();
-    adminSettingsPage.clickOnbackToNewDashboardPageOnAdminSetting();
+    announcementPage.clickOnSwitchButton();
+    announcementPage.clickOnSaveButton();
+    adminSettingsPage.clickOnHomeLogo();
     newDashboardPage = new NewDashboardPage();
     UserProfilePage userProfilePage = newDashboardPage.openMyProfilePage();
     userProfilePage.selectLanguage(3);
@@ -47,7 +48,8 @@ public void testValidationForDefaultLanguage() {
     NewDashboardPage newDashboardPage = new NewDashboardPage();
     AdminSettingsPage adminSettingsPage = newDashboardPage.openAdminSettings();
     AnnouncementPage announcementPage = adminSettingsPage.openAnnouncementTab();
-    announcementPage.publish();
+    announcementPage.clickOnSwitchButton();
+    announcementPage.clickOnSaveButton();
     assertEquals("Announcement for application default language is required.", announcementPage.getInfoSummary());
   }
 
@@ -60,8 +62,9 @@ public void testShouldDisplayNotification() {
     assertTrue(announcementPage.isDisplayed());
 
     announcementPage.setAnnoucement(1, "Readme1");
-    announcementPage.publish();
-    adminSettingsPage.clickOnbackToNewDashboardPageOnAdminSetting();
+    announcementPage.clickOnSwitchButton();
+    announcementPage.clickOnSaveButton();
+    adminSettingsPage.clickOnHomeLogo();
     newDashboardPage = new NewDashboardPage();
     assertEquals("Readme1", newDashboardPage.getAnnouncementMessage());
   }
@@ -77,8 +80,9 @@ public void testDepublishNotification() {
     announcementPage.setAnnoucement(1, "Readme1");
     announcementPage.setAnnoucement(2, "Readme2");
     announcementPage.setAnnoucement(3, "Readme3");
-    announcementPage.publish();
-    announcementPage.dePublish();
+    announcementPage.clickOnSwitchButton();
+    announcementPage.clickOnSwitchButton();
+    announcementPage.clickOnSaveButton();
     assertTrue(newDashboardPage.isAnnouncementMessageNotDisplayed());
   }
 }
diff --git a/AxonIvyPortal/portal/cms/cms.yaml b/AxonIvyPortal/portal/cms/cms.yaml
index b729a8d7ebd..bd647254b3c 100644
--- a/AxonIvyPortal/portal/cms/cms.yaml
+++ b/AxonIvyPortal/portal/cms/cms.yaml
@@ -21,6 +21,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     editAbsence: Edit absence
     from: From
     noDeputy: No substitute
+    noPermissionToSeeThisArea: You do not have the required permission to see this area.
     period: Period
     personalTaskDuringAbsenceDeputies: Substitutes for personally assigned tasks during the absence
     personalTaskPermanentDeputies: Permanent substitutes for personally assigned tasks
@@ -135,7 +136,7 @@ ch.ivy.addon.portalkit.ui.jsf:
       announcementsDisabled: Announcements are disabled.
       announcementsEnabled: Announcements are enabled.
       defaultLanguageRequiredMessage: Announcement for application default language is required.
-      disable: Disable
+      disabled: Disabled
       enable: Enable
       information: You can announce a general information (e.g. Downtime, Changes, etc.) in this area. This message can be seen by all portal users.
       tabTitle: Announcements
@@ -450,7 +451,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     notAvailable: N/A
     note: NOTE
     numberOfSelectedFilter: selected filters
-    ok: Ok
+    ok: OK
     'on': 'on'
     pleaseAddDocument: Please add a document with the link above.
     pleaseAddNote: Please add a note with the link above.
@@ -465,7 +466,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     requiredFieldMessage: This field is required
     reserve: Reserve
     reset: Reset
-    resetSettingHeaderText: Reset setting?
+    resetSettingHeaderText: Reset setting
     resetTaskHeaderText: Reset this task?
     resetToDefaultMessage: This operation cannot be undone. Are you sure you want to reset to default settings?
     resetToStandardFilterHeaderText: 'Reset to standard filter? '
@@ -473,6 +474,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     restoreToDefaultChartHeaderText: Restore to default charts?
     role: Role
     save: Save
+    saveAll: Save all
     saveSuccessfully: Data saved successfully.
     search: Search
     second: second
@@ -512,7 +514,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     viewExpired: Your current view expired. You will be redirected to the home page.
     viewMode: View mode
     visible: Visible
-    warning: Warning
+    warning: Warning!
     welcomeToPortal: Welcome, please login
     wrongDateFormat: Please enter valid date.
     year: year
@@ -1017,7 +1019,7 @@ ch.ivy.addon.portalkit.ui.jsf:
   taskWarning:
     createdTaskLeave: 'You are about to leave this page. Please choose one of the following options:<UL><LI>&nbsp; &nbsp; Leave: Discard your changes and move to the selected page.<LI>&nbsp; &nbsp; Cancel: Continue working this task.</UL>'
     createdTaskLogout: 'You are about to leave this page. Please choose one of the following options:<UL><LI>&nbsp;Logout: Discard your changes and logout.<LI>&nbsp;Cancel: Continue working this task.</UL>'
-    resetParkTaskBeforeLeave: 'You are about to leave a task in progress. Please choose one of the following options:<UL><LI>Leave: Discard your changes and move to the selected page.<LI>Reserve: Discard your changes and keep the task in your task list.<LI>Cancel: Continue working this task.</UL>'
+    resetParkTaskBeforeLeave: '<h4>You are about to leave a task in progress.<br/>Please choose one of the following options:</h4><UL><LI>Leave: Discard your changes and move to the selected page.<LI>Reserve: Discard your changes and keep the task in your task list.<LI>Cancel: Continue working this task.</UL>'
     resetParkTaskBeforeLogout: 'You are about to leave a task in progress. Please choose one of the following options:<UL><LI>&nbsp; &nbsp; Logout: Discard your changes and logout.<LI>&nbsp; &nbsp; Reserve: Discard your changes and keep the task in your personal task list. Then logout.<LI>&nbsp; &nbsp;
       Cancel: Continue working this task.</UL>'
     taskNotFound: The task does not exist or you have insufficient rights to see this task.
diff --git a/AxonIvyPortal/portal/cms/cms_de.yaml b/AxonIvyPortal/portal/cms/cms_de.yaml
index dd91de781d5..9b2475ac196 100644
--- a/AxonIvyPortal/portal/cms/cms_de.yaml
+++ b/AxonIvyPortal/portal/cms/cms_de.yaml
@@ -23,6 +23,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     editAbsence: Abwesenheiten bearbeiten
     from: Von
     noDeputy: Kein Stellvertreter
+    noPermissionToSeeThisArea: Sie haben nicht die erforderliche Erlaubnis, dieses Gebiet zu sehen.
     period: Zeitraum
     personalTaskDuringAbsenceDeputies: Vertretungen für persönlich zugewiesene Aufgaben während der Abwesenheit
     personalTaskPermanentDeputies: Ständige Stellvertreter für persönlich zugewiesene Aufgaben
@@ -170,8 +171,8 @@ ch.ivy.addon.portalkit.ui.jsf:
       announcementsDisabled: Ankündigungen sind deaktiviert
       announcementsEnabled: Ankündigungen sind aktiviert
       defaultLanguageRequiredMessage: Ein Ankündigungstext in der standard Applikationssprache ist notwendig
-      disable: Deaktivieren
-      enable: Aktivieren
+      disabled: Deaktiviert
+      enable: Ansage einschalten
       information: Sie können eine allgemeine Ankündigung in diesem Bereich machen (z.B. Wartungsankündigung). Diese Nachricht kann von allen Benutzern gesehen werden.
       saveChanges: Änderungen speichern
       tabTitle: Ankündigungen
@@ -182,6 +183,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     applicationHint: Die Reihenfolge kann mit Drag & Drop geändert werden.
     applicationLinkRequiredMsg: Geben Sie den Portal Link an.
     applicationList:
+      addNewApplication: Neue Anwendung hinzufügen
       applicationSelectionHeader: Anwendung auswählen
       menuIcon: Menü Symbol
     applications: Anwendungen
@@ -520,7 +522,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     note: NOTIZ
     numberFromBiggerThanTo: Nach" muss größer sein als "Von".
     numberOfSelectedFilter: Ausgewählte Filter
-    ok: Ok
+    ok: OK
     'on': am
     pleaseAddDocument: Verwenden Sie bitte den Link oben, um Dokumente hochzuladen
     pleaseAddNote: Verwenden Sie bitte den Link oben, um Notizen hochzuladen
@@ -544,6 +546,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     restoreToDefaultChartHeaderText: Auf Standarddiagramme zurücksetzen?
     role: Rolle
     save: Speichern
+    saveAll: Speichern Sie alle
     saveSuccessfully: Daten erfolgreich gespeichert.
     search: Suche
     second: Sekunde
@@ -586,7 +589,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     viewExpired: Ihre aktuelle Bearbeitungsmaske ist abgelaufen und kann nicht weiter bearbeitet werden. Sie werden auf die Startseite umgeleitet.
     viewMode: Ansichtsmodus
     visible: Sichtbar
-    warning: Warnung
+    warning: Warnung!
     welcomeToPortal: Willkommen, bitte melden Sie sich an
     wrongDateFormat: Bitte geben Sie ein gültiges Datum ein.
     year: Jahr
@@ -1245,8 +1248,8 @@ ch.ivy.addon.portalkit.ui.jsf:
   taskWarning:
     createdTaskLeave: 'Sie verlassen die aktuelle Seite. Bitte wählen Sie eine der folgenden Optionen:<UL><LI>&nbsp; &nbsp; Verlassen: Ihre Änderungen verwerfen und zur ausgewählten Seite gehen.<LI>&nbsp; &nbsp; Abbrechen: Die Bearbeitung dieser Aufgabe fortsetzen.</UL>'
     createdTaskLogout: 'Sie verlassen die aktuelle Seite. Bitte wählen Sie eine der folgenden Optionen:<UL><LI>Abmelden: Ihre Änderungen verwerfen und abmelden.<LI>Abbrechen: Die Bearbeitung dieser Aufgabe fortsetzen.</UL>'
-    resetParkTaskBeforeLeave: 'Sie verlassen die aktuelle Aufgabe. Bitte wählen Sie eine der folgenden Optionen:<UL><LI> Verlassen: Ihre Änderungen verwerfen und zur ausgewählten Seite gehen.<LI> Reservieren: Ihre Änderungen verwerfen und die Aufgabe in Ihre Aufgabenliste verschieben<LI> Abbrechen: Die
-      Bearbeitung dieser Aufgabe fortsetzen.</UL>'
+    resetParkTaskBeforeLeave: '<h4>Sie verlassen die aktuelle Aufgabe.<br/>Bitte wählen Sie eine der folgenden Optionen:</h4><UL><LI> Verlassen: Ihre Änderungen verwerfen und zur ausgewählten Seite gehen.<LI> Reservieren: Ihre Änderungen verwerfen und die Aufgabe in Ihre Aufgabenliste verschieben<LI>
+      Abbrechen: Die Bearbeitung dieser Aufgabe fortsetzen.</UL>'
     resetParkTaskBeforeLogout: 'Sie verlassen die aktuelle Aufgabe. Bitte wählen Sie eine der folgenden Optionen:<UL><LI>&nbsp; &nbsp; Abmelden: Ihre Änderungen verwerfen und abmelden.<LI>&nbsp; &nbsp; Reservieren: Ihre Änderungen verwerfen und die Aufgabe in Ihre persönliche Aufgabenliste verschieben.
       Dann abmelden.<LI>&nbsp; &nbsp; Abbrechen: Die Bearbeitung dieser Aufgabe fortsetzen.</UL>'
     taskNotFound: Die Aufgabe existiert nicht oder Sie haben ungenügende Rechte, um diese Aufgabe zu sehen.
diff --git a/AxonIvyPortal/portal/cms/cms_en.yaml b/AxonIvyPortal/portal/cms/cms_en.yaml
index 709c359b613..889e5157848 100644
--- a/AxonIvyPortal/portal/cms/cms_en.yaml
+++ b/AxonIvyPortal/portal/cms/cms_en.yaml
@@ -23,6 +23,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     editAbsence: Edit absence
     from: From
     noDeputy: No substitute
+    noPermissionToSeeThisArea: You do not have the required permission to see this area.
     period: Period
     personalTaskDuringAbsenceDeputies: Substitutes for personally assigned tasks during the absence
     personalTaskPermanentDeputies: Permanent substitutes for personally assigned tasks
@@ -170,8 +171,8 @@ ch.ivy.addon.portalkit.ui.jsf:
       announcementsDisabled: Announcements are disabled.
       announcementsEnabled: Announcements are enabled.
       defaultLanguageRequiredMessage: Announcement for application default language is required.
-      disable: Disable
-      enable: Enable
+      disabled: Disabled
+      enable: Enable announcement
       information: You can announce a general information (e.g. Downtime, Changes, etc.) in this area. This message can be seen by all portal users.
       saveChanges: Save changes
       tabTitle: Announcements
@@ -182,6 +183,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     applicationHint: Use drag & drop to reorder.
     applicationLinkRequiredMsg: Please enter portal link.
     applicationList:
+      addNewApplication: Add new application
       applicationSelectionHeader: Select application
       menuIcon: Menu icon
     applications: Applications
@@ -519,7 +521,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     note: NOTE
     numberFromBiggerThanTo: '''To'' must be bigger than ''From''.'
     numberOfSelectedFilter: selected filters
-    ok: Ok
+    ok: OK
     'on': 'on'
     pleaseAddDocument: Please add a document with the link above.
     pleaseAddNote: Please add a note with the link above.
@@ -543,6 +545,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     restoreToDefaultChartHeaderText: Restore to default charts?
     role: Role
     save: Save
+    saveAll: Save all
     saveSuccessfully: Data saved successfully.
     search: Search
     second: second
@@ -585,7 +588,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     viewExpired: Your current view expired. You will be redirected to the home page.
     viewMode: View mode
     visible: Visible
-    warning: Warning
+    warning: Warning!
     welcomeToPortal: Welcome, please login
     wrongDateFormat: Please enter valid date.
     year: year
@@ -1247,7 +1250,7 @@ ch.ivy.addon.portalkit.ui.jsf:
   taskWarning:
     createdTaskLeave: 'You are about to leave this page. Please choose one of the following options:<UL><LI>&nbsp; &nbsp; Leave: Discard your changes and move to the selected page.<LI>&nbsp; &nbsp; Cancel: Continue working this task.</UL>'
     createdTaskLogout: 'You are about to leave this page. Please choose one of the following options:<UL><LI>&nbsp;Logout: Discard your changes and logout.<LI>&nbsp;Cancel: Continue working this task.</UL>'
-    resetParkTaskBeforeLeave: 'You are about to leave a task in progress. Please choose one of the following options:<UL><LI>Leave: Discard your changes and move to the selected page.<LI>Reserve: Discard your changes and keep the task in your task list.<LI>Cancel: Continue working this task.</UL>'
+    resetParkTaskBeforeLeave: '<h4>You are about to leave a task In progress.<br/>Please choose one of the following options:</h4><UL><LI>Leave: Discard your changes and move to the selected page.<LI>Reserve: Discard your changes and keep the task in your task list.<LI>Cancel: Continue working this task.</UL>'
     resetParkTaskBeforeLogout: 'You are about to leave a task in progress. Please choose one of the following options:<UL><LI>&nbsp; &nbsp; Logout: Discard your changes and logout.<LI>&nbsp; &nbsp; Reserve: Discard your changes and keep the task in your personal task list. Then logout.<LI>&nbsp; &nbsp;
       Cancel: Continue working this task.</UL>'
     taskNotFound: The task does not exist or you have insufficient rights to see this task.
diff --git a/AxonIvyPortal/portal/cms/cms_es.yaml b/AxonIvyPortal/portal/cms/cms_es.yaml
index 55bf027627b..b3b6d198312 100644
--- a/AxonIvyPortal/portal/cms/cms_es.yaml
+++ b/AxonIvyPortal/portal/cms/cms_es.yaml
@@ -23,6 +23,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     editAbsence: Editar ausencia
     from: Del
     noDeputy: Sin sustituto
+    noPermissionToSeeThisArea: Usted no tiene el permiso necesario para ver esta zona.
     period: Periodo
     personalTaskDuringAbsenceDeputies: Sustituye las tareas asignadas personalmente durante la ausencia
     personalTaskPermanentDeputies: Sustitución permanente de las tareas asignadas personalmente
@@ -170,8 +171,8 @@ ch.ivy.addon.portalkit.ui.jsf:
       announcementsDisabled: Los avisos están deactivados
       announcementsEnabled: Los avisos están activados
       defaultLanguageRequiredMessage: 'Texto requerido en el idioma estándard de la aplicación '
-      disable: Desactivar
-      enable: Activar
+      disabled: Deshabilitado
+      enable: Activar anuncio
       information: En esta área puede anunciar una información general (ej. mantenimiento, cambios en la aplicación, etc.). Este mensaje será visible para todos los usuarios.
       saveChanges: Guardar cambios
       tabTitle: Avisos
@@ -182,6 +183,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     applicationHint: Use arrastrar y soltar para reordenar.
     applicationLinkRequiredMsg: Por favor, introduzca el enlace al portal
     applicationList:
+      addNewApplication: Añadir nueva aplicación
       applicationSelectionHeader: Seleccionar aplicación
       menuIcon: Icono de menú
     applications: Aplicaciones
@@ -521,7 +523,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     note: Nota
     numberFromBiggerThanTo: Para" debe ser mayor que "De".
     numberOfSelectedFilter: Filtros seleccionados
-    ok: Ok
+    ok: OK
     'on': en
     pleaseAddDocument: Por favor agregue documentos usando el enlace superior
     pleaseAddNote: Por favor agregue notas usando el enlace superior
@@ -545,6 +547,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     restoreToDefaultChartHeaderText: ¿Restablecer a los gráficos por defecto?
     role: Rol
     save: Guardar
+    saveAll: Guardar todos
     saveSuccessfully: Datos guardados exitosamente.
     search: Buscar
     second: segundo
@@ -587,7 +590,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     viewExpired: Su vista actual expiró. Serás redirigido a la página de inicio.
     viewMode: Modo de visualización
     visible: Visible
-    warning: Advertencia
+    warning: Advertencia!
     welcomeToPortal: Bienvenido, por favor inicie su sesión
     wrongDateFormat: Por favor ingrese una fecha válida.
     year: Año
@@ -1244,8 +1247,8 @@ ch.ivy.addon.portalkit.ui.jsf:
   taskWarning:
     createdTaskLeave: 'Va a salir de esta página. Por favor selecione una de las siguientes opciones:<UL><LI>&nbsp; &nbsp; Salir: No guardará sus cambios y navegará a la página seleccionada<LI>&nbsp; &nbsp; Cancelar: Continue trabajando en esta tarea.</UL>'
     createdTaskLogout: 'Va a salir de esta página. Por favor selecione una de las siguientes opciones:<UL><LI>&nbsp; &nbsp; Cerrar sesión: No guardará sus cambios y se cerrará la sesión.<LI>&nbsp;Cancelar: Continue trabajando en esta tarea.</UL>'
-    resetParkTaskBeforeLeave: 'Va a salir de esta página. Por favor selecione una de las siguientes opciones:<UL><LI>Salir: No guardará sus cambios y navegará a la página seleccionada<LI>Reservar: No guardará sus cambios y esta tarea quedara reservada para usted.<LI>Cancelar: Continue trabajando en esta
-      tarea.</UL>'
+    resetParkTaskBeforeLeave: '<h4>Va a salir de esta página.<br/>Por favor selecione una de las siguientes opciones:</h4><UL><LI>Salir: No guardará sus cambios y navegará a la página seleccionada<LI>Reservar: No guardará sus cambios y esta tarea quedara reservada para usted.<LI>Cancelar: Continue trabajando
+      en esta tarea.</UL>'
     resetParkTaskBeforeLogout: 'Va a salir de esta página. Por favor selecione una de las siguientes opciones:<UL><LI>Salir: no guardará sus cambios y volverá a la página anterior.<LI>Reservar: No guardará sus cambios, volverá a la página anterior pero la tarea quedara reservada para usted.<LI>Cancelar:
       Continue trabajando en esta tarea.</UL>'
     taskNotFound: La tarea no existe o no los tiene derechos suficientes para ver esta tarea.
diff --git a/AxonIvyPortal/portal/cms/cms_fr.yaml b/AxonIvyPortal/portal/cms/cms_fr.yaml
index a4f0e89cadf..33ddc2a27aa 100644
--- a/AxonIvyPortal/portal/cms/cms_fr.yaml
+++ b/AxonIvyPortal/portal/cms/cms_fr.yaml
@@ -23,6 +23,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     editAbsence: Editer les absences
     from: Du
     noDeputy: Aucun substitut
+    noPermissionToSeeThisArea: Vous n'avez pas l'autorisation requise pour visiter cette zone.
     period: Période
     personalTaskDuringAbsenceDeputies: Remplacer les tâches assignées personnellement pendant l'absence
     personalTaskPermanentDeputies: Remplacement permanent des tâches confiées personnellement
@@ -170,8 +171,8 @@ ch.ivy.addon.portalkit.ui.jsf:
       announcementsDisabled: Les annonces sont désactivées.
       announcementsEnabled: Les annonces sont activées.
       defaultLanguageRequiredMessage: L'annonce de la langue par défaut de l'application est requise.
-      disable: Désactiver
-      enable: Activer
+      disabled: Désactivé
+      enable: Activer l'annonce
       information: Vous pouvez annoncer une information générale (par exemple, temps d'arrêt, modifications, etc.) dans cette zone. Ce message peut être vu par tous les utilisateurs du portail.
       saveChanges: Enregistrer les modifications
       tabTitle: Annonces
@@ -182,6 +183,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     applicationHint: L'ordre peut être modifié par glisser/déposer
     applicationLinkRequiredMsg: Veuillez rentrer le lien vers le Portail
     applicationList:
+      addNewApplication: Ajouter une nouvelle application
       applicationSelectionHeader: Sélectionner une application
       menuIcon: Icône de menu
     applications: Applications
@@ -518,7 +520,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     note: NOTE
     numberFromBiggerThanTo: L'adresse de destination doit être plus grande que l'adresse de départ.
     numberOfSelectedFilter: filtres sélectionnés
-    ok: Ok
+    ok: OK
     'on': le
     pleaseAddDocument: Veuillez ajouter un document avec le lien ci-dessus.
     pleaseAddNote: Veuillez ajouter une note avec le lien ci-dessus.
@@ -542,6 +544,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     restoreToDefaultChartHeaderText: Rétablir les graphiques par défaut ?
     role: Rôle
     save: Enregistrer
+    saveAll: Enregistrer tout
     saveSuccessfully: Les données ont été correctement enregistrées
     search: Recherche
     second: seconde
@@ -584,7 +587,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     viewExpired: Votre vue actuelle a expiré. Vous allez être redirigé vers la page d'accueil.
     viewMode: Mode d'affichage
     visible: Visible
-    warning: Attention
+    warning: Attention!
     welcomeToPortal: Bienvenue, veuillez vous connecter
     wrongDateFormat: Veuillez entrer une date valide
     year: an
@@ -1241,8 +1244,8 @@ ch.ivy.addon.portalkit.ui.jsf:
   taskWarning:
     createdTaskLeave: 'Vous êtes sur le point de quitter cette page. Choisissez l&apos;&apos;une des options suivantes : <UL><LI>    Quitter : abandonnez vos modifications et allez à la page choisie. <LI>    Annuler : continuez à travailler sur cette tâche. </UL>'
     createdTaskLogout: 'Vous êtes sur le point de quitter cette page. Choisissez l&apos;&apos;une des options suivantes : <UL> <LI> &nbsp; Déconnecter : abandonnez vos modifications et déconnectez-vous. <LI> &nbsp; Annuler : continuez à travailler sur cette tâche. </UL>'
-    resetParkTaskBeforeLeave: 'Vous êtes sur le point de laisser une tâche en cours. Choisissez l&apos;&apos;une des options suivantes : <UL> <LI> Quitter : abandonnez vos modifications et allez à la page choisie. <LI> Enregistrer : abandonnez vos modifications et conservez la tâche dans votre liste de
-      tâches personnelles. Ensuite déconnectez-vous. <LI> Annuler : continuez à travailler sur cette tâche. </UL>'
+    resetParkTaskBeforeLeave: '<h4>Vous êtes sur le point de laisser une tâche en cours.<br/>Choisissez l&apos;&apos;une des options suivantes :</h4><UL> <LI> Quitter : abandonnez vos modifications et allez à la page choisie. <LI> Enregistrer : abandonnez vos modifications et conservez la tâche dans votre
+      liste de tâches personnelles. Ensuite déconnectez-vous. <LI> Annuler : continuez à travailler sur cette tâche. </UL>'
     resetParkTaskBeforeLogout: 'Vous êtes sur le point de laisser une tâche en cours. Choisissez l&apos;&apos;une des options suivantes : <UL> <LI> &nbsp; &nbsp; Déconnecter : abandonnez vos modifications et déconnectez-vous. <LI> &nbsp; &nbsp; Enregistrer : annulez vos modifications et conservez la tâche
       dans votre liste de tâches personnelles. Ensuite, déconnectez-vous. <LI> &nbsp; &nbsp; Annuler : continuez à travailler sur cette tâche. </UL>'
     taskNotFound: cette tâche n'existe pas ou vous n'avez pas l'autorisation de la voir.
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bo/ExternalLinkProcessItem.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bo/ExternalLinkProcessItem.java
index cfea912f826..a24f681484b 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bo/ExternalLinkProcessItem.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/bo/ExternalLinkProcessItem.java
@@ -17,7 +17,7 @@
  */
 public class ExternalLinkProcessItem implements Process {
 
-  public static final String DEFAULT_ICON = "si si-hyperlink-3";
+  public static final String DEFAULT_ICON = "si-hyperlink-3";
   private ExternalLink externalLink;
   
   public ExternalLinkProcessItem(ExternalLink externalLink) {
diff --git a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/ivydata/searchcriteria/DashboardTaskSearchCriteria.java b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/ivydata/searchcriteria/DashboardTaskSearchCriteria.java
index 093aad06569..a9d5e450944 100644
--- a/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/ivydata/searchcriteria/DashboardTaskSearchCriteria.java
+++ b/AxonIvyPortal/portal/src/ch/ivy/addon/portalkit/ivydata/searchcriteria/DashboardTaskSearchCriteria.java
@@ -16,10 +16,12 @@
 
 import ch.ivy.addon.portalkit.dto.dashboard.ColumnModel;
 import ch.ivy.addon.portalkit.dto.dashboard.taskcolumn.TaskColumnModel;
+import ch.ivy.addon.portalkit.enums.DashboardColumnFormat;
 import ch.ivy.addon.portalkit.enums.DashboardColumnType;
 import ch.ivy.addon.portalkit.enums.DashboardStandardTaskColumn;
 import ch.ivyteam.ivy.workflow.query.CaseQuery;
 import ch.ivyteam.ivy.workflow.query.TaskQuery;
+import ch.ivyteam.ivy.workflow.query.TaskQuery.ICustomFieldOrderBy;
 import ch.ivyteam.ivy.workflow.query.TaskQuery.OrderByColumnQuery;
 
 public class DashboardTaskSearchCriteria {
@@ -198,6 +200,7 @@ public TaskSortingQueryAppender appendSorting(DashboardTaskSearchCriteria criter
       appendSortByExpiryDateIfSet(criteria);
       appendSortByStateIfSet(criteria);
       appendSortByPriorityIfSet(criteria);
+      appendSortByCustomFieldIfSet(criteria);
       if (criteria.isSortDescending() && order != null) {
         order.descending();
       }
@@ -252,6 +255,25 @@ private void appendSortByCreatedDateIfSet(DashboardTaskSearchCriteria criteria)
         sortStandardColumn = true;
       }
     }
+
+    private void appendSortByCustomFieldIfSet(DashboardTaskSearchCriteria criteria) {
+      if (!sortStandardColumn) {
+        String sortField = criteria.getSortField();
+        if (StringUtils.isNotBlank(sortField)) {
+          DashboardColumnFormat format =
+              columns.stream().filter(c -> StringUtils.equalsIgnoreCase(sortField, c.getField()))
+                  .map(ColumnModel::getFormat).findFirst().orElse(DashboardColumnFormat.STRING);
+          final ICustomFieldOrderBy customField = query.orderBy().customField();
+          if (format == DashboardColumnFormat.NUMBER) {
+            order = customField.numberField(sortField);
+          } else if (format == DashboardColumnFormat.TIMESTAMP) {
+            order = customField.timestampField(sortField);
+          } else {
+            order = customField.stringField(sortField);
+          }
+        }
+      }
+    }
   }
 
   public boolean getCanWorkOn() {
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
index e9e1e26332e..e529958c1ba 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/PortalDashboardConfiguration.xhtml
@@ -48,7 +48,16 @@
 
             <h:panelGroup id="dashboard-configuration-content" layout="block" rendered="#{!dashboardConfigurationBean.mobileDevice}"
               styleClass="ui-g-12 dashboard-configuration__content u-no-padding-top #{isPublicDashboard ? 'js-public-dashboard-configuration':'js-private-dashboard-configuration'}">
-
+              <h:panelGroup>
+                <div class="u-text-align-right ui-g-12">
+                  <p:commandButton id="create-dashboard-action" actionListener="#{dashboardConfigurationBean.addNewDashboard(isPublicDashboard)}"
+                    value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" 
+                    styleClass="dashboard-action-container-icon #{selectedDashboardTypeStyleClass} w-full primary-color-light-button"
+                    partialSubmit="true"
+                    oncomplete="PF('create-new-dashboard-dialog').show();"
+                    title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" />
+                </div>
+              </h:panelGroup>
               <ui:fragment>
                 <ic:ch.ivy.addon.portal.generic.dashboard.component.DashboardModification id="dashboard-modification-component"
                   listenerOnBackAction="#{dashboardConfigurationBean.backToConfigurationTab()}"
@@ -60,17 +69,6 @@
             <h:panelGroup layout="block" rendered="#{dashboardConfigurationBean.mobileDevice}" styleClass="ui-g-12">
               <h:outputText styleClass="ui-g-12" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/DoNotSupportMobile')}"/>
             </h:panelGroup>
-            <h:panelGroup>
-              <div class="u-text-align-right ui-g-12">
-                <p:commandButton id="create-dashboard-action" 
-                  actionListener="#{dashboardConfigurationBean.addNewDashboard(isPublicDashboard)}"
-                  value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" 
-                  styleClass="dashboard-action-container-icon #{selectedDashboardTypeStyleClass} w-full primary-color-light-button"
-                  partialSubmit="true"
-                  oncomplete="PF('create-new-dashboard-dialog').show();"
-                  title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/PortalDashboardConfiguration/NewDashboard')}" />
-              </div>
-            </h:panelGroup>
           </h:panelGroup>
 
         </div>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
index b9257e11009..d61422a46cf 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/DashboardModification.xhtml
@@ -39,49 +39,57 @@
           <p:tooltip for="dashboard-description-group" value="#{dashboard.description}" trackMouse="true" hideEvent="mouseleave click" styleClass="dashboard-configuration-tooltip"/>
         </h:panelGroup>
       </p:column>
-      
-      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}" width="#{dashboardModificationBean.hasExportDashboardPermission() ? '120' : '210'}">
+
+      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
+        width="#{dashboardModificationBean.hasExportDashboardPermission() ? '120' : '210'}">
         <div id="dashboard-configuration-action-group" class="dashboard-configuration-action-group">
-            <h:panelGroup layout="block">
-                <p:commandButton id="dashboard-configuration-action-button" icon="fa fa-ellipsis-h" styleClass="rounded-button icon-more-menu-button #{buttonStyle} ui-no-rounded-button-process-page mr-3"
-                     type="button"/>
-                <p:menu id="dashboard-configuration-action-menu" styleClass="w-12rem" overlay="true" trigger="dashboard-configuration-action-button" my="right top" at="right bottom">
-                    <p:menuitem id="edit" process="@this" actionListener="#{dashboardModificationBean.openDashboardDetailDialog(dashboard)}"
-                        icon="si si-graphic-tablet-drawing-pen" styleClass="dashboard-configuration-action-menu-icon" update="#{cc.clientId}:configuration-dashboard-detail-component:dashboard-detail-form"
-                        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}" oncomplete="PF('configuration-dashboard-detail-dialog').show()"
-                        target="_blank" resetValues="true" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
-                        rendered="true"/>
-                    <p:menuitem id="configure-dashboard" process="@this" actionListener="#{dashboardModificationBean.navigateToDashboardDetailsPage(dashboard.id)}"
-                        icon="si si-cog" update="@this" styleClass="dashboard-configuration-action-menu-icon"
-                        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}"
-                        rendered="true" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}"/>
-                     <p:menuitem id="export-dashboard" styleClass="pr-0 pt-0 pb-0" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}">
-                       <h:form styleClass="dashboard-configuration__export-button-form w-full" rendered="#{dashboardModificationBean.hasExportDashboardPermission()}">
-                         <p:commandButton id="export-dashboard" styleClass=" action-column-icon-button export-dashboard ui-no-rounded-button-process-page flex w-full" icon="si si-download-bottom"
-                           title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}"
-                           process="@this" update="@this" immediate="true" ajax="false" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}">
-                           <p:fileDownload value="#{dashboardModificationBean.exportToJsonFile(dashboard)}" />
-                         </p:commandButton>
-                        </h:form>
-                    </p:menuitem>
-                    <p:menuitem id="share-dashboard" rendered="#{dashboardModificationBean.isShowShareButtonOnConfig(isPublicDashboard)}"
-                          styleClass="rounded-button ui-button-outlined"
-                          actionListener="#{dashboardModificationBean.initShareDashboardLink(dashboard)}"
-                          oncomplete="PF('share-dashboard-dialog').show()" title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}"
-                          icon="si si-share" update="#{cc.clientId}:share-dashboard-component:share-dashboard-dialog"
-                          value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}" global="false" />
-                    <p:menuitem id="delete-dashboard" process="@this"
-                          styleClass="rounded-button ui-button-outlined ui-button-danger color-destroy" icon="si si-bin-1"
-                          actionListener="#{dashboardModificationBean.onSelectedDeleteDashboard(dashboard)}"
-                          update="dashboard-modification-component:remove-dashboard-dialog"
-                          oncomplete="PF('remove-dashboard-dialog').show()" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-                          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}" />
-                </p:menu>
-              </h:panelGroup>
-              <h:panelGroup styleClass=" ui-button-outlined action-column-icon-button u-mar-right-5">
-                <i id="reorder-button-#{dashboard.id}" class="si si-navigation-menu dashboard-icon-drag-drop" />
-               </h:panelGroup>
+          <h:panelGroup layout="block">
+            <p:commandButton id="dashboard-configuration-action-button" icon="fa fa-ellipsis-h"
+              styleClass="rounded-button icon-more-menu-button #{buttonStyle} ui-no-rounded-button-process-page mr-3" type="button" />
+            <p:menu id="dashboard-configuration-action-menu" styleClass="w-auto" overlay="true" trigger="dashboard-configuration-action-button"
+              my="right top" at="right bottom">
+              <p:menuitem id="edit" process="@this" actionListener="#{dashboardModificationBean.openDashboardDetailDialog(dashboard)}"
+                icon="si si-graphic-tablet-drawing-pen" styleClass="dashboard-configuration-action-menu-icon"
+                update="#{cc.clientId}:configuration-dashboard-detail-component:dashboard-detail-form"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}" oncomplete="PF('configuration-dashboard-detail-dialog').show()"
+                target="_blank" resetValues="true" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}" rendered="true" />
+              <p:menuitem id="configure-dashboard" process="@this"
+                actionListener="#{dashboardModificationBean.navigateToDashboardDetailsPage(dashboard.id)}" icon="si si-cog" update="@this"
+                styleClass="dashboard-configuration-action-menu-icon"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}" rendered="true"
+                title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/configuration/configuration')}" />
+              <p:menuitem id="export-dashboard" styleClass="dashboard-configuration-action-menu-icon"
+                title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}"
+                icon="si si-download-bottom"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/DashboardConfiguration/ExportDashboard')}"
+                rendered="#{dashboardModificationBean.hasExportDashboardPermission()}"
+                onclick="PF('exportDashboardBtn').jq.click()"/>
+              <p:menuitem id="share-dashboard" rendered="#{dashboardModificationBean.isShowShareButtonOnConfig(isPublicDashboard)}"
+                styleClass="rounded-button ui-button-outlined" actionListener="#{dashboardModificationBean.initShareDashboardLink(dashboard)}"
+                oncomplete="PF('share-dashboard-dialog').show()"
+                title="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}" icon="si si-share"
+                update="#{cc.clientId}:share-dashboard-component:share-dashboard-dialog"
+                value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portal/generic/dashboard/component/DashboardModification/Share')}" global="false" />
+              <p:menuitem id="delete-dashboard" process="@this" styleClass="rounded-button ui-button-outlined ui-button-danger color-destroy"
+                icon="si si-bin-1" actionListener="#{dashboardModificationBean.onSelectedDeleteDashboard(dashboard)}"
+                update="dashboard-modification-component:remove-dashboard-dialog" oncomplete="PF('remove-dashboard-dialog').show()"
+                title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}" />
+            </p:menu>
+          </h:panelGroup>
+          <h:panelGroup styleClass=" ui-button-outlined action-column-icon-button u-mar-right-5">
+            <i id="reorder-button-#{dashboard.id}" class="si si-navigation-menu dashboard-icon-drag-drop" />
+          </h:panelGroup>
         </div>
+          <h:form style="display:none"
+            rendered="#{dashboardModificationBean.hasExportDashboardPermission()}">
+            <p:commandButton id="export-dashboard"
+              widgetVar="exportDashboardBtn"
+              style="display:none"
+              update="@this" immediate="true" ajax="false">
+              <p:fileDownload value="#{dashboardModificationBean.exportToJsonFile(dashboard)}" />
+            </p:commandButton>
+          </h:form>
       </p:column>
     </p:dataTable>
   </h:panelGroup>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/Absence.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/Absence.xhtml
index fc459b95944..f7735c46365 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/Absence.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/Absence.xhtml
@@ -12,7 +12,7 @@
     modal="true"
     dynamic="true"
     resizable="false"
-    closable="false"
+    closable="true"
     appendTo="@(body)"
     position="center"
     responsive="true"
@@ -82,17 +82,13 @@
       </h:panelGroup>
 
       <div class="u-text-align-right ui-g-12">
-        <p:commandLink id="close-add-absence-dialog" rendered="#{data.isCreateMode}"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('absence-dialog').hide();"
-          styleClass="u-mar-right-15" />
-
         <p:commandLink id="close-edit-absence-dialog" actionListener="#{logic.cancel}" rendered="#{!data.isCreateMode}"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
           oncomplete="PF('absence-dialog').hide();" styleClass="u-mar-right-15" />
 
         <p:commandButton process="@form" id="save-absence" disabled="#{data.validationError}"
+          styleClass="w-full"
           oncomplete="if (args &amp;&amp; !args.validationFailed)PF('absence-dialog').hide();"
-          icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}" actionListener="#{logic.saveAbsence}"
           update="@(.absence-table) absence-messages @(.substitute-table) @(.substitution-table)" />
       </div>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml
index 1a00ca34112..2442cc63140 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/AbsenceManagement.xhtml
@@ -9,10 +9,12 @@
     <ui:define name="pageContent">
 
       <h:form id="absences-management-form" styleClass="absences-management-form ">
-        <div id="absences-management-container" class="ui-g absences-management-container">
+        <div id="absences-management-container" class="ui-g-12 absences-management-container">
           <div class="ui-g-12">
-            <p:growl id="absences-management-info" showDetail="true" severity="info" for="absences-management-message" sticky="true" redisplay="false">
-              <p:autoUpdate/>
+            <p:growl id="absences-management-info" showDetail="true"
+              severity="info" for="absences-management-message"
+              sticky="true" redisplay="false">
+              <p:autoUpdate />
             </p:growl>
           </div>
 
@@ -25,150 +27,145 @@
                 </div>
 
                 <div class="ui-g-12 u-no-padding-top">
-                  <div class="ui-g-4 ui-xl-4 ui-lg-4 ui-md-12 ui-sm-12 u-padding-0 display-flex-center" jsf:rendered="#{data.isSupervisor}">
-                    <ic:com.axonivy.portal.components.UserSelection id="user-absence-selection-component"
-                      componentId="user-absence"
-                      selectedUser="#{data.selectedAbsenceUser}"
-                      completeMethod="#{logic.autoCompleteForUserOnApp}"
-                      isRenderedMessage="false"
-                      label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedUser')}"
-                      labelPanelStyleClass="ui-g-4 ui-sm-12"
-                      autoCompletePanelStyleClass="ui-g-8 ui-sm-12 ui-fluid"
-                      autoCompleteStyleClass="absence-user-selection"
-                      scrollHeight="200"
-                      hasCustomizedSelectionList="true"
-                      size="35">
-                      <p:column>
-                        <pc:securityMemberNameAndAvatar displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForUserDTO(user)}"
-                          securityMember="#{user}" />
-                      </p:column>
-                      <f:facet name="event">
-                        <p:ajax event="itemSelect" listener="#{logic.findAbsencesAndSubstitutes}" partialSubmit="true"
-                          update="@(.absence-table) @(.substitute-table) @(.substitution-table) absences-management-form" />
-                      </f:facet>
-                    </ic:com.axonivy.portal.components.UserSelection>
-                  </div>
-                  <div class="#{data.isSupervisor ? 'ui-g-8 ui-xl-8 ui-lg-8 ui-md-12 ui-sm-12' : 'ui-g-12'} add-absence-panel display-flex-center">
-                    <div class="ui-g-6 ui-lg-6 ui-md-8 ui-sm-11 u-padding-0 u-text-align-left">
-                      <p:selectBooleanCheckbox id="show-absence-in-the-past"
-                        value="#{data.absenceInThePastShown}"
-                        styleClass="show-absence-in-the-past-panel"
-                        itemLabel="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/showAbsencesInThePast')}">
-                        <p:ajax event="change"
-                          listener="#{logic.findAbsencesAndSubstitutes()}"
-                          update="@(.absence-table)"
-                          partialSubmit="true" />
-                      </p:selectBooleanCheckbox>
+                  <div class="flex flex-wrap align-items-end">
+                    <div class="ui-g-6 ui-sm-12 u-padding-0 ui-g-4 ui-xl-4 ui-lg-4 ui-md-12" jsf:rendered="#{data.isSupervisor}">
+                      <ic:com.axonivy.portal.components.UserSelection id="user-absence-selection-component"
+                        componentId="user-absence"
+                        selectedUser="#{data.selectedAbsenceUser}"
+                        completeMethod="#{logic.autoCompleteForUserOnApp}"
+                        isRenderedMessage="false"
+                        label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedUser')}"
+                        labelPanelStyleClass="ui-g-4 ui-sm-12 pr-3"
+                        autoCompletePanelStyleClass="ui-g-8 ui-sm-12 ui-fluid"
+                        autoCompleteStyleClass="absence-user-selection"
+                        scrollHeight="200"
+                        hasCustomizedSelectionList="true" size="35">
+                        <p:column>
+                          <pc:securityMemberNameAndAvatar
+                            displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForUserDTO(user)}"
+                            securityMember="#{user}" />
+                        </p:column>
+                        <f:facet name="event">
+                          <p:ajax event="itemSelect" listener="#{logic.findAbsencesAndSubstitutes}" partialSubmit="true"
+                            update="@(.absence-table) @(.substitute-table) @(.substitution-table) absences-management-form" />
+                        </f:facet>
+                      </ic:com.axonivy.portal.components.UserSelection>
                     </div>
-
-                    <div class="ui-g-6 ui-lg-6 ui-md-4 ui-sm-1 u-padding-0">
-                        <p:commandButton id="add-absence"
-                          styleClass="Fright ui-sm-hidden"
-                          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/addAbsence')}"
-                          process="@this"
-                          oncomplete="PF('absence-dialog').show()"
-                          actionListener="#{logic.add}"
-                          icon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
-                          update="absence-dialog absence-form"
-                          resetValues="true"
-                          rendered="#{absenceManagementBean.absencesCreatable || absenceManagementBean.ownAbsencesCreatable}" />
-                        <!-- Show on Mobile screen - Only show icon -->
-                        <p:commandButton id="add-absence-icon-only"
-                          styleClass="Fright ui-md-hidden ui-lg-hidden ui-xl-hidden"
-                          process="@this"
-                          oncomplete="PF('absence-dialog').show()"
-                          actionListener="#{logic.add}"
-                          icon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
-                          update="@widgetVar(absence-dialog)"
-                          rendered="#{absenceManagementBean.absencesCreatable || absenceManagementBean.ownAbsencesCreatable}" />
+                    <div class="#{data.isSupervisor ? ' ui-sm-12 ui-g-6' : 'ui-g-6'} add-absence-panel pl-0">
+                      <div class="ui-fluid flex justify-content-start gap-3 align-items-center h-full">
+                        <h:panelGroup layout="block">
+                          <p:outputLabel id="show-absence-in-the-past-label"
+                            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/showAbsencesInThePast')}"
+                            for="show-absence-in-the-past" />
+                        </h:panelGroup>
+                        <p:toggleSwitch id="show-absence-in-the-past" value="#{data.absenceInThePastShown}"
+                          styleClass="show-absence-in-the-past-panel">
+                          <p:ajax event="change" listener="#{logic.findAbsencesAndSubstitutes()}"
+                            update="@(.absence-table)" partialSubmit="true" />
+                        </p:toggleSwitch>
                       </div>
+                    </div>
                   </div>
 
-                  <div class="ui-g-12 u-no-padding-top">
-                    <p:dataTable id="absence-table"
-                      styleClass="absence-table"
+                  <div class="ui-g-12 u-no-padding-top mb-2 pl-0">
+                    <p:dataTable id="absence-table" styleClass="absence-table pl-0"
                       emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}"
-                      reflow="true"
-                      value="#{data.displayedAbsences}"
-                      var="absence"
-                      paginator="true"
-                      rows="4"
-                      paginatorAlwaysVisible="false"
-                      paginatorPosition="bottom"
-                      pageLinks="3"
+                      reflow="true" value="#{data.displayedAbsences}" var="absence" paginator="true" rows="4"
+                      paginatorAlwaysVisible="false" paginatorPosition="bottom" pageLinks="3"
                       paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
-                      currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}" lazy="false">
+                      currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}"
+                      lazy="false">
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/period')}"
                         sortBy="#{absence.period}" styleClass="absence-period">
-                        <h:outputText value="#{absence.period}" styleClass="absence-column-value"/>
+                        <h:outputText value="#{absence.period}" styleClass="absence-column-value" />
                       </p:column>
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/comment')}"
-                        sortBy="#{absence.comment}"
-                        styleClass="u-truncate-text">
-                        <h:outputText value="#{absence.comment}" title="#{absence.comment}" styleClass="absence-column-value"/>
+                        sortBy="#{absence.comment}" styleClass="u-truncate-text">
+                        <h:outputText value="#{absence.comment}" title="#{absence.comment}"
+                          styleClass="absence-column-value" />
                       </p:column>
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
                         styleClass="absences-table-action-column">
-                        <div class="absence-column-value">
-                          <p:commandLink id="edit-absence" styleClass="absences-table-action-column-icon-button"
+                        <p:commandButton id="absence-action-button" icon="si si-navigation-menu-horizontal"
+                          styleClass="rounded-button icon-more-menu-button ui-no-rounded-button-process-page"
+                          type="button" />
+                        <p:menu class="absence-column-value" overlay="true" trigger="absence-action-button"
+                          my="right top" at="right bottom" styleClass="settings-action-menu">
+                          <p:menuitem id="edit-absence"
                             actionListener="#{logic.editAbsence(absence)}"
-                            oncomplete="PF('absence-dialog').show()"
-                            update="@widgetVar(absence-dialog)"
-                            title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
+                            oncomplete="PF('absence-dialog').show()" update="@widgetVar(absence-dialog)"
+                            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
+                            icon="si si-graphic-tablet-drawing-pen" process="@this"
                             rendered="#{absenceManagementBean.isAbsenceEditable(absence) }">
-                            <span class="si si-graphic-tablet-drawing-pen" />
-                          </p:commandLink>
-                          <p:commandLink id="delete-absence"
-                            actionListener="#{logic.preDelete(absence)}"
+                          </p:menuitem>
+                          <p:menuitem id="delete-absence" actionListener="#{logic.preDelete(absence)}"
                             oncomplete="PF('deleteAbsenceConfirmation').show();"
-                            styleClass="absences-table-action-column-icon-button"
                             rendered="#{absenceManagementBean.isAbsenceDeletable(absence)}"
-                            title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}">
-                            <span class="si si-bin-1" />
-                          </p:commandLink>
-                        </div>
+                            icon="si si-bin-1" process="@this"
+                            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}">
+                          </p:menuitem>
+                        </p:menu>
                       </p:column>
                     </p:dataTable>
                   </div>
+                  <div class="ui-fluid u-padding-0">
+                    <p:commandButton id="add-absence"
+                      styleClass="Fright ui-sm-hidden primary-color-light-button"
+                      value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/addAbsence')}"
+                      process="@this"
+                      oncomplete="PF('absence-dialog').show()"
+                      actionListener="#{logic.add}"
+                      update="absence-dialog absence-form"
+                      resetValues="true"
+                      rendered="#{absenceManagementBean.absencesCreatable || absenceManagementBean.ownAbsencesCreatable}" />
+                    <!-- Show on Mobile screen - Only show icon -->
+                    <p:commandButton id="add-absence-icon-only"
+                      styleClass="Fright ui-md-hidden ui-lg-hidden ui-xl-hidden"
+                      process="@this"
+                      oncomplete="PF('absence-dialog').show()"
+                      actionListener="#{logic.add}"
+                      icon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
+                      update="@widgetVar(absence-dialog)"
+                      rendered="#{absenceManagementBean.absencesCreatable || absenceManagementBean.ownAbsencesCreatable}" />
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
+              <!--     END OF ABSENCE    ============ -->
 
-          <!-- Deputy setting card -->
-          <div class="ui-g-12" id="deputy-setting" jsf:rendered="#{absenceManagementBean.canReadSubstitute(data.selectedAbsenceUser)}">
-            <div class="ui-g portal-section-container card">
-              <div class="ui-g-12">
+              <!-- Deputy setting ============ -->
+              <div id="deputy-setting" class="ui-g-12" jsf:rendered="#{absenceManagementBean.canReadSubstitute(data.selectedAbsenceUser)}">
                 <div class="setting-header ui-g-12 u-no-padding-bottom">
-                  <h2>#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/definedDeputies' : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/myDeputies')}</h2>
+                  <h3 class="mb-0">#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/definedDeputies'
+                    : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/myDeputies')}</h3>
                 </div>
-
                 <div id="username-deputy" class="ui-g-12 u-no-padding-top">
-                  <div class="ui-g-12">
+                  <div class="ui-g-12 pl-0">
                     <p:dataTable id="substitute-table"
+                      rendered="#{absenceManagementBean.canReadSubstitute(data.selectedAbsenceUser)}"
                       emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}"
-                      styleClass="substitute-table"
-                      reflow="true"
-                      value="#{data.deputyRoles}"
-                      var="deputyRole"
+                      styleClass="substitute-table" reflow="true"
+                      value="#{data.deputyRoles}" var="deputyRole"
                       paginator="true" rows="4"
                       paginatorAlwaysVisible="false"
-                      paginatorPosition="bottom"
-                      pageLinks="3"
+                      paginatorPosition="bottom" pageLinks="3"
                       paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
-                      currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}" lazy="false">
+                      currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}"
+                      lazy="false">
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/applicationAndRole')}"
                         sortBy="#{deputyRole.deputyRoleDisplayName}" sortOrder="ASC">
-                        <h:outputText value="#{deputyRole.deputyRoleDisplayName}" styleClass="substition-role-display-name absence-column-value" />
+                        <h:outputText value="#{deputyRole.deputyRoleDisplayName}"
+                          styleClass="substition-role-display-name absence-column-value" />
                         <span class="substition-role-type" deputy-role-type="#{deputyRole.deputyRoleType.toString()}" />
                       </p:column>
-                      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/deputies')}"
-                        styleClass="ui-fluid">
+                      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/deputies')}" styleClass="ui-fluid">
                         <div class="absence-column-value">
-                          <c:set var="deputiesDisplayNames" value="#{securityMemberDisplayNameFormatBean.joinSecurityMemberNames(deputyRole.deputies)}" />
-                          <p:commandLink id="selected-deputies-link" immediate="true" styleClass="task-responsible-link"
+                          <c:set var="deputiesDisplayNames"
+                            value="#{securityMemberDisplayNameFormatBean.joinSecurityMemberNames(deputyRole.deputies)}" />
+                          <p:commandLink id="selected-deputies-link" immediate="true"
+                            styleClass="task-responsible-link"
                             value="#{not empty deputiesDisplayNames ? deputiesDisplayNames : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/noDeputy')}"
-                            actionListener="#{logic.initSelectedDeputies(deputyRole)}" oncomplete="PF('choose-deputy-dialog').show();"
+                            actionListener="#{logic.initSelectedDeputies(deputyRole)}"
+                            oncomplete="PF('choose-deputy-dialog').show();"
                             update="deputy-selection-form:deputy-selection-panel" global="false"
                             disabled="#{!absenceManagementBean.canCreateSubstitute(data.selectedAbsenceUser)}">
                             <i class="si si-notes-quill" />
@@ -179,75 +176,69 @@
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
+              <!--     END OF DEPUTY ============ -->
 
-          <!-- Deputy-For setting card -->
-          <div class="ui-g-12" id="substitute" jsf:rendered="#{absenceManagementBean.substitutionCapable}">
-            <div class="ui-g portal-section-container card">
-              <div id="deputy-for-container" class="ui-g-12">
+              <!-- Deputy-For setting-->
+              <div id="deputy-for-container" class="ui-g-12" jsf:rendered="#{absenceManagementBean.substitutionCapable}">
                 <div class="setting-header ui-g-12 u-no-padding-bottom">
-                  <h2>#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedDeputyFor' : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/deputyFor')}</h2>
+                  <h3 class="mb-0">#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedDeputyFor'
+                    : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/deputyFor')}</h3>
                 </div>
-
                 <div class="ui-g-12 u-no-padding-bottom">
-                  <p:dataTable id="substitution-table"
+                  <p:dataTable id="substitution-table" rendered="#{absenceManagementBean.substitutionCapable}"
                     emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}"
-                    styleClass="substitution-table ui-g-12 u-no-padding-top"
-                    reflow="true"
-                    value="#{data.substitutions}"
-                    var="substitution"
-                    paginator="true"
-                    rows="4"
-                    paginatorAlwaysVisible="false"
-                    paginatorPosition="bottom"
-                    pageLinks="3"
+                    styleClass="substitution-table ui-g-12 u-no-padding-top pl-0"
+                    reflow="true" value="#{data.substitutions}"
+                    var="substitution" paginator="true" rows="4"
+                    paginatorAlwaysVisible="false" paginatorPosition="bottom" pageLinks="3"
                     sortMode="single"
                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
-                    currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}" lazy="false">
-                    <p:column headerText="#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedDeputyFor' : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/deputyFor')}"
+                    currentPageReportTemplate="{currentPage} #{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/noteHistory/curentReportOf')} {totalPages}"
+                    lazy="false">
+                    <p:column
+                      headerText="#{ivy.cms.co(data.isSupervisor ? '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/selectedDeputyFor' : '/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/deputyFor')}"
                       sortBy="#{securityMemberDisplayNameFormatBean.generateBriefDisplayNameForSecurityMember(substitution.ownerUser, substitution.ownerUser.name)}">
                       <pc:securityMemberNameAndAvatar
-                          displayName="#{securityMemberDisplayNameFormatBean.generateBriefDisplayNameForSecurityMember(substitution.ownerUser, substitution.ownerUser.name)}"
-                          securityMember="#{substitution.ownerUser}" />
+                        displayName="#{securityMemberDisplayNameFormatBean.generateBriefDisplayNameForSecurityMember(substitution.ownerUser, substitution.ownerUser.name)}"
+                        securityMember="#{substitution.ownerUser}" />
                     </p:column>
-                    <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/applicationAndRole')}"
+                    <p:column
+                      headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/applicationAndRole')}"
                       sortBy="#{substitution.substitionRoleDisplayName}">
-                      <h:outputText value="#{substitution.substitionRoleDisplayName}" styleClass="substition-role-display-name absence-column-value"/>
+                      <h:outputText
+                        value="#{substitution.substitionRoleDisplayName}"
+                        styleClass="substition-role-display-name absence-column-value" />
                     </p:column>
-                    <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/nextAbsence')}"
+                    <p:column
+                      headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceManagement/nextAbsence')}"
                       styleClass="deputy-for-next-absence"
                       sortBy="#{absenceManagementBean.findNextAbsence(substitution.ownerUser)}">
-                      <h:outputText value="#{absenceManagementBean.findNextAbsence(substitution.ownerUser)}" styleClass="absence-column-value"/>
+                      <h:outputText
+                        value="#{absenceManagementBean.findNextAbsence(substitution.ownerUser)}"
+                        styleClass="absence-column-value" />
                     </p:column>
                   </p:dataTable>
                 </div>
               </div>
-            </div>
-          </div>
-
-          <div class="user-profile-footer ui-g-12">
-            <p:commandLink id="cancel-subsitute"
-              rendered="#{absenceManagementBean.substitutionCapable}"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-              actionListener="#{logic.backToHome()}"
-              styleClass="u-mar-right-15" />
+              <!-- END OF Deputy-For setting card -->
 
-            <p:commandButton id="save-substitute" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
-              rendered="#{absenceManagementBean.substitutionCapable}"
-              icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
-              actionListener="#{logic.saveSubstitutes}"
-              process="absences-management-form"
-              partialSubmit="true" update="absences-management-form"
-              styleClass="u-mar-right-5" />
+              <!-- FOOTER BUTTONS -->
+              <div class="user-profile-footer ui-g-12 relative">
+                <p:commandLink id="cancel-subsitute"
+                  rendered="#{absenceManagementBean.substitutionCapable}"
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+                  actionListener="#{logic.backToHome()}"
+                  styleClass="u-mar-right-15" />
 
-            <p:commandButton id="close-subsitute"
-              type="button"
-              rendered="#{!absenceManagementBean.substitutionCapable}"
-              icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}">
-              <p:ajax event="click" listener="#{logic.backToHome()}" global="false" />
-            </p:commandButton>
+                <p:commandButton id="save-substitute"
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/saveAll')}"
+                  rendered="#{absenceManagementBean.substitutionCapable}"
+                  actionListener="#{logic.saveSubstitutes}"
+                  process="absences-management-form"
+                  partialSubmit="true" update="absences-management-form"
+                  styleClass="u-mar-right-5" />
+              </div>
+            </div>
           </div>
         </div>
       </h:form>
@@ -279,7 +270,7 @@
         <ui:include src="Absence.xhtml" />
       </c:if>
 
-      <p:dialog id="choose-deputy-dialog" styleClass="choose-deputy-dialog"
+      <p:dialog id="choose-deputy-dialog" styleClass="choose-deputy-dialog w-3"
         header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/selectDeputies')}" widgetVar="choose-deputy-dialog"
         modal="true" appendTo="@(body)" resizable="false" responsive="true">
         <p:ajax event="close" listener="#{logic.closeDialog}" global="false" immediate="true" />
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/SelectDeputy.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/SelectDeputy.xhtml
index ef86dc4c03e..005c7686ab6 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/SelectDeputy.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/AbsenceManagement/SelectDeputy.xhtml
@@ -23,35 +23,33 @@
           </f:facet>
         </ic:com.axonivy.portal.components.UserSelection>
 
-        <p:commandButton id="add-deputy-button" styleClass="add-deputy-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}"
-          disabled="#{data.selectedDeputy == null}" icon="#{visibilityBean.generateButtonIcon('si si-add-small')}" actionListener="#{logic.addDeputy()}" global="false"
+        <p:commandButton id="add-deputy-button" styleClass="add-deputy-button px-2" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}"
+          disabled="#{data.selectedDeputy == null}" actionListener="#{logic.addDeputy()}" global="false"
           update="error-message selected-deputy-fieldset" ignoreAutoUpdate="true" />
       </h:panelGroup>
 
-      <p:fieldset id="selected-deputy-fieldset" styleClass="selected-deputy-panel"
-        legend="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/AbsenceAndDeputy/selectedDeputies')}">
-        <ui:repeat var="deputy" value="#{data.selectedDeputies}">
-          <p:panelGrid id="selected-deputy-panel" styleClass="deputy-selection" columns="3" columnClasses="deputy-type-col,deputy-name-col" layout="tabular">
-            <p:column>
-              <h:outputText rendered="#{not avatarBean.isShowAvatar()}" id="deputy-type-icon" class="si si-single-neutral-actions" />
-            </p:column>
-            <p:column>
-              <pc:securityMemberNameAndAvatar
-                displayName="#{securityMemberDisplayNameFormatBean.generateBriefDisplayNameForSecurityMember(deputy, deputy.getName())}"
-                securityMember="#{deputy}" />
-            </p:column>
-            <p:column>
-              <p:commandLink id="delete-deputy" styleClass="si si-bin-1 delete-deputy" actionListener="#{logic.removeDeputy(deputy)}"
-                update="deputy-selection-form" ariaLabel="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"/>
-            </p:column>
-          </p:panelGrid>
-        </ui:repeat>
+      <p:fieldset id="selected-deputy-fieldset" styleClass="selected-deputy-panel m-0">
+        <p:dataTable id="selected-deputy-panel" styleClass="deputy-selection"
+          emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}"
+          value="#{data.selectedDeputies}" var="deputy">
+          <p:column headerText="Selected subtitutes">
+            <h:outputText rendered="#{not avatarBean.isShowAvatar()}"
+              id="deputy-type-icon" class="si si-single-neutral-actions" />
+            <pc:securityMemberNameAndAvatar
+              displayName="#{securityMemberDisplayNameFormatBean.generateBriefDisplayNameForSecurityMember(deputy, deputy.getName())}"
+              securityMember="#{deputy}" />
+          </p:column>
+          <p:column headerText="Action" styleClass="w-1 text-center">
+            <p:commandLink id="delete-deputy" styleClass="si si-bin-1 delete-deputy"
+              actionListener="#{logic.removeDeputy(deputy)}" update="deputy-selection-form"
+              ariaLabel="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}" />
+          </p:column>
+        </p:dataTable>
       </p:fieldset>
 
       <p:outputPanel styleClass="u-text-align-right">
-        <p:commandButton id="save-deputy-button" styleClass="save-deputy-button"
+        <p:commandButton id="save-deputy-button" styleClass="save-deputy-button w-full"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}" actionListener="#{logic.updateSelectedDeputies()}"
-          icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
           oncomplete="PF('choose-deputy-dialog').hide();" update="#{data.selectedDeputyRoleId}">
           <p:resetInput target="choose-deputy-dialog" />
         </p:commandButton>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/PortalManagement/PortalManagement.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/PortalManagement/PortalManagement.xhtml
index 9727722c02f..35d280b08dc 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/PortalManagement/PortalManagement.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/PortalManagement/PortalManagement.xhtml
@@ -12,19 +12,11 @@
         <div class="ui-g-12">
           <p:messages redisplay="false" for="portal-management-messages-information" closable="false" id="portal-management-messages"/>
         </div>
-
         <div id="admin-settings-container" class="admin-settings-container ui-g-12">
-          <div class="card ui-g">
+          <div class="card ui-g admin-setting-card">
             <ic:ch.ivy.addon.portalkit.admin.AdminSettings id="admin-setting-component" />
           </div>
         </div>
-        <div class="admin-settings-footer ui-g-12 u-text-align-right MarTop10">
-          <p:commandButton id="back-to-home-button"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/errorPage/backToHomePage')}"
-            icon="si si-house-chimney-2"
-            actionListener="#{logic.backToHome}"
-            title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/errorPage/backToHomePage')}"/>
-        </div>
       </h:panelGroup>
     </ui:define>
   </ui:composition>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/UserProfile/UserProfile.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/UserProfile/UserProfile.xhtml
index 0ab7e9a5729..4e675ca2d19 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/UserProfile/UserProfile.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/setting/UserProfile/UserProfile.xhtml
@@ -1,286 +1,197 @@
-<html xmlns="http://www.w3.org/1999/xhtml"
-   xmlns:f="http://xmlns.jcp.org/jsf/core"
-   xmlns:h="http://xmlns.jcp.org/jsf/html"
-   xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
-   xmlns:ic="http://ivyteam.ch/jsf/component"
-   xmlns:p="http://primefaces.org/ui"
-   xmlns:pe="http://primefaces.org/ui/extensions"
-   xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
+  xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:ic="http://ivyteam.ch/jsf/component" xmlns:p="http://primefaces.org/ui"
+  xmlns:pe="http://primefaces.org/ui/extensions" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
 <h:body>
-   <ui:composition template="/layouts/BasicTemplate.xhtml">
-      <ui:param name="viewName" value="USER_PROFILE" />
-      <ui:define name="title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/userProfile/myProfileTitle')}</ui:define>
-      <ui:define name="pageContent">
-         <f:event listener="#{logic.initSettings}"
-            type="preRenderComponent" />
-         <f:event listener="#{userProfileBean.init}"
-            type="preRenderComponent" />
+  <ui:composition template="/layouts/BasicTemplate.xhtml">
+    <ui:param name="viewName" value="USER_PROFILE" />
+    <ui:define name="title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/userProfile/myProfileTitle')}</ui:define>
+    <ui:define name="pageContent">
+      <f:event listener="#{logic.initSettings}" type="preRenderComponent" />
+      <f:event listener="#{userProfileBean.init}" type="preRenderComponent" />
 
-         <h:form id="my-profile-form" styleClass="my-profile-form ">
-            <div id="my-profile-container"
-               class="ui-g my-profile-container">
-               <div class="ui-g-12">
-                  <p:messages id="errors-message" severity="warn,error"
-                     showDetail="true" escape="false" closable="true" />
-                  <p:growl id="user-setting-info" showDetail="true"
-                     severity="info" for="user-profile-message"
-                     sticky="true" />
-               </div>
+      <h:form id="my-profile-form" styleClass="my-profile-form ">
+        <div id="my-profile-container" class="ui-g my-profile-container">
+          <div class="ui-g-12">
+            <p:messages id="errors-message" severity="warn,error" showDetail="true" escape="false" closable="true" />
+            <p:growl id="user-setting-info" showDetail="true" severity="info" for="user-profile-message" sticky="true" />
+          </div>
 
-               <!-- General Setting card -->
-               <div class="ui-g-6 ui-lg-6 ui-md-12 ui-sm-12">
-                  <div class="portal-section-container card general-section-container">
-                     <div class="ui-g-12">
-                        <div class="setting-header ui-g-12">
-                           <h2>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/General')}</h2>
-                        </div>
+          <div class="card">
+            <div class="flex user-profile-card">
+              <div class="ui-g-6 ui-sm-12 pr-5 user-profile-card-left">
 
-                <div class="ui-g-12 u-no-padding-top">
-                  <span class="ui-g-12">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Homepage')}</span>
-                  <div class="ui-g ui-g-12 u-padding-0">
-                    <div class="ui-g-6 ui-sm-12 ui-fluid">
-                      <p:selectOneMenu id="homepage" value="#{data.selectedHomepage}" converter="pojoConverter">
-                        <f:selectItems value="#{data.homepages}" var="homepage" itemValue="#{homepage}"
-                          itemLabel="#{homepage.label}" />
-                      </p:selectOneMenu>
-                    </div>
+                <!-- General Setting -->
+                <h:panelGroup layout="block" class="w-full my-profile-block">
+                  <div class="setting-header">
+                    <h5 class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/General')}</h5>
                   </div>
-                </div>
-              </div>
+                  <div class="user-profile-setting-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Homepage')}</div>
+                  <div class="ui-fluid">
+                    <p:selectOneMenu id="homepage" value="#{data.selectedHomepage}" converter="pojoConverter">
+                      <f:selectItems value="#{data.homepages}" var="homepage" itemValue="#{homepage}" itemLabel="#{homepage.label}" />
+                    </p:selectOneMenu>
+                  </div>
+                </h:panelGroup>
 
-                     <!-- Process List Setting -->
-                     <h:panelGroup layout="block" styleClass="ui-g-12"
-                       rendered="#{userProfileBean.canAccessProcessList()}">
-                        <div class="setting-header ui-g-12">
-                           <h2>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/ProcessList')}</h2>
-                        </div>
-                        <div class="ui-g-12 u-no-padding-top">
-                           <span class="ui-g-12">#{ivy.cms.co("/ch.ivy.addon.portalkit.ui.jsf/MyProfile/defaultViewMode")}</span>
-                           <div class="ui-g-6 ui-sm-12 ui-fluid">
-                              <p:selectOneMenu
-                                 id="process-mode-selection"
-                                 value="#{data.selectedProcessMode}">
-                                 <f:selectItems
-                                    value="#{data.processModes}"
-                                    var="mode" itemValue="#{mode}"
-                                    itemLabel="#{mode}" />
-                              </p:selectOneMenu>
-                           </div>
-                        </div>
-                     </h:panelGroup>
+                <!-- Process List Setting -->
+                <h:panelGroup layout="block" styleClass="w-full my-profile-block" rendered="#{userProfileBean.canAccessProcessList()}">
+                  <div class="setting-header">
+                    <h5 class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/ProcessList')}</h5>
+                  </div>
+                  <div class="user-profile-setting-title">#{ivy.cms.co("/ch.ivy.addon.portalkit.ui.jsf/MyProfile/defaultViewMode")}</div>
+                  <div class="ui-fluid">
+                    <p:selectOneMenu id="process-mode-selection" value="#{data.selectedProcessMode}">
+                      <f:selectItems value="#{data.processModes}" var="mode" itemValue="#{mode}" itemLabel="#{mode}" />
+                    </p:selectOneMenu>
+                  </div>
+                </h:panelGroup>
 
-                     <!-- Task List Setting -->
-                     <h:panelGroup layout="block" styleClass="ui-g-12"
-                       rendered="#{userProfileBean.canAccessTaskList()}">
-                        <div class="setting-header ui-g-12">
-                           <h2>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/TaskList')}</h2>
-                        </div>
-                        <div class="ui-g-12 u-no-padding-top ui-fluid">
-                           <span class="ui-g-12">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/SortFieldSelections/defaultSortFieldLabel')}</span>
-                           <div class="ui-g-6 ui-sm-12">
-                              <p:selectOneMenu
-                                 id="task-sort-field-selection"
-                                 value="#{data.selectedTaskListSortField}"
-                                 styleClass="sort-field-selection my-profile-selection-menu">
-                                 <f:selectItems
-                                    value="#{data.taskListSortFields}"
-                                    var="taskSortField"
-                                    itemValue="#{taskSortField}"
-                                    itemLabel="#{userProfileBean.getDisplayNameOfTaskSortField(taskSortField)}" />
-                              </p:selectOneMenu>
-                           </div>
-                           <div class="ui-g-6 ui-sm-12">
-                              <p:selectOneMenu
-                                 id="task-sort-direction-selection"
-                                 value="#{data.selectedTaskListSortDirection}"
-                                 styleClass="my-profile-selection-menu">
-                                 <f:selectItems
-                                    value="#{data.sortDirections}"
-                                    var="direction"
-                                    itemValue="#{direction}"
-                                    itemLabel="#{userProfileBean.getDisplayNameOfTaskSortDirection(direction)}" />
-                              </p:selectOneMenu>
-                           </div>
-                        </div>
-                     </h:panelGroup>
+                <!-- Task List Setting -->
+                <h:panelGroup layout="block" styleClass="w-full my-profile-block" rendered="#{userProfileBean.canAccessTaskList()}">
+                  <div class="setting-header">
+                    <h5 class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/TaskList')}</h5>
+                  </div>
+                  <div class="ui-fluid">
+                    <div class="user-profile-setting-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/SortFieldSelections/defaultSortFieldLabel')}</div>
+                    <div class="flex flex-wrap justify-content-between gap-2">
+                      <div class="flex flex-1">
+                        <p:selectOneMenu id="task-sort-field-selection" value="#{data.selectedTaskListSortField}"
+                          styleClass="sort-field-selection my-profile-selection-menu">
+                          <f:selectItems value="#{data.taskListSortFields}" var="taskSortField" itemValue="#{taskSortField}"
+                            itemLabel="#{userProfileBean.getDisplayNameOfTaskSortField(taskSortField)}" />
+                        </p:selectOneMenu>
+                      </div>
+                      <div class="flex flex-1">
+                        <p:selectOneMenu id="task-sort-direction-selection" value="#{data.selectedTaskListSortDirection}"
+                          styleClass="my-profile-selection-menu">
+                          <f:selectItems value="#{data.sortDirections}" var="direction" itemValue="#{direction}"
+                            itemLabel="#{userProfileBean.getDisplayNameOfTaskSortDirection(direction)}" />
+                        </p:selectOneMenu>
+                      </div>
+                    </div>
+                  </div>
+                </h:panelGroup>
 
-                     <!-- Case List Setting -->
-                     <h:panelGroup layout="block" styleClass="ui-g-12"
-                       rendered="#{userProfileBean.canAccessCaseList()}">
-                        <div class="setting-header ui-g-12">
-                           <h2>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/CaseList')}</h2>
-                        </div>
-                        <div class="ui-g-12 u-no-padding-top ui-fluid">
-                           <span class="ui-g-12">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/SortFieldSelections/defaultSortFieldLabel')}</span>
-                           <div class="ui-g-6 ui-sm-12">
-                              <p:selectOneMenu
-                                 id="case-sort-field-selection"
-                                 value="#{data.selectedCaseListSortField}"
-                                 styleClass="sort-field-selection my-profile-selection-menu">
-                                 <f:selectItems
-                                    value="#{data.caseListSortFields}"
-                                    var="caseSortField"
-                                    itemValue="#{caseSortField}"
-                                    itemLabel="#{userProfileBean.getDisplayNameOfCaseSortField(caseSortField)}" />
-                              </p:selectOneMenu>
-                           </div>
-                           <div class="ui-g-6 ui-sm-12">
-                              <p:selectOneMenu
-                                 id="case-sort-direction-selection"
-                                 value="#{data.selectedCaseListSortDirection}"
-                                 styleClass="ui-sm-12 my-profile-selection-menu">
-                                 <f:selectItems
-                                    value="#{data.sortDirections}"
-                                    var="direction"
-                                    itemValue="#{direction}"
-                                    itemLabel="#{userProfileBean.getDisplayNameOfCaseSortDirection(direction)}" />
-                              </p:selectOneMenu>
-                           </div>
-                        </div>
-                     </h:panelGroup>
+                <!-- Case List Setting -->
+                <h:panelGroup layout="block" styleClass="w-full my-profile-block" rendered="#{userProfileBean.canAccessCaseList()}">
+                  <div class="setting-header">
+                    <h5 class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/CaseList')}</h5>
                   </div>
-               </div>
+                  <div class="ui-fluid">
+                    <div class="user-profile-setting-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/SortFieldSelections/defaultSortFieldLabel')}</div>
+                    <div class="flex flex-wrap justify-content-between gap-2">
+                      <div class="flex flex-1">
+                        <p:selectOneMenu id="case-sort-field-selection" value="#{data.selectedCaseListSortField}"
+                          styleClass="sort-field-selection my-profile-selection-menu">
+                          <f:selectItems value="#{data.caseListSortFields}" var="caseSortField" itemValue="#{caseSortField}"
+                            itemLabel="#{userProfileBean.getDisplayNameOfCaseSortField(caseSortField)}" />
+                        </p:selectOneMenu>
+                      </div>
+                      <div class="flex flex-1">
+                        <p:selectOneMenu id="case-sort-direction-selection" value="#{data.selectedCaseListSortDirection}"
+                          styleClass="ui-sm-12 my-profile-selection-menu">
+                          <f:selectItems value="#{data.sortDirections}" var="direction" itemValue="#{direction}"
+                            itemLabel="#{userProfileBean.getDisplayNameOfCaseSortDirection(direction)}" />
+                        </p:selectOneMenu>
+                      </div>
+                    </div>
+                  </div>
+                </h:panelGroup>
+              </div>
+              <p:divider layout="vertical" styleClass="responsive-divider"/>
 
-               <!-- Language and Notification setting card -->
-               <div class="ui-g-6 ui-lg-6 ui-md-12 ui-sm-12">
+              <div class="ui-g-6 pl-5 ui-sm-12 relative user-profile-card-right">
+                <h:panelGroup id="language-setting-container" layout="block" styleClass="w-full my-profile-block">
+                  <div class="setting-header">
+                    <h5 id="language-setting-title" class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Language')}</h5>
+                  </div>
+                  <!-- Language Setting -->
+                  <div class="language-selection w-full">
+                    <div id="language-selection-label" class="language-selection-label user-profile-setting-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Language')}</div>
+                    <div class="ui-fluid">
+                      <p:selectOneMenu id="language-selection" value="#{data.language.userLanguage}">
+                        <f:selectItems value="#{data.language.languages}" />
+                      </p:selectOneMenu>
+                    </div>
+                  </div>
+                  <!-- Format language Setting -->
+                  <div class="language-selection w-full">
+                    <div id="format-language-selection-label" class="language-selection-label user-profile-setting-title mt-3">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/FormattingLanguage')}</div>
+                    <div class="ui-fluid">
+                      <p:autoComplete id="format-language-selection" scrollHeight="210" dropdown="true" size="35"
+                        completeMethod="#{logic.completeFormattingLanguage}" value="#{data.language.itemFormattingLanguage}" var="language"
+                        itemValue="#{language}" itemLabel="#{language.label}" converter="pojoConverter" cache="true" maxResults="100"
+                        moreText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/MoreItemsAvailable')}" dynamic="true"
+                        appendTo="@(.portal-layout-container)" />
+                    </div>
+                  </div>
+                </h:panelGroup>
 
-                  <div class="portal-section-container card">
-                     <div id="language-setting-container"
-                        class="ui-g-12 ui-fluid">
-                        <div class="setting-header ui-g-12">
-                           <h2 id="language-setting-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Language')}</h2>
+                <!-- Notification Setting -->
+                <h:panelGroup id="notification-channels" class="w-full my-profile-block">
+                  <div class="u-mar-right-5">
+                    <p:growl for="notification-Message">
+                      <p:autoUpdate />
+                    </p:growl>
+                  </div>
+                  <div class="setting-header">
+                    <h5 class="font-semibold">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/notificationChannels')}</h5>
+                  </div>
+                  <div class="w-full">
+                    <p:dataTable paginator="true" rows="10" paginatorPosition="bottom" paginatorAlwaysVisible="false" var="event"
+                      value="#{userProfileBean.events}" id="notification-Channels-Table" rowIndexVar="rowIndex" lazy="false" styleClass="ui-fluid">
+                      <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/event')}" sortBy="#{event.displayName}">
+                        <h:outputText id="event" value="#{event.displayName}" />
+                        <p:tooltip for="my-profile-form:notification-Channels-Table:#{rowIndex}:event" value="#{event.description}" position="top" />
+                      </p:column>
+                      <p:columns id="channels" var="channel" value="#{userProfileBean.channels}">
+                        <div>
+                          <f:facet name="header">
+                            <div class="flex">
+                              <i class="#{channel.channel.displayIcon()} table-icon mr-2 mt-1" />
+                              <h:outputText value="#{channel.channel.displayName()}">
+                              </h:outputText>
+                            </div>
+                          </f:facet>
                         </div>
-                           <!-- Language Setting -->
-                        <div class="ui-g ui-g-12 u-padding-0">
-                           <div
-                              class="language-selection ui-g-6 ui-sm-12 u-no-padding-top u-no-padding-right">
-                              <h:outputText
-                                 id="language-selection-label"
-                                 styleClass="language-selection-label ui-g-12"
-                                 value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/Language')}" />
-                              <div class="ui-g-12">
-                                 <p:selectOneMenu
-                                    id="language-selection"
-                                    value="#{data.language.userLanguage}">
-                                    <f:selectItems
-                                       value="#{data.language.languages}" />
-                                 </p:selectOneMenu>
-                              </div>
-                           </div>
-                           <!-- Format language Setting -->
-                           <div
-                              class="language-selection ui-g-6 ui-sm-12 u-no-padding-top u-no-padding-left">
-                              <h:outputText
-                                 id="format-language-selection-label"
-                                 styleClass="language-selection-label ui-g-12"
-                                 value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/FormattingLanguage')}" />
-                              <div class="ui-g-12">
-                                 <p:autoComplete
-                                    id="format-language-selection"
-                                    scrollHeight="210" dropdown="true"
-                                    size="35"
-                                    completeMethod="#{logic.completeFormattingLanguage}"
-                                    value="#{data.language.itemFormattingLanguage}"
-                                    var="language"
-                                    itemValue="#{language}"
-                                    itemLabel="#{language.label}"
-                                    converter="pojoConverter"
-                                    cache="true" maxResults="100"
-                                    moreText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/MoreItemsAvailable')}"
-                                    dynamic="true"
-                                    appendTo="@(.portal-layout-container)" />
-                              </div>
-                           </div>
+                        <c:set var="subscription" value="#{channel.getSubscription(event)}" />
+                        <div class="flex align-content-center gap-3">
+                          <i class="flex align-items-center si table-icon si-#{subscription.icon} subscription-icon " title="#{subscription.title}" />
+                          <p:triStateCheckbox id="subscriptionCheckbox" value="#{subscription.stateAsString}" styleClass="flex align-items-center">
+                            <p:ajax event="change" global="false"
+                              update="#{p:resolveFirstComponentWithId('notification-Channels-Table', view).clientId}"
+                              listener="#{channel.setSubscriptionIconAndTitle(event.event)}" />
+                          </p:triStateCheckbox>
                         </div>
-                     </div>
+                      </p:columns>
+                    </p:dataTable>
                   </div>
-                  
-                                  <!--Notification Channels -->
-                  <div class="portal-section-container card">
-                     <div id="notification-channels" class="ui-g-12">
-                        <div class="ui-g-12">
-                           <div class="u-mar-right-5">
-                              <p:growl for="notification-Message">
-                                 <p:autoUpdate />
-                              </p:growl>
-                           </div>
-                               <div class="setting-header ui-g-12">
-                                  <h2>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/notificationChannels')}</h2>
-                               </div>
-                              <div class="ui-g-12">
-                              <p:dataTable paginator="true" rows="10"
-                                 paginatorPosition="bottom"
-                                 paginatorAlwaysVisible="false"
-                                 var="event"
-                                 value="#{userProfileBean.events}"
-                                 id="notification-Channels-Table"
-                                 rowIndexVar="rowIndex"
-                                 lazy="false" styleClass="ui-fluid">
-                                 <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/MyProfile/event')}"
-                                    sortBy="#{event.displayName}">
-                                    <h:outputText id="event" value="#{event.displayName}" />
-                                    <p:tooltip for ="my-profile-form:notification-Channels-Table:#{rowIndex}:event" value="#{event.description}" position="top"/>
-                                 </p:column>
-                                 <p:columns id="channels" var="channel"
-                                    value="#{userProfileBean.channels}">
-                                    <div>
-                                       <f:facet name="header">
-                                          <div class="flex">
-                                             <i
-                                                class="#{channel.channel.displayIcon()} table-icon mr-2 mt-1" />
-                                             <h:outputText
-                                                value="#{channel.channel.displayName()}">
-                                             </h:outputText>
-                                          </div>
-                                       </f:facet>
-                                    </div>
-                                    <c:set var="subscription"
-                                       value="#{channel.getSubscription(event)}" />
-                                    <div class="flex">
-                                       <i
-                                          class="mr-2 mt-1 si table-icon si-#{subscription.icon} subscription-icon "
-                                          title="#{subscription.title}" />
-                                       <p:triStateCheckbox
-                                          id="subscriptionCheckbox"
-                                          value="#{subscription.stateAsString}">
-                                          <p:ajax event="change" global="false"
-                                             update="#{p:resolveFirstComponentWithId('notification-Channels-Table', view).clientId}"
-                                             listener="#{channel.setSubscriptionIconAndTitle(event.event)}" />
-                                       </p:triStateCheckbox>
-                                    </div>
-                                 </p:columns>
-                              </p:dataTable>
-                              </div>
-                              <div>
-                                 <div class="u-text-align-right ui-g-12">
-                                    <p:commandButton id="restore-to-default-button" icon="#{visibilityBean.generateButtonIcon('si si-button-refresh-arrows')}"
-                                       value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/restoreDefault')}"
-                                       global="false"
-                                       actionListener="#{userProfileBean.resetAllChannel}" update="#{p:resolveFirstComponentWithId('notification-Channels-Table', view).clientId}"
-                                       styleClass="setting-tab-action-buttons" />
-                                </div>
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-                   </div>
-
-               <div class="user-profile-footer ui-g-12">
-                  <p:commandLink
-                     value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-                     styleClass="u-mar-right-15"
-                     actionListener="#{logic.backToHome}" />
+                  <div class="u-text-align-right mt-3 restore-to-default-button">
+                    <p:commandLink id="restore-to-default-button" icon="#{visibilityBean.generateButtonIcon('si si-undo')}" 
+                      global="false"
+                      actionListener="#{userProfileBean.resetAllChannel}"
+                      update="#{p:resolveFirstComponentWithId('notification-Channels-Table', view).clientId}"
+                      styleClass="ui-button-flat setting-tab-action-buttons font-medium" >
+                        <i class="si si-undo"/>
+                        <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/restoreDefault')}</span>
+                      </p:commandLink>
+                      
+                  </div>
+                </h:panelGroup>
 
-                  <p:commandButton id="save-settings"
-                     value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
-                     icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
-                     actionListener="#{userProfileBean.saveAllChannel}"
-                     action="#{logic.save}"
-                     update="errors-message" />
-               </div>
+                <div class="user-profile-footer w-full">
+                  <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" styleClass="u-mar-right-15"
+                    actionListener="#{logic.backToHome}" />
+                  <p:commandButton id="save-settings" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/saveAll')}"
+                    actionListener="#{userProfileBean.saveAllChannel}"
+                    action="#{logic.save}" update="errors-message" />
+                </div>
+              </div>
             </div>
-         </h:form>
-      </ui:define>
-   </ui:composition>
+          </div>
+        </div>
+      </h:form>
+    </ui:define>
+  </ui:composition>
 </h:body>
 </html>
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml
index b86912dce50..11215bd628c 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettings.xhtml
@@ -13,32 +13,43 @@
     <span class="si si-alert-circle" />
     <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/permission/noPermission')}" />
   </p:outputPanel>
-
+  <h:panelGroup styleClass="w-full pt-2 pb-2 mb-4" layout="block">
+    <div class="flex justify-content-between flex-wrap">
+      <div class="flex align-items-center justify-content-center admin-setting-header">
+         <h3>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/applicationMenuHeader/adminSettings')}</h3>
+      </div>
+      <h:panelGroup layout="block" class="applications-setting-info-circle">
+        <h:outputText id="applications-setting-info" styleClass="applications-setting-info si si-information-circle" />
+        <p:tooltip for="applications-setting-info" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applicationHint')}" />
+      </h:panelGroup>
+    </div>
+  </h:panelGroup>
   <!-- TAB VIEW -->
-  <p:tabView id="adminTabView" rendered="#{permissionBean.hasAdminPermission()}" activeIndex="0" dynamic="true">
+    <script>
+      function onTabChange() {
+        var tabIndex = PF('adminTabView').getActiveIndex();
+        if(tabIndex !== 0) {
+          $('.applications-setting-info-circle').hide();
+        } else {
+          $('.applications-setting-info-circle').show();
+        }
+      }
+    </script>
+  <p:tabView id="adminTabView" rendered="#{permissionBean.hasAdminPermission()}" activeIndex="0" dynamic="true" styleClass="admin-setting-tab" widgetVar="adminTabView">
     <f:event listener="#{adminSettingBean.initAdminTabViewConfig()}" type="preRenderComponent"/>
-    <p:ajax event="tabChange" listener="#{adminSettingBean.onTabChange}"/>
+    <p:ajax event="tabChange" listener="#{adminSettingBean.onTabChange}" oncomplete="onTabChange()"/>
 
     <!-- APPLICATION TAB -->
     <p:tab id="application-tab" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applications')}">
       <h:form prependId="false" id="applicationForm">
-        <p:outputPanel styleClass="ui-messages ui-widget">
-          <p:outputPanel styleClass="ui-messages-info ui-corner-all">
-            <span class="ui-messages-info-icon" />
-            <h:outputText styleClass="ui-messages-info-summary"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applicationHint')}" />
-          </p:outputPanel>
-        </p:outputPanel>
-
         <h:panelGroup layout="block" styleClass="application-tab-action-buttons">
           <p:commandButton id="add-application-btn" actionListener="#{logic.addNewApp}" oncomplete="PF('appDialog').show()" resetValues="true"
-            styleClass="new-app" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/new')}" icon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
+            styleClass="new-app-btn primary-color-light-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applicationList/addNewApplication')}"
             update=":#{p:resolveFirstComponentWithId('appDialog', view).clientId}" />
         </h:panelGroup>
-
         <!-- Applications Table -->
         <h:panelGroup id="applicationPanel" layout="block">
-          <p:dataTable value="#{data.applicationList}" var="app" id="applicationTable" draggableRows="true"
+          <p:dataTable value="#{data.applicationList}" var="app" id="applicationTable" draggableRows="true" rowDragSelector="i.si-navigation-menu"
             reflow="true" styleClass="admin-table application-table" widgetVar="applicationTable"
             emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/noRecordsFound')}" lazy="false">
             <p:ajax event="rowReorder" listener="#{adminSettingBean.onApplicationReorder}" update="applicationTable" />
@@ -54,18 +65,31 @@
 
             <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
               styleClass="u-text-align-center settings-table-action-buttons">
-              <p:commandLink id="edit" oncomplete="PF('appDialog').show()" styleClass="action-column-icon-button"
-                actionListener="#{logic.editApplication(app)}" process="@this"
-                title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
-                update="@this :#{p:resolveFirstComponentWithId('appDialog', view).clientId}">
-                <span class="si si-graphic-tablet-drawing-pen" />
-              </p:commandLink>
-              <p:commandLink id="delete" process="@this" styleClass="action-column-icon-button"
-                actionListener="#{logic.submitDeleteApp(app)}" update=":#{p:resolveFirstComponentWithId('deleteConfirmationDialog', view).clientId}"
-                oncomplete="PF('deleteConfirmation').show()"
-                title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}">
-                <span class="si si-bin-1" />
-              </p:commandLink>
+              <p:commandButton id="applications-action-button" icon="fa fa-ellipsis-h"
+                styleClass="rounded-button icon-more-menu-button ui-no-rounded-button-process-page" type="button"/>
+              <p:menu id="applications-action-menu" overlay="true"
+                trigger="applications-action-button"
+                my="right top" at="right bottom"
+                styleClass="applications-action-menu">
+                <p:menuitem id="edit-application"
+                  styleClass=""
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
+                  icon="si si-graphic-tablet-drawing-pen"
+                  oncomplete="PF('appDialog').show()"
+                  actionListener="#{logic.editApplication(app)}"
+                  update=":#{p:resolveFirstComponentWithId('appDialog', view).clientId}"
+                  process="@this" />
+                <p:menuitem id="delete-application"
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+                  icon="si si-bin-1"
+                  oncomplete="PF('deleteConfirmation').show()"
+                  actionListener="#{logic.submitDeleteApp(app)}"
+                  update=":#{p:resolveFirstComponentWithId('deleteConfirmationDialog', view).clientId}"
+                  process="@this"/>
+              </p:menu>
+              <h:panelGroup styleClass=" ui-button-outlined action-column-icon-button u-mar-right-5">
+                <i id="reorder-button-#{dashboard.id}" class="si si-navigation-menu dashboard-icon-drag-drop" />
+              </h:panelGroup>
             </p:column>
           </p:dataTable>
         </h:panelGroup>
@@ -75,8 +99,9 @@
     <!-- SETTINGS TAB -->
     <p:tab id="setting-tab" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/setting')}">
       <h:form prependId="false" id="settingForm">
-        <h:panelGroup layout="block" styleClass="setting-tab-action-buttons">
-          <p:commandButton id="restore-all-to-default-button" icon="#{visibilityBean.generateButtonIcon('si si-button-refresh-arrows')}"
+        <h:panelGroup layout="block" styleClass="setting-tab-action-buttons text-right">
+          <p:commandButton id="restore-all-to-default-button" icon="#{visibilityBean.generateButtonIcon('si si-undo')}"
+            styleClass="ui-button-flat font-medium"
             value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/restoreAllToDefault')}"
             actionListener="#{logic.submitResetAllSettings}" oncomplete="PF('resetConfirmation').show()"
             update=":#{p:resolveFirstComponentWithId('resetConfirmationDialog', view).clientId}" />
@@ -105,23 +130,35 @@
           <p:column id="settings-table-action-buttons"
             headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
             styleClass="u-text-align-center settings-table-action-buttons">
-            <p:commandLink styleClass="action-column-icon-button" id="edit" oncomplete="PF('settingDialog').show()"
-              actionListener="#{logic.editSetting(setting)}" process="@this"
-              title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
-              update="@this :#{p:resolveFirstComponentWithId('settingDialog', view).clientId}">
-              <span class="si si-graphic-tablet-drawing-pen" />
-            </p:commandLink>
-            <p:commandLink id="reset" process="@this" update=":#{p:resolveFirstComponentWithId('resetConfirmationDialog', view).clientId}"
-              actionListener="#{logic.submitResetSetting(setting)}" oncomplete="PF('resetConfirmation').show()"
-              title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/restoreDefault')}"
-              styleClass="action-column-icon-button">
-              <span class="si si-undo" />
-            </p:commandLink>
+            <p:commandButton id="settings-action-button" icon="fa fa-ellipsis-h"
+              styleClass="rounded-button icon-more-menu-button ui-no-rounded-button-process-page" type="button"/>
+            <p:menu id="settings-action-menu" overlay="true"
+              trigger="settings-action-button"
+              my="right top" at="right bottom"
+              styleClass="settings-action-menu">
+              <p:menuitem id="edit-application"
+                styleClass=""
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/edit')}"
+                icon="si si-graphic-tablet-drawing-pen"
+                oncomplete="PF('settingDialog').show()"
+                actionListener="#{logic.editSetting(setting)}"
+                update=":#{p:resolveFirstComponentWithId('settingDialog', view).clientId}"
+                process="@this" />
+              <p:menuitem id="restore-default"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/restoreDefault')}"
+                icon="si si-undo"
+                oncomplete="PF('resetConfirmation').show()"
+                actionListener="#{logic.submitResetSetting(setting)}"
+                update=":#{p:resolveFirstComponentWithId('resetConfirmationDialog', view).clientId}"
+                process="@this"/>
+            </p:menu>
           </p:column>
         </p:dataTable>
       </h:form>
     </p:tab>
-    <p:tab id="announcement-tab"
+    
+    <!-- ANNOUNCEMENT TAB -->
+    <p:tab id="announcement-tab" 
       title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/tabTitle')}">
       <p:messages id="announcement-validation-messages" redisplay="false" />
 
@@ -129,32 +166,6 @@
         styleClass="ui-g">
         <h:panelGroup id="action-group" styleClass="announcement-tab-action-buttons ui-g-12 u-padding-0" layout="block">
           <div class="announcement-information">#{ivy.cms.co("/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/information")}</div>
-          <div class="announcement-action">
-            <p:commandButton id="publish-announcement"
-              process="announcement-form"
-              disabled="#{data.isAnnouncementActivated}"
-              icon="#{visibilityBean.generateButtonIcon('si si-check-circle-1')}"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/enable')}"
-              actionListener="#{logic.publishAnnouncement()}"
-              update="#{cc.clientId}:adminTabView:announcement-table #{cc.clientId}:adminTabView:announcement-validation-messages action-group"
-              styleClass="u-mar-right-5"/>
-            <p:commandButton id="delete-announcement"
-              process="announcement-form"
-              actionListener="#{logic.depublishAnnouncement()}"
-              icon="#{visibilityBean.generateButtonIcon('si si-delete')}"
-              disabled="#{not data.isAnnouncementActivated}"
-              update="#{cc.clientId}:adminTabView:announcement-validation-messages action-group"
-              styleClass="u-mar-right-5"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/disable')}">
-            </p:commandButton>
-            <p:commandButton id="save-changes-announcement"
-              process="announcement-form"
-              actionListener="#{logic.saveChangesAnnouncement()}"
-              icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
-              update="#{cc.clientId}:adminTabView:announcement-validation-messages action-group"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/saveChanges')}">
-            </p:commandButton>
-          </div>
         </h:panelGroup>
 
         <p:dataTable id="announcement-table"
@@ -173,6 +184,17 @@
               requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/defaultLanguageRequiredMessage')}" />
           </p:column>
         </p:dataTable>
+        <div class="announcement-action flex justify-content-end gap-4 mt-6 w-full">
+          <div class="announcement-toggle flex align-content-center flex-wrap gap-2">
+            <h:outputText id="announcement-toggle-status" class="flex align-items-center justify-content-center font-medium" 
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/enable')}" />
+            <p:toggleSwitch id="announcement-toggle-switch" value="#{data.isAnnouncementActivated}" styleClass="flex align-items-center justify-content-center" widgetVar="announcementToggleSwitch" />
+          </div>
+          <p:commandButton id="save-changes-announcement" process="announcement-form" actionListener="#{logic.saveChangesAnnouncement()}"
+            update="#{cc.clientId}:adminTabView:announcement-validation-messages action-group" 
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}">
+          </p:commandButton>
+        </div>
       </h:form>
     </p:tab>
 
@@ -191,8 +213,8 @@
 
   <!-- APPLICATION DIALOG-->
   <p:dialog header="#{data.dialogTitle}" id="appDialog" onShow="$('body').css({overflow:'hidden'})"
-    styleClass="app-dialog" onHide="$('body').css({overflow:'inherit'})" widgetVar="appDialog" dynamic="true"
-    modal="true" resizable="false" appendTo="@(body)" width="50vw"
+    styleClass="app-dialog" onHide="PF('cancelButton').jq.click(); $('body').css({overflow:'inherit'})" widgetVar="appDialog" dynamic="true"
+    modal="true" resizable="false" appendTo="@(body)" closeOnEscape="true" width="500px" height="35vh"
     responsive="true" fitViewport="true" position="center center" positionType="absolute">
     <h:form prependId="false" id="appDialogForm">
       <p:messages id="messages" closable="true" />
@@ -202,134 +224,124 @@
           <p:row>
             <p:column styleClass="u-no-border u-padding-0">
               <!-- Application Type -->
-              <div class="ui-g">
-                <p:outputLabel styleClass="app-icon ui-g-2"
+              <div class="field">
+                <p:outputLabel styleClass="app-icon w-full admin-settings-application-icon"
                   value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/applicationList/menuIcon')}" />
-                <div class="ui-g-10">
-                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" />
+                <div class="w-full">
+                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" isNotInAdminSettings="false"/>
                 </div>
               </div>
 
               <!-- 3rd application view -->
-              <h:panelGroup id="applicationDisplayName3rd" styleClass="ui-g" layout="block">
-                <p:outputLabel styleClass="ui-g-2 admin-settings-display-name-3rd-label"
-                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/appDisplayName')}"
-                  for="appDisplayName3rd" />
-                <div class="ui-g-7">
-                  <p:inputText value="#{data.displayNameInCurrentLanguage}" id="appDisplayName3rd"
-                    styleClass="admin-settings-form-input" required="true">
-                    <f:converter converterId="applicationDisplayNameConverter" />
-                    <f:validator validatorId="applicationDisplayNameValidator" />
-                  </p:inputText>
-                </div>
-                <div class="ui-g-3">
-                  <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/addLanguages')}"
-                    icon="#{visibilityBean.generateButtonIcon('si si-chat-translate')}" process="appDisplayName3rd "
-                    styleClass="app-setting-button"
-                    update=":#{p:resolveFirstComponentWithId('appDisplayName3rd', view).clientId} :#{p:resolveFirstComponentWithId('applicationName', view).clientId} messages"
-                    actionListener="#{logic.getLanguageList}"
-                    oncomplete="if (!args.validationFailed)PF('applicationName').show();">
-                    <f:param name="skipDisplayNameInputValidation" value="true" />
-                  </p:commandButton>
+              <h:panelGroup id="applicationDisplayName3rd" styleClass="field" layout="block">
+                <p:outputLabel styleClass="w-full admin-settings-display-name-3rd-label"
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/appDisplayName')}" for="appDisplayName3rd" />
+                <div class="w-full">
+                  <div class="flex gap-3">
+                    <div class="flex flex-1">
+                      <p:inputText value="#{data.displayNameInCurrentLanguage}" id="appDisplayName3rd"
+                        styleClass="admin-settings-form-input w-full" required="true">
+                        <f:converter converterId="applicationDisplayNameConverter" />
+                        <f:validator validatorId="applicationDisplayNameValidator" />
+                      </p:inputText>
+                    </div>
+                    <div class="flex flex-none">
+                      <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/addLanguages')}" process="appDisplayName3rd"
+                        styleClass="app-setting-button"
+                        update=":#{p:resolveFirstComponentWithId('appDisplayName3rd', view).clientId} :#{p:resolveFirstComponentWithId('applicationName', view).clientId} messages"
+                        actionListener="#{logic.getLanguageList}" oncomplete="if (!args.validationFailed)PF('applicationName').show();">
+                        <f:param name="skipDisplayNameInputValidation" value="true" />
+                      </p:commandButton>
+                    </div>
+                  </div>
                 </div>
               </h:panelGroup>
-
               <!-- link 3rd application view -->
-              <h:panelGroup id="portalLink3rdApp" styleClass="ui-g" layout="block">
-                <p:outputLabel styleClass="ui-g-2 admin-settings-portal-link-label"
+              <h:panelGroup id="portalLink3rdApp" styleClass="field" layout="block">
+                <p:outputLabel styleClass="w-full admin-settings-portal-link-label"
                   value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/link')}" for="portalLink3rd" />
-                <div class="ui-g-10">
-                  <p:inputText value="#{data.selectedApp.link}" id="portalLink3rd" required="true"
-                    styleClass="admin-settings-form-input" />
+                <div class="w-full">
+                  <p:inputText value="#{data.selectedApp.link}" id="portalLink3rd" required="true" styleClass="admin-settings-form-input" />
                 </div>
               </h:panelGroup>
             </p:column>
           </p:row>
         </p:panelGrid>
-
-        <!-- Two buttons OK, Cancel -->
-        <h:panelGroup layout="block" styleClass="u-text-align-right ui-g-12 MarTop10">
-            <p:commandLink
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-              type="button" onclick="PF('appDialog').hide()" />
-            <p:spacer width="15px" />
-            <p:commandButton
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}"
-              icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
-              actionListener="#{logic.saveApplication}"
-              oncomplete="if (!args.validationFailed){ PF('appDialog').hide()}"
-              update="#{p:resolveFirstComponentWithId('applicationTable', view).clientId} appDialogForm"
-              process="@form" />
-        </h:panelGroup>
+        <p:commandLink widgetVar="cancelButton" id="cancelButton" onclick="PF('appDialog').hide()" style="display:none" />
       </p:outputPanel>
     </h:form>
+    <f:facet name="footer">
+      <h:panelGroup id="dialogFooter">
+        <p:commandButton form="appDialogForm" styleClass="w-full" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
+          actionListener="#{logic.saveApplication}" oncomplete="if (!args.validationFailed){ PF('appDialog').hide()}"
+          update="#{p:resolveFirstComponentWithId('applicationTable', view).clientId} appDialogForm" process="appDialogForm" />
+      </h:panelGroup>
+    </f:facet>
   </p:dialog>
 
   <!-- SETTING DIALOG-->
-  <p:dialog header="#{data.dialogTitle}" id="settingDialog" onShow="$('body').css({overflow:'hidden'})" width="60%"
+  <p:dialog header="#{data.dialogTitle}" id="settingDialog" onShow="$('body').css({overflow:'hidden'})" width="500px"
     onHide="$('body').css({overflow:'inherit'})" widgetVar="settingDialog" dynamic="true" modal="true" resizable="false"
     appendTo="@(body)" styleClass="setting-dialog"
     responsive="true" fitViewport="true">
     <h:form prependId="false" id="settingDialogForm">
       <p:messages />
       <p:outputPanel id="settingOverview">
-        <p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-2, ui-grid-col-10"
-          styleClass="u-no-border admin-settings-container ui-fluid">
+        <h:panelGroup layout="block" styleClass="w-full admin-settings-container ui-fluid">
+          
           <!-- KEY -->
-          <p:outputLabel styleClass="admin-settings-form-input-label"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/key')}" for="keySetting" />
-          <p:inputText value="#{data.selectedSetting.key}" id="keySetting" readonly="true" />
-
+          <div class="field">
+            <p:outputLabel styleClass="font-medium"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/key')}" for="keySetting" />
+            <p:inputText value="#{data.selectedSetting.key}" id="keySetting" readonly="true" />
+          </div>
           <!-- VALUE -->
-          <p:outputLabel styleClass="admin-settings-form-input-label"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/value')}" for="valueSetting" />
-          <c:if test="#{data.settingInputType.toString() == 'TEXT'}">
-            <p:inputText value="#{data.selectedSetting.value}" id="valueSetting" />
-          </c:if>
-          
-          <c:if test="#{data.settingInputType.toString() == 'NUMBER'}">
-            <p:inputText value="#{data.selectedSetting.value}" id="valueSetting"
-              onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;" />
-          </c:if>
-          
-          <c:if test="#{data.settingInputType.toString() == 'SELECTION'}">
-            <p:selectOneMenu value="#{data.selectedSetting.value}" id="valueSetting" styleClass="value-setting-dropdown">
-              <f:selectItems value="#{data.dropDownValues}" var="value" itemLabel="#{adminSettingBean.getDropdownItemlabel(value)}" />
-            </p:selectOneMenu>
-          </c:if>
-          
-          <c:if test="#{data.settingInputType.toString() == 'EXTERNAL_SELECTION'}">
-            <p:selectOneMenu value="#{data.selectedSetting.value}" id="valueSetting" styleClass="value-setting-dropdown">
-              <f:selectItems value="#{data.externalDropDownValues.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{data.selectedSetting.key eq 'Portal.Homepage' ? entry.value : entry.value.getLabel()}" />
-            </p:selectOneMenu>
-          </c:if>
-          
-          <c:if test="#{data.settingInputType.toString() == 'MULTI_EXTERNAL_SELECTIONS'}">
-            <p:selectManyCheckbox value="#{data.selectedMultiSettings}" id="valueSetting">
-              <f:selectItems value="#{data.externalDropDownValues.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value.getLabel()}" />
-            </p:selectManyCheckbox>
-          </c:if>
-          
-          <c:if test="#{data.settingInputType.toString() == 'PASSWORD'}">
-            <p:inputText value="#{data.selectedSetting.value}" id="valueSetting" type="password"/>
-          </c:if>
-
+          <div class="field">
+            <p:outputLabel styleClass="font-medium"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/value')}" for="valueSetting" />
+            <c:if test="#{data.settingInputType.toString() == 'TEXT'}">
+              <p:inputText value="#{data.selectedSetting.value}" id="valueSetting" />
+            </c:if>
+            
+            <c:if test="#{data.settingInputType.toString() == 'NUMBER'}">
+              <p:inputText value="#{data.selectedSetting.value}" id="valueSetting"
+                onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;" />
+            </c:if>
+            
+            <c:if test="#{data.settingInputType.toString() == 'SELECTION'}">
+              <p:selectOneMenu value="#{data.selectedSetting.value}" id="valueSetting" styleClass="value-setting-dropdown">
+                <f:selectItems value="#{data.dropDownValues}" var="value" itemLabel="#{adminSettingBean.getDropdownItemlabel(value)}" />
+              </p:selectOneMenu>
+            </c:if>
+            
+            <c:if test="#{data.settingInputType.toString() == 'EXTERNAL_SELECTION'}">
+              <p:selectOneMenu value="#{data.selectedSetting.value}" id="valueSetting" styleClass="value-setting-dropdown">
+                <f:selectItems value="#{data.externalDropDownValues.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{data.selectedSetting.key eq 'Portal.Homepage' ? entry.value : entry.value.getLabel()}" />
+              </p:selectOneMenu>
+            </c:if>
+            
+            <c:if test="#{data.settingInputType.toString() == 'MULTI_EXTERNAL_SELECTIONS'}">
+              <p:selectManyCheckbox value="#{data.selectedMultiSettings}" id="valueSetting">
+                <f:selectItems value="#{data.externalDropDownValues.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value.getLabel()}" />
+              </p:selectManyCheckbox>
+            </c:if>
+            
+            <c:if test="#{data.settingInputType.toString() == 'PASSWORD'}">
+              <p:inputText value="#{data.selectedSetting.value}" id="valueSetting" type="password"/>
+            </c:if>
+          </div>
           <!-- NOTE -->
-          <p:outputLabel styleClass="Fright" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/note')}"
-            for="noteSetting" />
-          <p:inputTextarea value="#{data.selectedSetting.note}" id="noteSetting" disabled="true" />
-        </p:panelGrid>
+          <div class="field">
+            <p:outputLabel styleClass="font-medium" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/note')}"
+              for="noteSetting" />
+            <p:inputTextarea value="#{data.selectedSetting.note}" id="noteSetting" disabled="true" />
+          </div>
+        </h:panelGroup>
 
         <!-- Two buttons OK, Cancel -->
-        <h:panelGroup layout="block" styleClass="u-text-align-right MarTop10 ui-g-12">
-          <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"  
-            process="@this"
-            oncomplete="PF('settingDialog').hide()" 
-            global="false"/>
-          <p:spacer width="15px" />
-          <p:commandButton id="save-setting" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}"
-            icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
-            actionListener="#{logic.saveSetting}" styleClass="confirm-save-setting-button"
+        <h:panelGroup layout="block" styleClass="w-full">
+          <p:commandButton id="save-setting" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
+            actionListener="#{logic.saveSetting}" styleClass="confirm-save-setting-button w-full mt-2"
             oncomplete="if (!args.validationFailed){ PF('settingDialog').hide();}"
             update=":#{p:resolveFirstComponentWithId('settingForm', view).clientId} @form" process="@form" widgetVar="saveSettingButton"
             onclick="PF('saveSettingButton').disable();" />
@@ -369,54 +381,51 @@
     <ui:param name="dialogContent" value="#{data.confirmMsg}" />
     
     <ui:define name="dialogFooter">
-      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" 
-        onclick="PF('resetConfirmation').hide()" styleClass="u-mar-right-15"/>
       <c:if test="#{data.resetAllSettings}">
         <p:commandButton id="reset-settings" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/restore')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-button-refresh-arrows')}"
-          actionListener="#{logic.resetValues}"
+          actionListener="#{logic.resetValues}" styleClass="w-full"
           oncomplete="PF('resetConfirmation').hide(); PF('settingTable').clearFilters();"
           update="@(.admin-table.global-setting-table)" />
       </c:if>
       <c:if test="#{!data.resetAllSettings}">
         <p:commandButton id="reset-setting" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/restore')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-button-refresh-arrows')}"
-          actionListener="#{logic.resetValue}"
+          actionListener="#{logic.resetValue}" styleClass="w-full"
           oncomplete="PF('resetConfirmation').hide();"
           update="@(.admin-table.global-setting-table)" />
       </c:if>
+      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" 
+        onclick="PF('resetConfirmation').hide()" styleClass="text-center block pt-3 w-full"/>
     </ui:define>
   </ui:decorate>
 
 
-  <p:dialog appendTo="@(body)" styleClass="application-name-language"
+  <p:dialog appendTo="@(body)" styleClass="application-name-language" width="500px" height="30vh"
     header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/settingApplicationName')}" resizable="false"
     id="applicationName" widgetVar="applicationName" dynamic="true" modal="true" responsive="true">
-    <h:form>
+    <h:form prependId="false" id="applicationNameDialogForm">
       <h:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/emptySupportedLanguages')}"
         rendered="#{data.supportedLanguages.isEmpty()}" />
-      <h:dataTable value="#{data.supportedLanguages}" rendered="#{data.supportedLanguages.isEmpty() eq 'false'}"
+      <h:dataTable value="#{data.supportedLanguages}" rendered="#{data.supportedLanguages.isEmpty() eq 'false'}" width="100%"
         var="supportedLanguage">
         <h:column>
-          <h:outputText styleClass="ui-g-12" value="#{supportedLanguage.locale.getDisplayName()}" />
-        </h:column>
-        <h:column>
+          <h:outputText styleClass="ui-g-12 font-medium" value="#{supportedLanguage.locale.getDisplayName()}" />
           <div class="ui-g-12 ui-fluid">
             <p:inputText value="#{supportedLanguage.value}" />
           </div>
         </h:column>
       </h:dataTable>
-
-      <div class="u-dialog-footer-actions-group">
-        <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('applicationName').hide();"/>
-        <p:spacer width="15px" rendered="#{!data.supportedLanguages.isEmpty()}" />
-        <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
-          process="@form" update="#{cc.clientId}:appDisplayName3rd"
-          oncomplete="PF('applicationName').hide();" actionListener="#{logic.processLanguage}"
-          rendered="#{!data.supportedLanguages.isEmpty()}" />
-      </div>
     </h:form>
+    <f:facet name="footer">
+      <h:panelGroup id="applicationNameDialogFooter">
+        <p:commandButton form="applicationNameDialogForm" styleClass="w-full" 
+          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
+          process="applicationNameDialogForm" 
+          update="#{p:resolveFirstComponentWithId('appDisplayName3rd', view).clientId}"
+          oncomplete="PF('applicationName').hide();" 
+          actionListener="#{logic.processLanguage}"
+          rendered="#{!data.supportedLanguages.isEmpty()}" />
+      </h:panelGroup>
+    </f:facet>
   </p:dialog>
 </cc:implementation>
 </html>
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettingsProcess.p.json b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettingsProcess.p.json
index 68852ad4b40..cb924026e51 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettingsProcess.p.json
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/admin/AdminSettings/AdminSettingsProcess.p.json
@@ -938,87 +938,6 @@
       "connect" : [
         { "id" : "f70", "to" : "f190" }
       ]
-    }, {
-      "id" : "f64",
-      "type" : "HtmlDialogMethodStart",
-      "name" : "publishAnnouncement()",
-      "config" : {
-        "signature" : "publishAnnouncement",
-        "guid" : "16A29A0E1F97DE40"
-      },
-      "visual" : {
-        "at" : { "x" : 320, "y" : 1376 },
-        "labelOffset" : { "x" : 15, "y" : -15 }
-      },
-      "connect" : [
-        { "id" : "f82", "to" : "f81" }
-      ]
-    }, {
-      "id" : "f65",
-      "type" : "HtmlDialogMethodStart",
-      "name" : "depublishAnnouncement()",
-      "config" : {
-        "signature" : "depublishAnnouncement",
-        "guid" : "16A29A0F2F82745C"
-      },
-      "visual" : {
-        "at" : { "x" : 512, "y" : 1376 },
-        "labelOffset" : { "x" : 15, "y" : -15 }
-      },
-      "connect" : [
-        { "id" : "f86", "to" : "f85" }
-      ]
-    }, {
-      "id" : "f81",
-      "type" : "Script",
-      "name" : "publish",
-      "config" : {
-        "output" : {
-          "code" : [
-            "import com.axonivy.portal.components.util.FacesMessageUtils;",
-            "import javax.faces.application.FacesMessage;",
-            "import javax.faces.context.FacesContext;",
-            "import ch.ivy.addon.portalkit.service.AnnouncementService;",
-            "AnnouncementService service = AnnouncementService.getInstance();",
-            "in.announcement.setEnabled(true);",
-            "service.save(in.announcement);",
-            "out.isAnnouncementActivated = true;",
-            "FacesContext.getCurrentInstance().addMessage(null, FacesMessageUtils.sanitizedMessage(FacesMessage.SEVERITY_INFO, ",
-            "  ivy.cms.co(\"/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/announcementsEnabled\"), null));"
-          ]
-        }
-      },
-      "visual" : {
-        "at" : { "x" : 320, "y" : 1472 }
-      },
-      "connect" : [
-        { "id" : "f27", "to" : "f16", "via" : [ { "x" : 320, "y" : 1568 } ] }
-      ]
-    }, {
-      "id" : "f85",
-      "type" : "Script",
-      "name" : "depublish",
-      "config" : {
-        "output" : {
-          "code" : [
-            "import com.axonivy.portal.components.util.FacesMessageUtils;",
-            "import javax.faces.application.FacesMessage;",
-            "import javax.faces.context.FacesContext;",
-            "import ch.ivy.addon.portalkit.service.AnnouncementService;",
-            "AnnouncementService service = AnnouncementService.getInstance();",
-            "service.deactivateAnnouncement();",
-            "out.isAnnouncementActivated = false;",
-            "FacesContext.getCurrentInstance().addMessage(null, FacesMessageUtils.sanitizedMessage(FacesMessage.SEVERITY_INFO, ",
-            "  ivy.cms.co(\"/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/announcementsDisabled\"), null));"
-          ]
-        }
-      },
-      "visual" : {
-        "at" : { "x" : 512, "y" : 1472 }
-      },
-      "connect" : [
-        { "id" : "f58", "to" : "f16" }
-      ]
     }, {
       "id" : "f87",
       "type" : "HtmlDialogMethodStart",
@@ -1046,7 +965,7 @@
         "guid" : "16A33CB19C2E90CF"
       },
       "visual" : {
-        "at" : { "x" : 920, "y" : 1384 },
+        "at" : { "x" : 656, "y" : 1376 },
         "labelOffset" : { "x" : 47, "y" : -16 }
       },
       "connect" : [
@@ -1056,7 +975,7 @@
       "id" : "f89",
       "type" : "HtmlDialogEnd",
       "visual" : {
-        "at" : { "x" : 920, "y" : 1560 }
+        "at" : { "x" : 656, "y" : 1568 }
       }
     }, {
       "id" : "f31",
@@ -1175,7 +1094,7 @@
         }
       },
       "visual" : {
-        "at" : { "x" : 128, "y" : 1472 }
+        "at" : { "x" : 128, "y" : 1456 }
       },
       "connect" : [
         { "id" : "f84", "to" : "f83" }
@@ -1229,7 +1148,7 @@
         "labelOffset" : { "x" : 17, "y" : -11 }
       },
       "connect" : [
-        { "id" : "f52", "to" : "f56" }
+        { "id" : "f27", "to" : "f56" }
       ]
     }, {
       "id" : "f83",
@@ -1261,29 +1180,11 @@
       "visual" : {
         "at" : { "x" : 704, "y" : 1264 }
       }
-    }, {
-      "id" : "f16",
-      "type" : "Script",
-      "name" : "update messages",
-      "config" : {
-        "output" : {
-          "code" : [
-            "import ch.ivy.addon.portalkit.bean.AdminSettingBean;",
-            "AdminSettingBean.updatePortalManagementMessages();"
-          ]
-        }
-      },
-      "visual" : {
-        "at" : { "x" : 512, "y" : 1568 }
-      },
-      "connect" : [
-        { "id" : "f25", "to" : "f24" }
-      ]
     }, {
       "id" : "f24",
       "type" : "HtmlDialogEnd",
       "visual" : {
-        "at" : { "x" : 512, "y" : 1664 }
+        "at" : { "x" : 392, "y" : 1568 }
       }
     }, {
       "id" : "f61",
@@ -1326,18 +1227,33 @@
             "import javax.faces.application.FacesMessage;",
             "import javax.faces.context.FacesContext;",
             "import ch.ivy.addon.portalkit.service.AnnouncementService;",
+            "import ch.ivy.addon.portalkit.bean.AdminSettingBean;",
+            "",
             "AnnouncementService service = AnnouncementService.getInstance();",
-            "service.saveValueChangeAnnouncement(in.announcement);",
-            "FacesContext.getCurrentInstance().addMessage(null, FacesMessageUtils.sanitizedMessage(FacesMessage.SEVERITY_INFO, ",
-            "  ivy.cms.co(\"/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/announcementsEnabled\"), null));"
+            "",
+            "if (in.isAnnouncementActivated) {",
+            "  in.announcement.setEnabled(true);",
+            "  service.save(in.announcement);",
+            "  out.isAnnouncementActivated = true;",
+            "  FacesContext.getCurrentInstance().addMessage(null, FacesMessageUtils.sanitizedMessage(FacesMessage.SEVERITY_INFO, ",
+            "  ivy.cms.co(\"/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/announcementsEnabled\"), null));",
+            "} else {",
+            "  service.deactivateAnnouncement();",
+            "  service.saveValueChangeAnnouncement(in.announcement);",
+            "  out.isAnnouncementActivated = false;",
+            "  FacesContext.getCurrentInstance().addMessage(null, FacesMessageUtils.sanitizedMessage(FacesMessage.SEVERITY_INFO, ",
+            "  ivy.cms.co(\"/ch.ivy.addon.portalkit.ui.jsf/adminSettings/announcement/announcementsDisabled\"), null));",
+            "}",
+            "",
+            "AdminSettingBean.updatePortalManagementMessages();"
           ]
         }
       },
       "visual" : {
-        "at" : { "x" : 728, "y" : 1472 }
+        "at" : { "x" : 392, "y" : 1456 }
       },
       "connect" : [
-        { "id" : "f78", "to" : "f16", "via" : [ { "x" : 728, "y" : 1568 } ] }
+        { "id" : "f16", "to" : "f24" }
       ]
     }, {
       "id" : "f28",
@@ -1348,7 +1264,7 @@
         "guid" : "19131B2C06569468"
       },
       "visual" : {
-        "at" : { "x" : 728, "y" : 1376 },
+        "at" : { "x" : 392, "y" : 1376 },
         "labelOffset" : { "x" : 11, "y" : -13 }
       },
       "connect" : [
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
index 36da98afad9..8149d47fc71 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ActionStep/ActionStep.xhtml
@@ -59,13 +59,6 @@
       <h:outputText value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portalkit/component/CaseWidget/ShowBusinessDetails')}" />
     </p:link>
 
-    <p:commandLink id="destroy-case" rendered="#{renderDestroyAction}" update="#{cc.attrs.update}"
-      actionListener="#{caseWidgetBean.setSelectedCase(case)}"
-      styleClass="case-command action-step-item color-destroy ui-menu-items" process="@this" oncomplete="#{cc.attrs.onDestroyComplete}">
-      <span class="action-icon pi pi-trash" />
-      <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}" />
-    </p:commandLink>
-
     <p:link id="show-process-viewer-link" target="_blank"
       styleClass="show-process-viewer-link case-command action-step-item"
       href="#{caseActionBean.getProcessViewerPageUri(case)}"
@@ -73,6 +66,13 @@
       <i class="action-icon si si-hierarchy-6 si-rotate-270" />
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/ProcessViewer/ProcessViewerText')}" />
     </p:link>
+    
+    <p:commandLink id="destroy-case" rendered="#{renderDestroyAction}" update="#{cc.attrs.update}"
+      actionListener="#{caseWidgetBean.setSelectedCase(case)}"
+      styleClass="case-command action-step-item color-destroy ui-menu-items" process="@this" oncomplete="#{cc.attrs.onDestroyComplete}">
+      <span class="action-icon pi pi-trash" />
+      <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}" />
+    </p:commandLink>
 
     <h:panelGroup id="side-steps">
       <f:event listener="#{sideStepBean.getSideSteps(cc.attrs.taskId, case.id)}" type="preRenderComponent" />
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/IconSelection/IconSelection.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/IconSelection/IconSelection.xhtml
index 3526156f934..bd0ba3fd786 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/IconSelection/IconSelection.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/IconSelection/IconSelection.xhtml
@@ -8,35 +8,43 @@
     shortDescription="Value expression to bind selected Icon on" />
   <cc:attribute name="tabindex" required="false" default="1" />
   <cc:attribute name="isReadOnly" default="false" />
-  <cc:attribute name="hideChangeIconLink" default="false"/>
+  <cc:attribute name="hideIconArray" default="false"/>
+  <cc:attribute name="isNotInAdminSettings" default="true"/>
 </cc:interface>
 <cc:implementation>
   <c:set var="tabindex" value="#{cc.attrs.tabindex}"/>
   <c:set var="readOnly" value="#{empty cc.attrs.isReadOnly ? false : cc.attrs.isReadOnly}"/>
-  <c:set var="hideChangeIconLink" value="#{empty cc.attrs.hideChangeIconLink ? false : cc.attrs.hideChangeIconLink}"/>
+  <c:set var="hideIconArray" value="#{empty cc.attrs.hideIconArray ? false : cc.attrs.hideIconArray}"/>
   <f:event listener="#{iconSelectionBean.init(cc.attrs.value)}" type="preRenderComponent" />
+  <p:remoteCommand rendered="#{!hideIconArray}" oncomplete="loadIconsFirstTime('#{hideIconArray}','#{cc.clientId}', '#{cc.attrs.value}');" autoRun="true" global="false" immediate="#{cc.attrs.isNotInAdminSettings}"/>
 
   <h:panelGroup id="awesome-icon-selection" styleClass="awesome-icon-selection-panel">
-    <h:panelGroup rendered="#{!hideChangeIconLink}">
-      <h:outputText id="awesome-icon-display" styleClass="#{iconSelectionBean.iconPattern} #{cc.attrs.value} u-vertical-align-center" />
-      <p:spacer width="7px" />
-      <p:commandLink id="change-icon-link" styleClass="select-awesome-icon-button" tabindex="#{tabindex}"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/change')}" process="@this"
-        onclick="PF('#{cc.clientId}-select-icon-dialog').show();" oncomplete="loadStreamlineIcon('#{cc.clientId}');"
-        rendered="#{!readOnly}" />
+    <h:panelGroup rendered="#{!hideIconArray}" id="menu-icon-container" styleClass="menu-icon-container" layout="block">
+      <h:panelGroup id="custom-array-icon" styleClass="custom-array-icon" layout="block"/>
+      <p:commandLink id="change-icon-link" styleClass="select-awesome-icon-button icon-color" tabindex="#{tabindex}"
+        process="@this"
+        onclick="PF('#{cc.clientId}-select-icon-dialog').show();" oncomplete="loadDialogStreamlineIcon('#{cc.clientId}');"
+        rendered="#{!readOnly}">
+          <span class="si si-add-circle si-lg" />
+        </p:commandLink>
     </h:panelGroup>
-    <h:panelGroup rendered="#{hideChangeIconLink}">
+    <h:panelGroup rendered="#{hideIconArray}">
       <p:commandLink id="icon-link" tabindex="#{tabindex}"
-        styleClass="select-icon-link"
-        process="@this" disabled="#{readOnly}"
+        styleClass="select-icon-link icon-color"
+        process="@this" rendered="#{!readOnly}"
         onclick="PF('#{cc.clientId}-select-icon-dialog').show();"
-        oncomplete="loadStreamlineIcon('#{cc.clientId}');">
-        <h:outputText id="selection-icon-display" styleClass="#{iconSelectionBean.iconPattern} #{cc.attrs.value} u-vertical-align-center" />
+        oncomplete="loadDialogStreamlineIcon('#{cc.clientId}');">
+        <h:outputText id="selected-icon-display" styleClass="#{iconSelectionBean.iconPattern} #{cc.attrs.value} u-vertical-align-center" />
       </p:commandLink>
+      <h:panelGroup rendered="#{readOnly}" layout="block" styleClass="select-awesome-icon-button">
+        <h:panelGroup id="current-icon-display" styleClass="#{iconSelectionBean.iconPattern} #{cc.attrs.value}" />
+        <p:spacer width="7px" />
+      </h:panelGroup>
       <p:tooltip for="icon-link" value="#{ivy.cms.co('/Dialogs/ch/ivy/addon/portalkit/component/IconSelection/IconLinkTooltip')}"
         trackMouse="true"/>
     </h:panelGroup>
-    <p:inputText type="hidden" id="awesome-icon-hidden-value" value="#{cc.attrs.value}" />
+
+    <p:inputText type="hidden" id="selected-icon-hidden-value" value="#{cc.attrs.value}" />
   </h:panelGroup>
   
   <p:dialog id="select-icon-dialog" widgetVar="#{cc.clientId}-select-icon-dialog" styleClass="select-icon-dialog"
@@ -54,8 +62,8 @@
       </p:fieldset>
       <p:fieldset legend="Awesome" id="awesome-icon" styleClass="MarTop20">
         <ui:repeat var="icon" value="#{masterDataBean.awesomeIcons}">
-          <h:link id="awesome-icon" styleClass="icon-selection-dialog-selecting-icon"
-            onclick="updateSelectedIConDisplay('#{icon.iconCode}', 'awesome', '#{cc.clientId}');PF('#{cc.clientId}-select-icon-dialog').hide();return false;">
+          <h:link id="awesome-icon" styleClass="icon-selection-dialog-selecting-icon icon-color"
+            onclick="updateSelectedIconDisplay('#{icon.iconCode}', 'awesome', '#{cc.clientId}'); createAwesomeTag('#{icon.iconCode}', '#{cc.clientId}');PF('#{cc.clientId}-select-icon-dialog').hide();return false;">
             <span class="fa #{icon.iconCode} fa-lg" />
           </h:link>
           <p:tooltip for="awesome-icon" value="#{icon.iconCode}" trackMouse="true" hideEvent="mouseleave click" />
@@ -65,13 +73,13 @@
   </p:dialog>
   
   <script>
-    function updateSelectedIConDisplay(iconCode, type, clientId) {
-      var iconDisplayJQ = $(PrimeFaces.escapeClientId(clientId + ":awesome-icon-display"));
+    function updateSelectedIconDisplay(iconCode, type, clientId) {
+      var iconDisplayJQ = $(PrimeFaces.escapeClientId(clientId + ":current-icon-display"));
       updateIconDisplay(iconDisplayJQ, iconCode, type);
-      var iconDisplayForLink = $(PrimeFaces.escapeClientId(clientId + ":selection-icon-display"));
+      var iconDisplayForLink = $(PrimeFaces.escapeClientId(clientId + ":selected-icon-display"));
       updateIconDisplay(iconDisplayForLink, iconCode, type);
 
-      var iconHiddenValueJQ = $(PrimeFaces.escapeClientId(clientId + ":awesome-icon-hidden-value"));
+      var iconHiddenValueJQ = $(PrimeFaces.escapeClientId(clientId + ":selected-icon-hidden-value"));
       iconHiddenValueJQ.val(iconCode);
     }
     
@@ -80,12 +88,60 @@
         return;
       }
       iconDisplayJQ.removeClass();
-      iconDisplayJQ.toggleClass(type === "awesome" ? "fa fa-2x" : "si si-xl");
+      iconDisplayJQ.toggleClass(type === "awesome" ? "fa fa-2x" : "si si-lg");
       iconDisplayJQ.toggleClass("u-vertical-align-center");
       iconDisplayJQ.addClass(iconCode);
     }
+
+    function resetIconArrayStyle(arrayIconContainer) {
+      if(arrayIconContainer) {
+        $(arrayIconContainer).find('a').addClass('opacity-40');
+        $(arrayIconContainer).find('a').removeClass('highlight-selected-icon');
+      }
+    }
+
+    function highlightSelectedIcon(iconEl) {
+      if(iconEl) {
+        $(iconEl).removeClass('opacity-40');
+        $(iconEl).addClass('highlight-selected-icon');
+      }
+    }
+
+    function createAwesomeTag(iconCode, clientId) {
+        var container = document.getElementById(clientId + ":custom-array-icon");
+        if(container) {
+          resetIconArrayStyle(container);
+          var iconImage = document.createElement("span");
+          iconImage.className = "fa " + iconCode;
+
+          var iconAnchor = document.createElement("a");
+          iconAnchor.className = "icon-selection-array-selecting-icon icon-color highlight-selected-icon";
+          iconAnchor.appendChild(iconImage);
+          iconAnchor.title = iconCode;
+          iconAnchor.onclick = function() {
+            updateSelectedIconDisplay(iconCode, "awesome", clientId);
+            resetIconArrayStyle(container);
+            highlightSelectedIcon(this);
+          };
+          $(container).prepend(iconAnchor);
+          $(container).children().last().remove()
+        }
+    }
+
+    function reoderSelectedIconOnTop(icons, selectedIconCode, clientId) {
+      icons.forEach(function(icon,i){
+        var iconCode = icon.selectorText.substring(1, icon.selectorText.length - 8);
+        if(iconCode === selectedIconCode){
+          icons.splice(i, 1);
+          icons.unshift(icon);
+        }
+      });
+      var container = document.getElementById(clientId + ":custom-array-icon");
+      var numberVisibleIcon = Math.floor($(container).width()/32);
+      icons.splice(numberVisibleIcon, icons.length - numberVisibleIcon);
+    }
     
-    function loadStreamlineIcon(clientId) {
+    function loadDialogStreamlineIcon(clientId) {
       var iconsStylesheet = Object.values(document.styleSheets).filter(sheet => sheet.href?.includes("StreamlineIcons.css"))[0];
       var icons = Object.values(iconsStylesheet.rules).filter(rule => rule.selectorText?.startsWith(".si-"));
       icons.sort((a, b) => (a.selectorText > b.selectorText) ? 1 : -1);
@@ -97,16 +153,15 @@
         var iconCode = icon.selectorText.substring(1, icon.selectorText.length - 8);
         var iconImage = document.createElement("i");
         iconImage.className = "si " + iconCode + " si-lg";
-        var iconTitle = document.createElement("p");
-        iconTitle.appendChild(document.createTextNode("si " + iconCode));
-        
+
         var iconAnchor = document.createElement("a");
-        iconAnchor.className = "icon-selection-dialog-selecting-icon";
+        iconAnchor.className = "icon-selection-dialog-selecting-icon icon-color";
         iconAnchor.appendChild(iconImage);
         iconAnchor.title = iconCode;
         iconAnchor.onclick = function() {
-          updateSelectedIConDisplay(iconCode, "streamline", clientId);
+          updateSelectedIconDisplay(iconCode, "streamline", clientId);
           PF(selectionIconDialogId).hide();
+          reloadArrayStreamlineIcon(clientId, iconCode);
           return false;
         };
         
@@ -117,7 +172,49 @@
       searchIconByName(searchField);
       PF(selectionIconDialogId).initPosition();
     }
-   
+
+    function reloadArrayStreamlineIcon(clientId, currentIconCode) {
+      var container = document.getElementById(clientId + ":custom-array-icon");
+      if(container) {
+        var iconsStylesheet = Object.values(document.styleSheets).filter(sheet => sheet.href?.includes("StreamlineIcons.css"))[0];
+        var icons = Object.values(iconsStylesheet.rules).filter(rule => rule.selectorText?.startsWith(".si-"));
+        reoderSelectedIconOnTop(icons, currentIconCode, clientId);
+        container.innerHTML = "";
+        icons.forEach((icon, index) => {
+          var iconCode = icon.selectorText.substring(1, icon.selectorText.length - 8);
+          var iconImage = document.createElement("i");
+          iconImage.className = "si " + iconCode;
+          
+          var iconAnchor = document.createElement("a");
+          if(currentIconCode == iconCode) {
+            iconAnchor.className = "icon-selection-array-selecting-icon icon-color highlight-selected-icon";
+          } else {
+            iconAnchor.className = "icon-selection-array-selecting-icon icon-color opacity-40";
+          }
+
+          iconAnchor.appendChild(iconImage);
+          iconAnchor.title = iconCode;
+
+          iconAnchor.onclick = function() {
+            updateSelectedIconDisplay(iconCode, "streamline", clientId);
+            resetIconArrayStyle(container);
+            highlightSelectedIcon(this);
+          };
+          container.appendChild(iconAnchor);
+        });
+      }
+    };
+
+    function loadIconsFirstTime(hideIconArray, clientId, currentIcon) {
+      if(hideIconArray == true) {
+        return;
+      }
+      reloadArrayStreamlineIcon(clientId, currentIcon);
+      if(currentIcon.includes('fa-')) {
+        createAwesomeTag(currentIcon, clientId);
+      }
+    }
+
   </script>
 </cc:implementation>
 </html>
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/PasswordValidation/PasswordValidation.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/PasswordValidation/PasswordValidation.xhtml
index 74b677c5473..28993d71ce8 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/PasswordValidation/PasswordValidation.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/PasswordValidation/PasswordValidation.xhtml
@@ -1,75 +1,56 @@
-<html xmlns="http://www.w3.org/1999/xhtml"
-	xmlns:f="http://xmlns.jcp.org/jsf/core"
-	xmlns:h="http://xmlns.jcp.org/jsf/html"
-	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
-	xmlns:cc="http://xmlns.jcp.org/jsf/composite"
-	xmlns:ic="http://ivyteam.ch/jsf/component"
-	xmlns:p="http://primefaces.org/ui"
-	xmlns:pe="http://primefaces.org/ui/extensions">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
+  xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:ic="http://ivyteam.ch/jsf/component"
+  xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions">
 <cc:interface componentType="IvyComponent">
 </cc:interface>
 
 <cc:implementation>
 
-	<h:form id="password-validation-form" styleClass="ui-g">
-		<h:panelGroup id="password-validation-setting-group"
-			styleClass="ui-g-12 u-padding-0 password-validation-setting-group"
-			layout="block">
-			<h:panelGrid columns="2"
-				styleClass="password-validation-setting-grid" cellpadding="5">
-				<h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/passwordValidation/enablePasswordValidation')} " />
-				<p:toggleSwitch id="enable-password-validation-button"
-					value="#{data.passwordValidation.enablePasswordValidation}">
-					<p:ajax process="@this" partialSubmit="true"
-						listener="#{logic.valueChanged}"
-						update="#{cc.clientId}:password-validation-form:save-password-validation-btn #{cc.clientId}:password-validation-form:password-policy-setting" />
-				</p:toggleSwitch>
-			</h:panelGrid>
+  <h:form id="password-validation-form" styleClass="ui-g">
+    <h:panelGroup id="password-policy-setting" layout="block">
+      <p:dataTable value="#{data.passwordValidation.passwordPolicies}" editable="true" editMode="cell" var="policy">
+        <p:ajax event="cellEdit" listener="#{logic.valueChanged}" update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
+        <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/passwordValidation/criteria')}">
+          <h:outputText value="#{policy.title}" />
+        </p:column>
 
-			<p:commandButton id="save-password-validation-btn" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
-			
-				actionListener="#{logic.save}"
-				icon="#{visibilityBean.generateButtonIcon('si si-floppy-disk')}"
-				disabled="#{!data.enableSaveButton}"
-				update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
-		</h:panelGroup>
-		<h:panelGroup id="password-policy-setting" layout="block">
-			<p:dataTable value="#{data.passwordValidation.passwordPolicies}"
-				editable="true" editMode="cell" var="policy">
-				<p:ajax event="cellEdit" listener="#{logic.valueChanged}"
-					update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
-				<p:column
-					headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/passwordValidation/criteria')}">
-					<h:outputText value="#{policy.title}" />
-				</p:column>
+        <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/active')}">
+          <p:selectBooleanCheckbox value="#{policy.active}" disabled="#{!data.passwordValidation.enablePasswordValidation}">
+            <p:ajax listener="#{logic.valueChanged}" update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
+          </p:selectBooleanCheckbox>
+        </p:column>
 
-				<p:column
-					headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/active')}">
-					<p:selectBooleanCheckbox value="#{policy.active}"
-						disabled="#{!data.passwordValidation.enablePasswordValidation}">
-						<p:ajax listener="#{logic.valueChanged}"
-							update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
-					</p:selectBooleanCheckbox>
-				</p:column>
+        <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/value')}" styleClass="ui-fluid">
+          <p:cellEditor>
+            <f:facet name="output">
+              <h:outputText value="#{policy.value}">
+                <f:convertNumber type="number" />
+              </h:outputText>
+            </f:facet>
+            <f:facet name="input">
+              <p:spinner value="#{policy.value}" min="1" max="100" disabled="#{!data.passwordValidation.enablePasswordValidation}" />
+            </f:facet>
+          </p:cellEditor>
+        </p:column>
+      </p:dataTable>
+    </h:panelGroup>
+    <h:panelGroup id="password-validation-setting-group" styleClass="ui-g-12 u-padding-0 password-validation-setting-group" layout="block">
+      <div class="announcement-action flex justify-content-end gap-4 mt-6 w-full">
+        <div class="announcement-toggle flex align-content-center flex-wrap gap-2">
+          <h:outputText styleClass="flex align-items-center justify-content-center font-medium" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/passwordValidation/enablePasswordValidation')} " />
+          <p:toggleSwitch id="enable-password-validation-button" styleClass="flex align-items-center justify-content-center" value="#{data.passwordValidation.enablePasswordValidation}">
+            <p:ajax process="@this" partialSubmit="true" listener="#{logic.valueChanged}"
+              update="#{cc.clientId}:password-validation-form:save-password-validation-btn #{cc.clientId}:password-validation-form:password-policy-setting" />
+          </p:toggleSwitch>
+        </div>
 
-				<p:column
-					headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/adminSettings/value')}"
-					styleClass="ui-fluid">
-					<p:cellEditor>
-						<f:facet name="output">
-							<h:outputText value="#{policy.value}">
-								<f:convertNumber type="number" />
-							</h:outputText>
-						</f:facet>
-						<f:facet name="input">
-							<p:spinner value="#{policy.value}" min="1" max="100"
-								disabled="#{!data.passwordValidation.enablePasswordValidation}" />
-						</f:facet>
-					</p:cellEditor>
-				</p:column>
-			</p:dataTable>
-		</h:panelGroup>
-	</h:form>
+        <p:commandButton id="save-password-validation-btn" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
+          actionListener="#{logic.save}" disabled="#{!data.enableSaveButton}"
+          update="#{cc.clientId}:password-validation-form:save-password-validation-btn" />
+      </div>
+    </h:panelGroup>
+
+  </h:form>
 
 </cc:implementation>
 
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
index 9d4102e3ed8..9845f46b0e1 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProcessWidget/ProcessWidgetDialogs.xhtml
@@ -28,7 +28,7 @@
       <div id="edit-process-icon-group" class="ui-g-12 edit-process-icon-group MarTop20 u-no-padding-left u-no-padding-right">
         <p class="u-mar-right-10 edit-process-header-sub-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/editDialog/dialogCurrentIcon')}</p>
         <div class="ui-g-12 u-no-padding-left">
-          <ic:ch.ivy.addon.portalkit.component.IconSelection id="edit-process-icon"
+          <ic:ch.ivy.addon.portalkit.component.IconSelection id="edit-process-icon" hideIconArray="true"
             value="#{processWidgetBean.selectedIconProcess}"
             isReadOnly="#{!processWidgetBean.canChangeProcessIcon()}" />
         </div>
@@ -331,7 +331,7 @@
         <h:outputLabel id="external-link-icon-label" for="external-link-icon" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/icon')}" />
       </div>
       <div class="ui-g-12 u-no-padding-top external-process-icon">
-        <ic:ch.ivy.addon.portalkit.component.IconSelection id="external-link-icon" value="#{externalLinkBean.externalLink.icon}" />
+        <ic:ch.ivy.addon.portalkit.component.IconSelection id="external-link-icon" value="#{externalLinkBean.externalLink.icon}"/>
       </div>
       <!-- Image -->
       <div class="ui-g-12 MarTop10">
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProjectVersion/ProjectVersion.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProjectVersion/ProjectVersion.xhtml
index c5a0e776caf..61a8c1e7b56 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProjectVersion/ProjectVersion.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/ProjectVersion/ProjectVersion.xhtml
@@ -10,23 +10,22 @@
 
 <cc:implementation>
   <div id="#{cc.clientId}" class="ui-g project-version-container">
-    <div class="ui-g-3 ui-sm-6">
+    <div class="ui-g-3 ui-sm-6 pl-0">
       <h:outputText id="engine-version-label" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/engineVersion')}:" />
     </div>
-    <div class="ui-g-9 ui-sm-6">
+    <div class="ui-g-9 ui-sm-6 TexAlRight pl-0">
       <h:outputText id="engine-version" value="#{projectVersionBean.engineVersion}" />
     </div>
-
-    <div class="ui-g-3 ui-sm-6">
+    <div class="ui-g-3 ui-sm-6 pl-0">
       <h:outputText id="portal-version-label" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/portalVersion')}:" />
     </div>
-    <div class="ui-g-9 ui-sm-6">
+    <div class="ui-g-9 ui-sm-6 TexAlRight">
       <h:outputText id="portal-version" value="#{projectVersionBean.portalVersion}" />
     </div>
 
     <h:panelGroup rendered="#{not empty projectVersionBean.projectLibraries}">
       <ui:repeat id="application-list" value="#{projectVersionBean.projectLibraries.entrySet().toArray()}" var="entry">
-        <div class="ui-g-12">
+        <div class="ui-g-12 pl-0">
           <p:dataTable id="application-project-version-table" value="#{entry.value}" var="library" styleClass="project-version-table"
             reflow="true" lazy="false">
             <f:facet name="header">
@@ -35,13 +34,13 @@
             <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/projectName')}">
               <h:outputText id="project-name" value="#{library.getProcessModelVersion().getProcessModel().getName()}" />
             </p:column>
-            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/version')}" styleClass="project-version">
+            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/projectInfo/version')}" styleClass="project-version" >
               <h:outputText id="project-version" value="#{library.getQualifiedVersion().toString()}" />
             </p:column>
-            <p:column headerText="PMV" width="35">
+            <p:column headerText="PMV" width="35" styleClass="project-pmv">
               <h:outputText id="pmv" value="#{library.getProcessModelVersion().getVersionNumber()}" />
             </p:column>
-            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/state')}" styleClass="project-state">
+            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/state')}" styleClass="project-state" >
               <h:outputText id="state" value="#{projectVersionBean.translateReleaseState(library.getProcessModelVersion().getReleaseState())}" />
             </p:column>
           </p:dataTable>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/RoleManagement/RoleManagement.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/RoleManagement/RoleManagement.xhtml
index 0b6b534d632..2d02a5dbb7d 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/RoleManagement/RoleManagement.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/RoleManagement/RoleManagement.xhtml
@@ -14,7 +14,7 @@
   <h:form id="role-management-form" styleClass="ui-g">
     <div class="ui-g-12 u-text-align-right u-padding-0 create-role-container">
       <p:commandButton id="create-role-button"
-        icon="si si-add"
+        styleClass="create-role-btn primary-color-light-button"
         value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/CreateRole')}"
         actionListener="#{roleManagementBean.prepareAddingNewRole()}"
         oncomplete="PF('role-details-dialog').show()"
@@ -25,7 +25,7 @@
         rendered="#{roleManagementBean.canCreateRole}"/>
     </div>
     <div class="ui-g-12 u-padding-0">
-      <p:treeTable id="role-tree-table" widgetVar="role-tree-table"
+      <p:treeTable id="role-tree-table" widgetVar="role-tree-table" 
         value="#{roleManagementBean.roleTreeModel.tree}"
         var="role"
         emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/RoleNotFound')}"
@@ -156,140 +156,148 @@
     <c:set var="selectedRoleName" value="#{creationMode ? '' : roleManagementBean.selectedRole.name}" scope="request"/>
 
     <f:facet name="header">
-      <h:outputText styleClass="role-details-header" value="#{roleManagementBean.roleInformationHeaderDialog}"/>
+      <h:outputLabel styleClass="role-details-header" value="#{roleManagementBean.roleInformationHeaderDialog}"/>
     </f:facet>
 
-    <h:form id="manage-role-details-form" styleClass=" manage-role-details-form MarTop5">
-      <h:panelGroup styleClass="card ui-g" layout="block" rendered="#{roleManagementBean.canModifyRoleInformation}">
-        <div class="ui-g-12">
-          <h4 class="role-management-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/RoleInformation')}</h4>
+    <h:form id="manage-role-details-form" styleClass="manage-role-details-form MarTop5">
+      <h:panelGroup styleClass="w-full" layout="block" rendered="#{roleManagementBean.canModifyRoleInformation}">
+        <div class="field ">
+          <h5 class="role-management-title" >#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/RoleInformation')}</h5>
         </div>
 
         <div class="ui-g-12 u-no-padding-top u-no-padding-bottom">
           <p:messages redisplay="false" />
         </div>
 
-        <h:panelGroup rendered="#{creationMode}" layout="block" styleClass="ui-g-12 u-padding-0">
+        <h:panelGroup rendered="#{creationMode}" layout="block" styleClass="field w-full">
           <ic:com.axonivy.portal.components.RoleSelection id="parent-role"
             componentId="parent-role-selection"
             selectedRole="#{roleManagementBean.selectedParentRole}"
             isRequired="#{roleManagementBean.canMoveRole}"
             isDisabled="#{!roleManagementBean.canMoveRole}"
             label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/ParentRole')}"
-            labelPanelStyleClass="ui-g-4 ui-lg-3 ui-md-4 ui-sm-12 role-management-label"
-            autoCompletePanelStyleClass="ui-g-8 ui-lg-9 ui-md-8 ui-sm-12 role-management-value ui-fluid"
+            labelPanelStyleClass="mb-2 role-management-label font-medium"
+            autoCompletePanelStyleClass="w-full role-management-value ui-fluid"
             requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/ParentRoleIsRequired')}"
             isRenderedMessage="false" displayNameInSelectionListStyleClass="u-truncate-text" />
         </h:panelGroup>
 
-        <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/name')}" for="role-name"
-          styleClass="ui-g-4 ui-lg-3 ui-md-4 ui-sm-12 role-management-label" />
-        <div class="ui-g-8 ui-lg-9 ui-md-8 ui-sm-12 role-management-value ui-fluid">
-          <p:inputText id="role-name"
-            value="#{roleManagementBean.selectedRole.name}"
-            disabled="#{!creationMode}"
-            required="#{creationMode}"
-            requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/RoleNameIsRequired')}"
-            maxlength="200" />
-        </div>
+        <h:panelGroup styleClass="field" layout="block">
+          <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/name')}" for="role-name"
+            styleClass="role-management-label font-medium w-full" />
+          <div class="w-full role-management-value ui-fluid">
+            <p:inputText id="role-name"
+              value="#{roleManagementBean.selectedRole.name}"
+              disabled="#{!creationMode}"
+              required="#{creationMode}"
+              requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/RoleNameIsRequired')}"
+              maxlength="200" />
+          </div>
+        </h:panelGroup>
 
-        <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/displayName')}"
-          for="role-display-name" styleClass="ui-g-4 ui-lg-3 ui-md-4 ui-sm-12 role-management-label" />
-        <div class="ui-g-8 ui-lg-9 ui-md-8 ui-sm-12 role-management-value ui-fluid">
-          <p:inputText id="role-display-name" value="#{roleManagementBean.selectedRole.displayName}" maxlength="200" />
-        </div>
+        <h:panelGroup styleClass="field" layout="block">
+          <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/displayName')}"
+            for="role-display-name" styleClass="role-management-label font-medium" />
+          <div class="role-management-value ui-fluid">
+            <p:inputText id="role-display-name" value="#{roleManagementBean.selectedRole.displayName}" maxlength="200" />
+          </div>
+        </h:panelGroup>
 
-        <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/description')}" for="role-description"
-          styleClass="ui-g-4 ui-lg-3 ui-md-4 ui-sm-12 role-management-label" />
-        <div class="ui-g-8 ui-lg-9 ui-md-8 ui-sm-12 role-management-value ui-fluid">
-          <p:inputText id="role-description" value="#{roleManagementBean.selectedRole.description}" />
-        </div>
+        <h:panelGroup styleClass="field" layout="block">
+          <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/description')}" for="role-description"
+            styleClass="role-management-label font-medium" />
+          <div class="role-management-value ui-fluid">
+            <p:inputText id="role-description" value="#{roleManagementBean.selectedRole.description}" />
+          </div>
+        </h:panelGroup>
       </h:panelGroup>
 
-      <h:panelGroup styleClass="card ui-g" rendered="#{roleManagementBean.canModifyUserAssignment}">
-        <div class="ui-g-12">
-          <h4 class="role-management-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/UserAssignment')}</h4>
-        </div>
-
-        <h:panelGroup id="user-assignment-group" layout="block" styleClass="ui-g-12 u-padding-0 user-assignment-group">
-          <ic:com.axonivy.portal.components.UserSelection id="user-assignment-selection"
-            selectedUser="#{roleManagementBean.selectedUser}"
-            label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/AvailableUsers')}"
-            labelPanelStyleClass="ui-g-4 ui-lg-3 ui-md-4 ui-sm-12 role-management-label"
-            autoCompletePanelStyleClass="ui-g-8 ui-lg-9 ui-md-8 ui-sm-12 role-management-value ui-fluid"
-            excludedUsernames="#{roleManagementBean.distinctExcludedUsernames}"
-            isRenderedMessage="false" hasCustomizedSelectionList="true">
-            <p:column styleClass="ui-g-12">
-              <pc:securityMemberNameAndAvatar securityMember="#{user}"
-                displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForUserDTO(user)}"
-                displayNameStyleClass="u-truncate-text" />
-            </p:column>
-            <f:facet name="event">
-              <p:ajax event="itemSelect" oncomplete="PF('add-new-user-button').enable()" />
-            </f:facet>
-          </ic:com.axonivy.portal.components.UserSelection>
-
-          <div class="user-assign-actions ui-g-12 u-no-padding-top u-text-align-right">
-            <p:commandButton id="add-new-user"
-              widgetVar="add-new-user-button"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}"
-              icon="si si-add"
-              actionListener="#{roleManagementBean.assignUserToRole()}"
-              update="users-of-role-table user-assignment-group"
-              process="user-assignment-group"
-              disabled="#{empty roleManagementBean.selectedUser}" />
-          </div>
+      <h:panelGroup layout="block" styleClass="w-full" rendered="#{roleManagementBean.canModifyUserAssignment}">
+        <h:panelGroup layout="block" styleClass="field mb-4 #{roleManagementBean.canModifyRoleInformation ? 'mt-5' : ''}">
+          <h5 class="role-management-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/UserAssignment')}</h5>
         </h:panelGroup>
 
-        <p:dataTable id="users-of-role-table" widgetVar="users-of-role-table"
-          value="#{roleManagementBean.userAssignmentModel}" var="user"
-          paginator="true" rows="5"
-          paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
-          paginatorPosition="bottom"
-          rowsPerPageTemplate="5,10,15"
-          emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/UserOfRoleNotFound')}"
-          styleClass="ui-g-12 users-of-role-table"
-          lazy="true"
-          rowKey="#{user.name}">
-          <f:facet name="header">
-            <div class="u-text-align-left">
-              <h:outputText styleClass="u-font-bold"
-                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/ListUsers', [selectedRoleName])}" />
+        <h:panelGroup styleClass="field" layout="block">
+          <p:outputLabel styleClass="admin-settings-display-name-3rd-label"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/AvailableUsers')}" for="user-assignment-selection" />
+          <h:panelGroup id="user-assignment-group" layout="block" styleClass="role-management-label">
+            <div class="flex gap-2">
+              <div class="flex flex-1">
+                <ic:com.axonivy.portal.components.UserSelection id="user-assignment-selection"
+                  selectedUser="#{roleManagementBean.selectedUser}"
+                  autoCompletePanelStyleClass="w-full role-management-value ui-fluid"
+                  excludedUsernames="#{roleManagementBean.distinctExcludedUsernames}"
+                  isRenderedMessage="false" hasCustomizedSelectionList="true">
+                  <p:column styleClass="ui-g-12">
+                    <pc:securityMemberNameAndAvatar securityMember="#{user}"
+                      displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForUserDTO(user)}"
+                      displayNameStyleClass="u-truncate-text" />
+                  </p:column>
+                  <f:facet name="event">
+                    <p:ajax event="itemSelect" oncomplete="PF('add-new-user-button').enable()" />
+                  </f:facet>
+                </ic:com.axonivy.portal.components.UserSelection>
+              </div>
+    
+              <div class="flex flex-none">
+                <p:commandButton id="add-new-user"
+                  widgetVar="add-new-user-button"
+                  value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}"
+                  icon="si si-add"
+                  actionListener="#{roleManagementBean.assignUserToRole()}"
+                  update="users-of-role-table user-assignment-group"
+                  process="user-assignment-group"
+                  disabled="#{empty roleManagementBean.selectedUser}" />
+              </div>
             </div>
-          </f:facet>
+          </h:panelGroup>
+        </h:panelGroup>
 
-          <c:set var="showInheritedMembership" value="#{!user.directlyAssignedRole and !roleManagementBean.creationMode}"/>
-          <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/displayName')}"
-            filterable="true"
-            filterBy="#{user.displayName}">
-            <h:panelGroup styleClass="users-of-role-container">
-              <pc:securityMemberNameAndAvatar securityMember="#{user.iUser}"
-                displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForSecurityMember(user.iUser, user.name)}"
-                displayNameStyleClass="u-truncate-text"
-                containerStyleClass="user-displayname" />
-            </h:panelGroup>
-          </p:column>
-          <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/information')}">
-            <h:outputText styleClass="role-membership"
-              value="#{showInheritedMembership ? ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/InheritedMembership'):''}" />
-          </p:column>
-          <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
-            styleClass="action-group u-text-align-center" width="100px">
-            <h:panelGroup id="user-of-role-action-group">
-              <p:commandLink id="delete-user-link" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-                styleClass="action-column-icon-button"
-                update="users-of-role-table #{cc.clientId}:manage-role-details-form:user-assignment-group"
-                process="@this" partialSubmit="true"
-                actionListener="#{roleManagementBean.removeUserOutOfRole(user)}"
-                disabled="#{showInheritedMembership}">
-                <i class="si si-bin-1" />
-              </p:commandLink>
-            </h:panelGroup>
-            <p:tooltip for="user-of-role-action-group"
-              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/CannotDeleteUserTooltip')}"
-              rendered="#{showInheritedMembership}" />
-          </p:column>
-        </p:dataTable>
+        <h:panelGroup styleClass="field" layout="block">
+          <p:dataTable id="users-of-role-table" widgetVar="users-of-role-table"
+            value="#{roleManagementBean.userAssignmentModel}" var="user"
+            paginator="true" rows="5"
+            paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
+            paginatorPosition="bottom"
+            rowsPerPageTemplate="5,10,15"
+            emptyMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/Messages/UserOfRoleNotFound')}"
+            styleClass="users-of-role-table"
+            lazy="true"
+            rowKey="#{user.name}">
+  
+            <c:set var="showInheritedMembership" value="#{!user.directlyAssignedRole and !roleManagementBean.creationMode}"/>
+            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/displayName')}"
+              filterable="true"
+              filterBy="#{user.displayName}">
+              <h:panelGroup styleClass="users-of-role-container">
+                <pc:securityMemberNameAndAvatar securityMember="#{user.iUser}"
+                  displayName="#{securityMemberDisplayNameFormatBean.generateFullDisplayNameForSecurityMember(user.iUser, user.name)}"
+                  displayNameStyleClass="u-truncate-text"
+                  containerStyleClass="user-displayname" />
+              </h:panelGroup>
+            </p:column>
+            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/information')}">
+              <h:outputText styleClass="role-membership"
+                value="#{showInheritedMembership ? ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/InheritedMembership'):''}" />
+            </p:column>
+            <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
+              styleClass="action-group u-text-align-center" width="100px">
+              <h:panelGroup id="user-of-role-action-group">
+                <p:commandLink id="delete-user-link" title="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+                  styleClass="action-column-icon-button"
+                  update="users-of-role-table #{cc.clientId}:manage-role-details-form:user-assignment-group"
+                  process="@this" partialSubmit="true"
+                  actionListener="#{roleManagementBean.removeUserOutOfRole(user)}"
+                  disabled="#{showInheritedMembership}">
+                  <i class="si si-bin-1" />
+                </p:commandLink>
+              </h:panelGroup>
+              <p:tooltip for="user-of-role-action-group"
+                value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/components/RoleManagement/CannotDeleteUserTooltip')}"
+                rendered="#{showInheritedMembership}" />
+            </p:column>
+          </p:dataTable>
+        </h:panelGroup>
       </h:panelGroup>
     </h:form>
 
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
index 7a55612da93..b3df89c0732 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/SideStep/SideStep.xhtml
@@ -80,14 +80,6 @@
       <span class="option-item-label option-item-long-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskInformation/clearExpiry')}</span>
     </p:commandLink>
     
-    <p:commandLink id="task-destroy-command" disabled="#{!taskActionBean.canDestroyTask(task)}" rendered="#{taskActionBean.showDestroyTask}"
-      styleClass="option-item color-destroy ui-menu-items" update="@parent #{cc.attrs.componentToUpdate}"
-      actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
-      oncomplete="#{cc.attrs.onDestroyComplete}" process="@this" global="false">
-      <i class="option-action-icon pi pi-trash" />
-      <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}</span>
-    </p:commandLink>
-    
     <p:commandLink id="task-trigger-escalation-command" disabled="#{!taskActionBean.canExpiry(task)}"
       styleClass="option-item ui-menu-items" update="@parent #{cc.attrs.componentToUpdate}"
       actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
@@ -113,6 +105,14 @@
       <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/ProcessViewer/ProcessViewerText')}</span>
     </p:link>
 
+    <p:commandLink id="task-destroy-command" disabled="#{!taskActionBean.canDestroyTask(task)}" rendered="#{taskActionBean.showDestroyTask}"
+      styleClass="option-item color-destroy ui-menu-items" update="@parent #{cc.attrs.componentToUpdate}"
+      actionListener="#{taskActionBean.updateSelectedTaskItemId(isShowInTaskList, task.id)}"
+      oncomplete="#{cc.attrs.onDestroyComplete}" process="@this" global="false">
+      <i class="option-action-icon pi pi-trash" />
+      <span class="option-item-label">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}</span>
+    </p:commandLink>
+
     <h:panelGroup id="task-additional-actions" layout="block" rendered="#{cc.attrs.renderedAdditionalAction}">
       <f:event listener="#{sideStepBean.getSideSteps(task.getId(), task.case.getId())}" type="preRenderComponent" />
       <p:divider styleClass="task-action-separator" />
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLeavingTask/WarningBeforeLeavingTask.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLeavingTask/WarningBeforeLeavingTask.xhtml
index 271b8cbcac8..7c4c786faa2 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLeavingTask/WarningBeforeLeavingTask.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLeavingTask/WarningBeforeLeavingTask.xhtml
@@ -26,29 +26,32 @@
     
     <ui:define name="dialogContentSection">
       <cc:insertFacet name="event" />
-      <h:outputText escape="false" value="#{htmlSanitizerBean.sanitize(ivy.cms.co(cc.attrs.taskState == 'CREATED' ? '/ch.ivy.addon.portalkit.ui.jsf/taskWarning/createdTaskLeave' : '/ch.ivy.addon.portalkit.ui.jsf/taskWarning/resetParkTaskBeforeLeave'))}" styleClass="ui-confirm-dialog-message" />
+      <h:outputText escape="false"
+        value="#{htmlSanitizerBean.sanitize(ivy.cms.co(cc.attrs.taskState == 'CREATED' ? '/ch.ivy.addon.portalkit.ui.jsf/taskWarning/createdTaskLeave' : '/ch.ivy.addon.portalkit.ui.jsf/taskWarning/resetParkTaskBeforeLeave'))}"
+        styleClass="ui-confirm-dialog-message" />
     </ui:define>
 
     <ui:define name="dialogFooter">
       <h:form prependId="false">
-        <p:commandLink onclick="PF('#{cc.attrs.widgetVar}').hide();#{cc.attrs.cancelOnClick}"
-          actionListener="#{cc.attrs.cancelActionListener}"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" />
-        <p:spacer width="15px" />
-        <p:commandButton id="reserve-task-button" actionListener="#{cc.attrs.reserveActionListener}"
-          process="@this" update="@none" rendered="#{cc.attrs.taskState != 'CREATED'}"
-          icon="#{visibilityBean.generateButtonIcon('si si-touch-finger_1')}"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/reserve')}"
-          styleClass="ui-confirmdialog-yes secondary-btn"
-          oncomplete="#{cc.attrs.reserveOnComplete}" />
-        <p:commandButton id="leave-button" actionListener="#{cc.attrs.leaveActionListener}"
-          process="@this" update="@none"
-          icon="#{visibilityBean.generateButtonIcon('si si-arrow-left')}"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/leave')}"
-          styleClass="ui-confirmdialog-yes"
-          oncomplete="#{cc.attrs.leaveOnComplete}" />
-        <p:tooltip for="reserve-task-button" trackMouse="true" rendered="#{cc.attrs.taskState != 'CREATED'}"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/leaveAndReserve')}" />
+        <div class="w-full flex gap-2">
+          <p:commandButton id="leave-button"
+            actionListener="#{cc.attrs.leaveActionListener}" process="@this" update="@none"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/leave')}"
+            styleClass="w-6 mx-0 ui-leave-button" oncomplete="#{cc.attrs.leaveOnComplete}" />
+          <p:tooltip for="reserve-task-button" trackMouse="true" rendered="#{cc.attrs.taskState != 'CREATED'}"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/leaveAndReserve')}" />
+          <p:commandButton id="reserve-task-button" actionListener="#{cc.attrs.reserveActionListener}"
+            process="@this" update="@none" rendered="#{cc.attrs.taskState != 'CREATED'}"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/reserve')}"
+            styleClass="w-6 mx-0 ui-reserve-task-button" oncomplete="#{cc.attrs.reserveOnComplete}" />
+        </div>
+        <div class="w-full flex justify-content-center mt-2">
+          <p:commandButton id="cancel-button"
+            onclick="PF('#{cc.attrs.widgetVar}').hide();#{cc.attrs.cancelOnClick}"
+            actionListener="#{cc.attrs.cancelActionListener}"
+            styleClass="ui-confirmdialog-yes w-full mx-0 ui-cancel-button ui-button-flat transparent"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" />
+        </div>
       </h:form>
     </ui:define>
   </ui:decorate>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLostSession/WarningBeforeLostSession.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLostSession/WarningBeforeLostSession.xhtml
index 6b78cd3a9ca..a8acdb19340 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLostSession/WarningBeforeLostSession.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/WarningBeforeLostSession/WarningBeforeLostSession.xhtml
@@ -23,7 +23,7 @@
 
     <ui:define name="dialogFooter">
       <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/warningBeforeLostSession/refreshSession')}"
-        icon="#{visibilityBean.generateButtonIcon('si si-monitor-refresh')}" onclick="PortalSessionWarning.keepPortalAlive(); return false;" />
+        styleClass="w-full" onclick="PortalSessionWarning.keepPortalAlive(); return false;" />
     </ui:define>
   </ui:decorate>
 
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/multiapp/settings/PasswordSetting/PasswordSetting.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/multiapp/settings/PasswordSetting/PasswordSetting.xhtml
index 6c49fa7a3c1..37c20ff8819 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/multiapp/settings/PasswordSetting/PasswordSetting.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/multiapp/settings/PasswordSetting/PasswordSetting.xhtml
@@ -24,7 +24,7 @@
         columnClasses="change-password-column">
         <p:outputLabel for="current-password"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/currentPassword')}" />
-        <p:password required="true" id="current-password" value="#{data.currentPassword}"
+        <p:password required="true" id="current-password" value="#{data.currentPassword}" styleClass="mb-3"
           requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/requireCurrentPassword')}" />
 
         <p:outputLabel for="new-password"
@@ -35,28 +35,22 @@
           </h:panelGroup>
         </p:outputLabel>
 
-        <p:password required="true" id="new-password"
+        <p:password required="true" id="new-password" styleClass="mb-3"
           value="#{data.newPassword}" match="confirm-new-password"
           validatorMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/confirmPasswordHaveMatch')}"
           requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/requireNewPassword')}" />
 
         <p:outputLabel for="confirm-new-password"
           value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/confirmNewPassword')}" />
-        <p:password required="true" id="confirm-new-password" value="#{data.confirmPassword}"
+        <p:password required="true" id="confirm-new-password" value="#{data.confirmPassword}" styleClass="mb-3"
           requiredMessage="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/passwordSetting/requireConfirmPassword')}" />
-      </h:panelGrid>
 
-      <h:panelGroup layout="block" styleClass="u-text-align-right MarTop10">
-        <p:commandLink id="cancel-password-setting"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-          onclick="PF('#{cc.attributes.dialogName}').hide();" />
-        <p:spacer width="15" />
-        <p:commandButton id="save-password-setting"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/change')}" actionListener="#{logic.updatePassword}"
-          icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
+        <p:commandButton id="save-password-setting" styleClass="mt-3"
+          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}" actionListener="#{logic.updatePassword}"
           update="change-password-panel change-password-successful change-password-messages"
           oncomplete="if (args &amp;&amp; !args.validationFailed) {PF('#{cc.attrs.dialogName}').hide()}" />
-      </h:panelGroup>
+      </h:panelGrid>
+
     </h:panelGroup>
   </div>
   <p:tooltip escape="false" value="#{htmlSanitizerBean.sanitize(data.passwordPolicyInfo)}" styleClass="change-password-tooltip" for="password-requirement-info" position="right" hideEvent="mouseleave click" />
diff --git a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
index 66dc0bc7663..7bbafe68426 100644
--- a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
+++ b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/DashboardImportDetails/DashboardImportDetails.xhtml
@@ -80,8 +80,7 @@
                     value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/dashboardIcon')}" />
                 </div>
                 <div class="ui-g-8">
-                  <ic:ch.ivy.addon.portalkit.component.IconSelection
-                    value="#{dashboard.icon}" />
+                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{dashboard.icon}" />
                 </div>
 
                 <div class="ui-g-4 manage-dashboard__label">
diff --git a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/ManageNews.xhtml b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/ManageNews.xhtml
index 19afc8ab07b..a04c185ff48 100644
--- a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/ManageNews.xhtml
+++ b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/ManageNews.xhtml
@@ -29,7 +29,7 @@
 
             <div class="management-news__title-group">
               <ic:ch.ivy.addon.portalkit.component.IconSelection id="news-icon" value="#{news.icon}"
-                hideChangeIconLink="true" />
+                hideIconArray="true" />
               <div class="ui-fluid management-news__title-input ui-inputgroup">
                 <p:inputText id="news-title" required="#{requiredLanguage and param['skipValidator'] == null}"
                   placeholder="#{ivy.cms.co('/Dialogs/com/axonivy/portal/dashboard/component/NewsWidget/NewsTitlePlaceholder')}"
diff --git a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/NewsItem.xhtml b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/NewsItem.xhtml
index 89088b930d2..ca8bf46002f 100644
--- a/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/NewsItem.xhtml
+++ b/AxonIvyPortal/portal/src_hd/com/axonivy/portal/dashboard/component/NewsWidget/NewsItem.xhtml
@@ -9,7 +9,7 @@
   <div id="#{newsItemId}" class="news-item">
     <div class="news-item__header">
       <span class="news__icon">
-        <ic:ch.ivy.addon.portalkit.component.IconSelection id="news-icon"
+        <ic:ch.ivy.addon.portalkit.component.IconSelection id="news-icon" hideIconArray="true"
           value="#{news.icon}" isReadOnly="true" />
       </span>
       <h:outputText id="news__title" styleClass="news__title line-clamp-text-2" value="#{news.name}" />
diff --git a/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml b/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
index c0b447eaece..6c1342652ba 100644
--- a/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/decorator/portal-dialog-with-icon.xhtml
@@ -6,8 +6,8 @@
   widgetVar="#{widgetVar}"
   id="#{not empty id? id : widgetVar}"
   modal="true"
-  closable="#{not empty closeable? closeable : 'false'}"
-  closeOnEscape="#{not empty closeOnEscape ? closeOnEscape : 'true'}"
+  closable="true"
+  closeOnEscape="true"
   style="max-width: #{not empty maxWidth ? maxWidth : '500px'}"
   styleClass="#{styleClass} portal-dialog"
   responsive="#{not empty repsonsive? responsive : 'true'}" 
@@ -17,13 +17,12 @@
   appendTo="#{not empty appendTo ? appendTo : ''}">
   
   <div class="u-text-align-center">
-    <i class="#{not empty iconClass ? iconClass : 'si si-information-circle'} #{not empty iconStyleClass? iconStyleClass : 'portal-dialog-info-icon'} portal-dialog-icon" />
-    <h2 class="text-xl" >#{not empty headerText? headerText : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmationHeaderText')}</h2>
+    <h2>#{not empty headerText? headerText : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmationHeaderText')}</h2>
   </div>
   
   <ui:insert name="dialogContentSection" />
   
-  <h:panelGroup layout="block" rendered="#{not empty dialogContent}" class="u-text-align-center portal-dialog-content">
+  <h:panelGroup layout="block" rendered="#{not empty dialogContent}" class="u-text-align-center portal-dialog-content portal-exception-dialog-content">
     <h:outputText escape="false" value="#{htmlSanitizerBean.sanitize(dialogContent)}" />
   </h:panelGroup>
   
diff --git a/AxonIvyPortal/portal/webContent/layouts/includes/portalException.xhtml b/AxonIvyPortal/portal/webContent/layouts/includes/portalException.xhtml
index ac29732832a..4f1628121c7 100644
--- a/AxonIvyPortal/portal/webContent/layouts/includes/portalException.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/includes/portalException.xhtml
@@ -21,8 +21,8 @@
         <ui:param name="dialogContent" value="#{ivy.session.isSessionUserUnknown()? ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/sessionExpried') : ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/viewExpired')}" />
         
         <ui:define name="dialogFooter">
-          <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}"
-            onclick="redirectDefaultPage();" icon="#{visibilityBean.generateButtonIcon('si si-check-1')}" type="button" />
+          <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}" styleClass="w-full"
+            onclick="redirectDefaultPage();" type="button" />
         </ui:define>
       </ui:decorate>
     </ui:fragment>
diff --git a/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml b/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
index f99ee46181f..e987ae613c0 100644
--- a/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/includes/topbar.xhtml
@@ -145,10 +145,6 @@
         closeOnEscape="true" widgetVar="project-info-dialog" id="project-info-dialog" resizable="false" modal="true" draggable="false"
         appendTo="@(body)" dynamic="true" responsive="true" fitViewport="true">
         <ic:ch.ivy.addon.portalkit.component.ProjectVersion id="project-version" />
-        <div class="u-dialog-footer-actions-group">
-          <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/close')}" id="project-version-close-button" type="button"
-            icon="#{visibilityBean.generateButtonIcon('si si-remove')}" onclick="PF('project-info-dialog').hide();" />
-        </div>
       </p:dialog>
       
       <p:dialog header="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/applicationMenuHeader/MobileApp')}" width="620" 
diff --git a/AxonIvyPortal/portal/webContent/resources/css/module.css b/AxonIvyPortal/portal/webContent/resources/css/module.css
index a833cabcc5d..019b426923f 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/module.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/module.css
@@ -2279,21 +2279,6 @@ _:-ms-fullscreen, :root .additional-case-details-link {
 }
 
 /* Override Primefaces styles */
-.icon-selection-dialog-selecting-icon {
-  display: inline-flex;
-  width: 35px;
-  height: 35px;
-  cursor: pointer;
-}
-
-.icon-selection-dialog-selecting-icon .fa, .icon-selection-dialog-selecting-icon .si {
-  margin: auto;
-}
-
-_:-ms-input-placeholder, :root .icon-selection-dialog-selecting-icon .fa {
-  top: 50%;
-  transform: translateY(25%);
-}
 
 a[id*=application-menu-item]>span.ui-menuitem-text {
   min-width: 5ex !important;
@@ -2679,36 +2664,70 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
 
 @media screen and (min-width: 64.062em) {
   .project-info-dialog {
-    min-width: 1000px;
+    min-width: 600px;
   }
 }
 
 /******************************** PROJECT INFO DIALOG ******************************/
 .project-info-dialog {
-  max-width: 1000px;
+  max-width: 600px;
 }
 
 .project-info-dialog .project-version-table .project-version {
-  width: 180px;
+  width: 150px;
+}
+
+.project-info-dialog .project-version-table .project-pmv {
+  text-align: center;
 }
 
 .project-info-dialog .project-version-table .project-state {
-  width: 120px;
+  width: 80px;
 }
 
 @media screen and (max-width: 64.062em) {
-  .project-info-dialog .project-version-table .project-version,
-  .project-info-dialog .project-version-table .project-state {
+  .project-info-dialog .project-version-table .project-version {
     width: auto;
   }
+  .project-info-dialog .project-version-table .project-state {
+    width: 80px;
+  }
+  
+  .project-info-dialog .project-version-table .project-pmv {
+    text-align: inherit;
+  }
 }
 /******************************** END PROJECT INFO DIALOG **************************/
 
 /********************************** ADMIN SETTING **********************************/
+.admin-setting-card {
+  padding: 30px;
+}
+
+.admin-setting-card .admin-setting-header h2{
+  padding: 0;
+  margin-bottom: 2rem;
+}
+
+.admin-setting-card .applications-setting-info {
+  color: var(--ivy-primary-color);
+  font-size: large;
+}
+
+.admin-setting-card .application-table {
+  margin-bottom: 2rem;
+  margin-top: 0.5rem;
+}
+
 .admin-ui-dialog {
   max-width: 80vw;
 }
 
+.admin-setting-tab .ui-tabs-panel.ui-widget-content.ui-corner-bottom {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @media screen and (max-height: 615px) {
   .admin-ui-dialog .ui-dialog-content {
     height: 55vh !important;
@@ -2719,25 +2738,46 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
   text-align: left !important;
 }
 
-.action-column-icon-button {
+.applications-setting-info-circle {
+  margin: auto 0;
+}
+
+.action-column-icon-button i {
   margin: 0 5px;
+  color: var(--portal-button-color)
 }
 
-.setting-tab-action-buttons, .application-tab-action-buttons, .application-selection-action-buttons,
+.application-tab-action-buttons, .application-selection-action-buttons,
 .announcement-tab-action-buttons,
 .create-role-container {
   text-align: right;
   margin: .5em 0;
 }
 
+.application-tab-action-buttons .new-app-btn, .create-role-container .create-role-btn {
+  width: 100%;
+  height: 3.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.5rem;
+}
+
 .admin-settings-form-input-label {
   float: right;
   padding-top: 5px;
 }
 
-.admin-settings-portal-link-label, .admin-settings-display-name-3rd-label {
-  float: right;
-  padding-top: 2px;
+.admin-settings-portal-link-label, .admin-settings-display-name-3rd-label,
+.admin-settings-application-icon {
+  font-weight: 500;
+}
+
+
+.application-name-language.ui-dialog .ui-dialog-titlebar,.app-dialog.ui-dialog .ui-dialog-titlebar,
+.role-details-dialog.ui-dialog .ui-dialog-titlebar, .setting-dialog.ui-dialog .ui-dialog-titlebar {
+  padding-bottom: 1rem;
 }
 
 .app-icon {
@@ -2803,7 +2843,7 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
   margin: 10px !important;
 }
 
-.new-app, .ui-dialog-footer button {
+.ui-dialog-footer button {
   min-width: 90px;
   margin-bottom: 6px;
 }
@@ -2820,9 +2860,12 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
 .absences-table-action-column,
 .ui-datatable thead th.absences-table-action-column {
   text-align: center;
-  width: 130px;
+  width: 90px;
 }
 
+.absence-table .ui-datatable-empty-message td {
+  padding-left: 0 !important;
+}
 @media (max-width: 768px) {
   .absences-table-action-column-icon-button {
     margin: 0 5px !important;
@@ -2932,7 +2975,11 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
 
 .choose-deputy-dialog .deputy-selection-panel .add-deputy-button {
   float: right;
-  margin-top: 15px;
+}
+
+.choose-deputy-dialog .deputy-selection-panel .selected-deputy-panel {
+  border: none;
+  padding: 1rem 0;
 }
 
 .choose-deputy-dialog .deputy-selection-panel .selected-deputy-panel .deputy-selection {
@@ -2959,6 +3006,9 @@ _:-ms-fullscreen, :root .circle-process-chain .circle-vertical-process-step:not(
   margin-top: 10px;
 }
 
+.choose-deputy-dialog .ui-dialog-titlebar {
+  padding: 1.5rem 1.5rem 1rem 28px !important;
+}
 /**********************************END ABSENCES AND DEPUTY **********************************/
 .application-language-header {
   width: 20%;
@@ -2984,6 +3034,10 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   width: 300px;
 }
 
+.change-password-dialog .ui-dialog-titlebar {
+  padding: 1.5rem 1.5rem 18px 1.5rem !important;
+}
+
 @media screen and (max-width: 40em) {
   .change-password-dialog {
     max-width: 96vw;
@@ -3006,8 +3060,10 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
 }
 
 .user-profile-footer {
-  margin-top: 25px;
   text-align: right;
+  position: absolute;
+  bottom: 0;
+  right: 0.5rem;
 }
 
 .user-profile-footer .ui-button {
@@ -3046,6 +3102,7 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   height: auto;
   float: left;
   width: 100%;
+  padding: 2.25rem;
 }
 
 .my-profile-container .portal-section-container.general-section-container {
@@ -3093,6 +3150,14 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   }
 }
 
+.my-profile-block:not(:last-child) {
+  margin-bottom: 2.25rem;
+}
+
+.user-profile-setting-title {
+  margin-bottom: 0.5rem;
+}
+
 /********************************** END USER PROFILE SETTING **********************************/
 
 /********************************** ABSENCES SETTING *********************************************/
@@ -3107,10 +3172,6 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   height: 100%;
 }
 
-.absences-management-form .add-absence-panel {
-  text-align: right;
-}
-
 .deputy-for-next-absence {
   width: inherit;
 }
@@ -3119,6 +3180,10 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   display: none;
 }
 
+.substitution-table .ui-datatable-empty-message td {
+  padding-left: 0 !important;
+}
+
 .absences-management-container .substitute-table tbody.ui-datatable-data .substition-role-display-name,
 .substitute-table .task-responsible-link,
 .absences-management-container .substitution-table tbody.ui-datatable-data .substition-role-display-name {
@@ -3126,13 +3191,23 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   line-break: anywhere;
 }
 
+.ui-button.primary-color-light-button {
+  background: var(--portal-accessibility-bg-color); 
+  color: var(--portal-button-text-color);
+  font-weight: 600;
+  height: 3.25rem;
+}
+
+.ui-button.primary-color-light-button:hover {
+  background: hsla(var(--ivy-primary-light-color-h), var(--ivy-primary-light-color-s), 89%, 1); 
+  color: var(--ivy-primary-color);
+}
+
+.add-absence-dialog .ui-dialog-titlebar {
+  padding: 1.5rem 1.5rem 0 1.5rem !important;
+}
+
 @media screen and (max-width: 40em) {
-  .absences-management-form .add-absence-panel {
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 
   .add-absence-dialog {
     max-width: 98vw;
@@ -3150,6 +3225,29 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   .absences-management-form .portal-section-container.card {
     padding: 0;
   }
+  
+  .user-profile-card {
+    flex-direction: column;
+  }
+  
+  .responsive-divider {
+    display: none !important;
+  }
+  
+  .user-profile-card-left {
+    padding-right: .5rem !important;
+  }
+  
+  .user-profile-card-right {
+    padding-left: .5rem !important;
+    margin-top: 1.5rem;
+  }
+  
+  .user-profile-footer {
+    position: unset;
+    margin-top: 2rem;
+  }
+  
 }
 
 @media screen and (min-width: 90.063em) {
@@ -3218,11 +3316,15 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
     margin: auto;
   }
   
-  .primary-color-light-button {
-  background: var(--portal-accessibility-bg-color) !important; 
-  color: var(--ivy-primary-color) !important;
-  font-weight: 600;
-}
+/*   .primary-color-light-button { */
+/*     background: var(--portal-accessibility-bg-color) !important;  */
+/*     color: var(--portal-button-text-color) !important; */
+/*     font-weight: 600; */
+/*   } */
+
+/*   .primary-color-light-button:hover { */
+/*     background: var(--portal-accessibility-bg-color) !important; */
+/*   } */
 
   .line-clamp-text-5 {
     overflow:hidden;
@@ -3253,7 +3355,7 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
   white-space: normal;
   padding-right: .5em;}
 
-.ui-dialog .ui-dialog-titlebar > .ui-dialog-title {
+.ui-dialog .ui-dialog-titlebar > span[id*=':share-dashboard-dialog_title'], span[id*=':configuration-dashboard-detail-dialog_title'] {
   padding-left: 7px;
 }
 
@@ -3321,9 +3423,58 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
 /********************************** END TASK INFORMATION **********************************/
 
 /********************************** AWESOME ICON SELECTION **********************************/
+.icon-selection-dialog-selecting-icon {
+  display: inline-flex;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+}
+
+.icon-selection-dialog-selecting-icon .fa, .icon-selection-dialog-selecting-icon .si, .icon-selection-array-selecting-icon .fa, .icon-selection-array-selecting-icon .si {
+  margin: auto;
+}
+
+_:-ms-input-placeholder, :root .icon-selection-dialog-selecting-icon .fa {
+  top: 50%;
+  transform: translateY(25%);
+}
+
+.icon-selection-array-selecting-icon {
+  display: inline-flex;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
 .select-awesome-icon-button {
-  margin-left: 10px;
-  text-decoration: underline !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  text-decoration: none !important;
+}
+
+.menu-icon-container {
+  display: flex;
+  align-items: center;
+}
+
+.custom-array-icon {
+    width: 100%;
+    height: 25px;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: column wrap;
+    overflow: hidden;
+}
+
+.icon-color {
+    color: var(--icon-color) !important;
+}
+
+.highlight-selected-icon {
+    background-color: var(--selected-icon-bg-color) !important;
+    border-radius: 3px;
 }
 
 /********************************** STATISTIC WIDGET **********************************/
@@ -3467,6 +3618,8 @@ _:-ms-fullscreen, :root .new-absence-messages .ui-messages-error {
 
 .admin-settings-container>.card {
   min-height: 300px;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 .admin-settings-container .ui-panelgrid-cell.ui-grid-col-3 {
@@ -3562,7 +3715,8 @@ _:-ms-input-placeholder, :root .ui-panelgrid .ui-panelgrid-content .ui-grid-row
   white-space: nowrap;
 }
 
-.change-password-column input {
+.change-password-column input, 
+.change-password-column button {
   width: 100%;
 }
 
@@ -4432,6 +4586,10 @@ border-top: 0.14rem dashed;
 .portal-dialog-content {
   margin:20px 0;
 }
+
+.portal-dialog .ui-dialog-titlebar {
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem !important; 
+}
 /** Portal dialog ---- end-----**/
 
 /* =================== START EXCEPTION ===================== */
@@ -4450,6 +4608,10 @@ border-top: 0.14rem dashed;
   padding: 6px 0;
 }
 
+.portal-exception-dialog-content {
+  font-size: 1.3rem;
+}
+
 .message-details {
   display: none;
 }
@@ -5339,9 +5501,15 @@ a.dashboard-action-container label {
 
 .role-management-title {
   margin: auto;
+  font-size: 16px;
+}
+
+.role-details-header {
+  font-size: large;
 }
 
 .role-details-dialog {
+  min-width: 450px;
   max-width: 750px;
 }
 
@@ -5577,9 +5745,4 @@ body .ui-button.ui-widget.ui-no-rounded-button-process-page.icon-more-menu-butto
   color: var(--widget-header-icon);
 }
 
-/* =================== PORTAL BUTTON END ====================== */
-
-/* =================== MENU ITEMS ====================== */
-.ui-menu-items, body .ui-menu .ui-menu-list .ui-menuitem:not(:last-child), .action-step-item:not(:last-child) {
-  border-bottom: 1px solid var(--user-menu-items-border-color);
-}
\ No newline at end of file
+/* =================== PORTAL BUTTON END ====================== */
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
index 5bd3306b906..125a77cef90 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
@@ -197,12 +197,16 @@
   --admin-setting-no-permission-message-color: #e53935;
   --user-setting-container-box-shadow: rgba(43, 59, 93, 0.6);
   --email-setting-widget-header: var(--ivy-primary-color-white);
-  --portal-accessibility-bg-color: var(--ivy-primary-color-grey-light);
+  --portal-accessibility-bg-color: hsla(var(--ivy-primary-light-color-h), var(--ivy-primary-light-color-s), 95%, 1) !important;
+  --portal-button-bg-color: #293241;
+  --portal-button-text-color: var(--ivy-primary-color);
   /* Absences and Deputy */
   --substituted-user-text-color: var(--ivy-primary-color-black);
   /* Awesome Icon Selection */
   --content-link-change-awesome-icon-color: var(--primary-color);
   --select-awesome-icon-button-font-weight: bold;
+  --selected-icon-bg-color: var(--ivy-portal-color-gray-dark);
+  --icon-color: var(--ivy-primary-color-white);
   /* Start Notification */
   --notification-content-background-color: var(--ivy-tertinary-color-red-dark);
   --notification-content-action-color: var(--ivy-primary-color-white);
@@ -347,7 +351,10 @@
   --accessibility-bg-color: var(--task-state-system-color);
   --accessibility-shortcut-text-color: var(--ivy-primary-color-black);
 
-    /* Dashboard configuration*/
+  /* Confirmation dialog footer button*/
+  --ui-leave-button-color: var(--ivy-primary-color-grey-dark);
+
+  /* Dashboard configuration*/
   --dashboard-action-container-text-color: var(--ivy-primary-color-white);
   --dashboard-action-container-border-color: var(--ivy-primary-color-grey-medium);
   --dashboard-action-container-description-color: var(--ivy-primary-color-grey-medium);
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
index ca345ac891b..1bf4960ff47 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
@@ -208,11 +208,15 @@
   --user-setting-container-box-shadow: rgba(43, 59, 93, 0.6);
   --email-setting-widget-header: var(--ivy-primary-color-white);
   --portal-accessibility-bg-color: var(--primary-lighter-color);
+  --portal-button-bg-color: var(--ivy-primary-text-color);
+  --portal-button-text-color: var(--ivy-primary-color);
   /* Absences and Deputy */
   --substituted-user-text-color: var(--ivy-primary-color-black);
   /* Awesome Icon Selection */
   --content-link-change-awesome-icon-color: var(--primary-color);
   --select-awesome-icon-button-font-weight: bold;
+  --selected-icon-bg-color: hsla(0, 0%, 97%, 1);
+  --icon-color: var(--ivy-primary-color-black);
   /* Start Notification */
   --notification-content-background-color: var(--ivy-tertinary-color-red-dark);
   --notification-content-action-color: var(--ivy-primary-color-white);
@@ -355,10 +359,13 @@
   --accessibility-shortcut-bg-color: var(--ivy-primary-color-grey-pale);
   --accessibility-bg-color: var(--ivy-primary-color-white);
   --accessibility-shortcut-text-color: var(--ivy-primary-color-black);
+
+  /* Confirmation dialog footer button*/
+  --ui-leave-button-color: var(--ivy-primary-color-grey-pale);
   
-    /* Dashboard configuration*/
+  /* Dashboard configuration*/
   --dashboard-action-container-text-color: var(--ivy-primary-color-black);
   --dashboard-action-container-border-color: var(--ivy-primary-color-grey-light);
   --dashboard-action-container-description-color: var(--ivy-primary-color-grey-dark);
-  --dashboard-icon-drag-drop-color: var(--ivy-primary-color-black);
+  --dashboard-icon-drag-drop-color: var(--ivy-primary-color-grey-medium);
 }
\ No newline at end of file
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal.css b/AxonIvyPortal/portal/webContent/resources/css/portal.css
index 380503b4f7f..6e96072f424 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal.css
@@ -673,7 +673,7 @@ body .ui-datepicker .ui-timepicker-div dl dd {
 
 .not-display-result-tab-view {
   font-size: var(--default-font-size); }
-
+  
 /** Style for Task Template * --------------------------------------*/
 .task-template-title {
   font-size: var(--large-font-size);
@@ -965,9 +965,6 @@ a.compact-task-start-link .task-start-list-item:hover, .task-start-list-item.ful
   font-size: var(--delete-deputy-icon-font-size); }
 
 /*Awesome Icon Selection--------------------------*/
-.ui-commandlink.select-awesome-icon-button {
-  font-weight: var(--select-awesome-icon-button-font-weight);
-  font-size: var(--small-font-size); }
 
 .icon-selection-dialog-selecting-icon:hover {
   border: solid 1px; }
@@ -1783,3 +1780,16 @@ body.dark .focused {
     clip: rect(0, 0, 0, 0);
     border: 0;
 }
+
+/* ============== DIALOG FOOTER - CONFIRMATION DIALOG ============================  **/
+.ui-leave-button {
+  color: var(--text-color) !important;
+  background-color: var(--ui-leave-button-color) !important;
+  border: 1px solid var(--ui-leave-button-color) !important;
+}
+.ui-leave-button,
+.ui-reserve-task-button,
+.ui-cancel-button {
+  font-weight: 600;
+}
+/* ====END OF==== DIALOG FOOTER - CONFIRMATION DIALOG ============================  **/
diff --git a/AxonIvyPortal/portal/webContent/resources/css/template.css b/AxonIvyPortal/portal/webContent/resources/css/template.css
index e5b4de86bf9..33a99a0312a 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/template.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/template.css
@@ -202,7 +202,7 @@ a.left-sidebar-menu-icon {
   position: absolute;
   top: 0;
   right: 0;
-  transform: translate(-25%, 30%);
+  transform: translate(-10%, 30%);
 }
 /* END APPLICATION MENU */
 
@@ -311,12 +311,17 @@ a.left-sidebar-menu-icon {
 }
 
 .ui-confirm-dialog-message li {
-  list-style-type: circle;
+  font-size: 16px;
+  font-weight: 400;
 }
 
 .ui-confirm-dialog-message ul {
   line-height: 19px
 }
+
+.ui-confirm-dialog-message h4 {
+  text-align: center;
+}
 /******** CHAT ********/
 .chat-add-assignee-button-grid, .chat-action-container {
   text-align: right;