From b310a723b1d00ea95564080f648024a9c5cac7d8 Mon Sep 17 00:00:00 2001
From: Luong Minh Luat <157108501+lmluat-axonivy@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:37:17 +0700
Subject: [PATCH] Feature/ivyportal 18032 UI facelift conflict (#1311)

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Add border in Actions menu of Task widget

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Add border in actions menu for case widget

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update Edit external link UI

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Add error message when uploading file fail

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update link and button following guidelines

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update UI of delete button

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update UI of remove/delete button

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Change icon of action menu

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update jenkinsfile

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update jenkins file

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update UI of destroy button in CaseItemDetails and TaskItemDetails

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update height of upload image in external link

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update GUI tests

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update screenshot tests

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update UI delete document button

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Upload document-screenshot.js file

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update screenshot test

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update reset filter in task widget filter

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update document

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update screenshot tests

* Revert "feature/IVYPORTAL-18032-UI-facelift-conflict"

This reverts commit 0f4b1540fad46145c7d632d1ed45054e4d95ef6b.

* Revert "feature/IVYPORTAL-18032-UI-facelift-conflict"

This reverts commit 3c38c3192f676a4df03300135ec60c2572ca2ec7.

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Update UI of process image

* feature/IVYPORTAL-18032-UI-facelift-conflict

- Handle feedback
---
 .../resources/js/document-screenshot.js       |  2 +-
 .../screenshot/PortalCasesScreenshotTest.java |  2 +-
 .../PortalProcessesScreenshotTest.java        |  3 +-
 .../portal/selenium/page/CaseDetailsPage.java |  5 ++
 .../page/CaseWidgetNewDashBoardPage.java      |  4 +-
 .../selenium/page/NewDashboardPage.java       |  4 +-
 .../page/TaskWidgetNewDashBoardPage.java      |  6 +-
 AxonIvyPortal/portal/cms/cms_de.yaml          |  1 +
 AxonIvyPortal/portal/cms/cms_en.yaml          |  1 +
 AxonIvyPortal/portal/cms/cms_es.yaml          |  1 +
 AxonIvyPortal/portal/cms/cms_fr.yaml          |  1 +
 .../generic/CaseDocuments/CaseDocuments.xhtml |  8 +--
 .../generic/TaskDocuments/TaskDocuments.xhtml |  8 +--
 .../PortalDashboardDetailModification.xhtml   | 24 ++++---
 .../DashboardModification.xhtml               |  2 +-
 .../WelcomeDashboardWidget.xhtml              |  2 +-
 .../AbsenceManagement/AbsenceManagement.xhtml | 26 +++----
 .../admin/AdminSettings/AdminSettings.xhtml   | 12 ++--
 .../component/ActionStep/ActionStep.xhtml     |  2 +-
 .../CaseItemDetails/CaseItemDetails.xhtml     | 14 ++--
 .../CaseItemDocument/CaseItemDocument.xhtml   |  8 +--
 .../IconSelection/IconSelection.xhtml         |  4 +-
 .../ProcessWidget/ProcessWidgetDialogs.xhtml  | 72 +++++++++----------
 .../component/SideStep/SideStep.xhtml         | 11 +--
 .../TaskItemDetails/TaskItemDetails.xhtml     | 12 ++--
 .../TaskItemDocuments/TaskItemDocuments.xhtml |  6 +-
 .../WarningBeforeLeavingTask.xhtml            |  6 +-
 .../ProcessItemAction/ProcessItemAction.xhtml |  2 +-
 .../restricted/DashboardTemplate.xhtml        | 24 ++++---
 .../restricted/decorator/TableWidget.xhtml    | 29 ++++----
 .../webContent/resources/css/module.css       |  4 +-
 .../resources/css/portal-variables-dark.css   |  3 +-
 .../resources/css/portal-variables-light.css  |  1 +
 .../webContent/resources/css/portal.css       | 25 ++++++-
 .../webContent/resources/css/utility.css      |  4 ++
 .../webContent/resources/js/process-widget.js |  7 ++
 .../full-process-list/index.rst               |  3 +-
 37 files changed, 204 insertions(+), 145 deletions(-)

diff --git a/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js b/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
index 72d33cbad1f..d6de1e6f34c 100644
--- a/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
+++ b/AxonIvyPortal/portal-selenium-test/resources/js/document-screenshot.js
@@ -124,7 +124,7 @@ function highlightProcessItems() {
 }
 
 function highlightEditProcessIcon() {
-  appendStepAnnotation($("[id$='process-widget:edit-process-form:edit-process-icon:awesome-icon-selection']"), "4", -10, 100);
+  appendStepAnnotation($("[id$='process-widget:edit-process-form:edit-process-icon:awesome-icon-selection']"), "4", -40, 110);
 }
 
 function highlightEditProcessDialog() {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java
index ffd8a3412be..8a6f125fe7f 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalCasesScreenshotTest.java
@@ -84,7 +84,7 @@ public void screenshotCaseDetails() throws IOException {
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(detailsPage.openAddAttachmentDialog(),
         ScreenshotUtils.CASE_DETAIL_FOLDER + "how-to-attach-document-to-case", new ScreenshotMargin(10));
     detailsPage.closeAddAttachmentDialog();
-    detailsPage.uploadDocumentWithoutError(FileHelper.getAbsolutePathToTestFile("test-no-files-no-js.pdf"));
+    detailsPage.uploadDocument(FileHelper.getAbsolutePathToTestFile("test-no-files-no-js.pdf"));
 
     refreshPage();
     detailsPage.waitForCaseDetailsDisplay();
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java
index d7421a40e6a..84856693bec 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/document/screenshot/PortalProcessesScreenshotTest.java
@@ -79,10 +79,11 @@ public void screenshotPortalFullProcessesList() throws IOException {
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(processWidget.getProcessEditMenu(0),
         ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-menu-item", new ScreenshotMargin(150, 200));
     processWidget.clickOnProcessEditMenu(0);
+    ScreenshotUtils.maximizeBrowser();
     ScreenshotUtils.executeDecorateJs("highlightEditProcessDialog()");
     ScreenshotUtils.executeDecorateJs("highlightEditProcessIcon()");
     ScreenshotUtils.captureElementWithMarginOptionScreenshot(processWidget.getEditProcessDialog(),
-        ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-dialog", new ScreenshotMargin(10));
+        ScreenshotUtils.PROCESSES_WIDGET_FOLDER + "edit-process-dialog", new ScreenshotMargin(5));
     ScreenshotUtils.resizeBrowser(new Dimension(1366, 800));
     refreshPage();
     processWidget.waitUtilProcessWidgetDisplayed();
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java
index cec20f12a4e..e069a25ee19 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseDetailsPage.java
@@ -850,6 +850,11 @@ public void uploadDocumentWithoutError(String pathToFile) {
     $("button[id$='document:document-upload-close-command']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT)
         .click();
   }
+  
+  public void uploadDocument(String pathToFile) {
+    $("input[id$='document-upload-panel_input']").shouldBe(exist, DEFAULT_TIMEOUT)
+    .shouldBe(Condition.hidden, DEFAULT_TIMEOUT).sendKeys(pathToFile);
+  }
 
   public void openAddDocumentDialogAndUploadDocument(String pathToFile) {
     getAddAttachmentDialog();
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
index 4b2914eac2b..59a7e13f672 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/CaseWidgetNewDashBoardPage.java
@@ -162,7 +162,7 @@ public void nextPageTable() {
   }
 
   public void resetFilter() {
-    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("button[id$='reset-button']")
+    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("a[id$='reset-button']")
         .filter(text("Reset")).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("div.filter-overlay-panel__footer").shouldBe(disappear, DEFAULT_TIMEOUT);
     waitForElementClickable($$("div.table-widget-panel")
@@ -269,7 +269,7 @@ public void removeAllFilterItems() {
   }
 
   public void openManageFiltersDialog() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
   }
 
   public void closeManageFilterDialog() {
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
index aa73b4029ce..d06faa3f5f6 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/NewDashboardPage.java
@@ -545,7 +545,7 @@ public SelenideElement getCompactModeProcessFilterPanelSaveButton() {
   }
 
   public SelenideElement getCompactModeProcessFilterPanelResetButton() {
-    return getCompactModeProcessFilterPanel().$("button[id$=':reset-button']");
+    return getCompactModeProcessFilterPanel().$("a[id$=':reset-button']");
   }
 
   public void resetCompactModeProcessFilterPanel() {
@@ -1033,7 +1033,7 @@ public NotificationCompactPage openNotificationPanel() {
   }
   
   public void clickOnManageFilterLink() {
-    $("div[class*='filter-overlay-panel__footer']").shouldBe(appear, DEFAULT_TIMEOUT).$("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button[class*='saved-filter__manage-filter']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
+    $("div[class*='filter-overlay-panel__footer']").shouldBe(appear, DEFAULT_TIMEOUT).$("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a[class*='saved-filter__manage-filter']").shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
   
diff --git a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
index b2c269d7f42..c94ce3ae09f 100644
--- a/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
+++ b/AxonIvyPortal/portal-selenium-test/src_test/com/axonivy/portal/selenium/page/TaskWidgetNewDashBoardPage.java
@@ -132,7 +132,7 @@ public void applyFilter() {
   }
 
   public void resetFilter() {
-    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("button[id$='reset-button']")
+    $("div.filter-overlay-panel__footer").shouldBe(appear, DEFAULT_TIMEOUT).$$("a[id$='reset-button']")
         .filter(text("Reset")).first().shouldBe(getClickableCondition(), DEFAULT_TIMEOUT).click();
   }
 
@@ -183,7 +183,7 @@ public boolean hasSavedFilterItem(String filterName) {
   }
 
   public void clickOnManageFilterLink() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
     $("[id$='manage-filter-dialog']").shouldBe(appear, DEFAULT_TIMEOUT);
   }
 
@@ -530,7 +530,7 @@ public void saveFilter(String widgetFilterName) {
   }
   
   public void openManageFiltersDialog() {
-    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("button").shouldBe(getClickableCondition()).click();
+    $("div#manage-filter").shouldBe(appear, DEFAULT_TIMEOUT).$("a").shouldBe(getClickableCondition()).click();
   }
   
   public void removeAllFilterItems() {
diff --git a/AxonIvyPortal/portal/cms/cms_de.yaml b/AxonIvyPortal/portal/cms/cms_de.yaml
index dd66e122eea..f7223acbf51 100644
--- a/AxonIvyPortal/portal/cms/cms_de.yaml
+++ b/AxonIvyPortal/portal/cms/cms_de.yaml
@@ -410,6 +410,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Aktiviert
     add: Hinzufügen
     addDocument: Dokument hinzufügen
+    addLink: Link hinzufügen
     addNote: Notiz hinzufügen
     allCategories: Alle Kategorien
     allTypes: Alle Typen
diff --git a/AxonIvyPortal/portal/cms/cms_en.yaml b/AxonIvyPortal/portal/cms/cms_en.yaml
index aee201428bf..73c02a2e09d 100644
--- a/AxonIvyPortal/portal/cms/cms_en.yaml
+++ b/AxonIvyPortal/portal/cms/cms_en.yaml
@@ -409,6 +409,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Active
     add: Add
     addDocument: Add document
+    addLink: Add Link
     addNote: Add note
     allCategories: All Categories
     allTypes: All types
diff --git a/AxonIvyPortal/portal/cms/cms_es.yaml b/AxonIvyPortal/portal/cms/cms_es.yaml
index f74b3738de8..cc0eeedb7d0 100644
--- a/AxonIvyPortal/portal/cms/cms_es.yaml
+++ b/AxonIvyPortal/portal/cms/cms_es.yaml
@@ -411,6 +411,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Activado
     add: Añadir
     addDocument: Agregar documento
+    addLink: Añadir enlace
     addNote: Agregar nota
     allCategories: Todas las categorias
     allTypes: Todos los tipos
diff --git a/AxonIvyPortal/portal/cms/cms_fr.yaml b/AxonIvyPortal/portal/cms/cms_fr.yaml
index 53419436396..c343a2a9a7b 100644
--- a/AxonIvyPortal/portal/cms/cms_fr.yaml
+++ b/AxonIvyPortal/portal/cms/cms_fr.yaml
@@ -408,6 +408,7 @@ ch.ivy.addon.portalkit.ui.jsf:
     active: Activé
     add: Ajouter
     addDocument: Ajouter un document
+    addLink: Ajouter un lien
     addNote: Ajouter une note
     allCategories: Toutes les catégories
     allTypes: Tous les types
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml
index 5b3ad1a5c31..74e7f501aee 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/CaseDocuments/CaseDocuments.xhtml
@@ -99,13 +99,13 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
           <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            process="@this" icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+            process="@this"
             update="case-document-global-messages case-doc-form"
-            actionListener="#{logic.deleteDocument}"
+            actionListener="#{logic.deleteDocument}" styleClass="w-full portal-remove-button"
             oncomplete="PF('document-deletion-dialog').hide();" />
+          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
         </ui:define>
       </ui:decorate>
     </ui:define>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml
index 2e40333a337..b4c4e1da392 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/TaskDocuments/TaskDocuments.xhtml
@@ -99,13 +99,13 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
           <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            process="@this" icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+            process="@this"
             update="task-document-global-messages task-doc-form"
-            actionListener="#{logic.deleteDocument}"
+            actionListener="#{logic.deleteDocument}" styleClass="w-full portal-remove-button"
             oncomplete="PF('document-deletion-dialog').hide();" />
+          <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+             process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
         </ui:define>
       </ui:decorate>
     </ui:define>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml
index 4d83a6a8f0a..e00fe4deb0b 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/PortalDashboardDetailModification/PortalDashboardDetailModification.xhtml
@@ -24,11 +24,12 @@
     </ui:define>
 
     <ui:define name="headerAction">
-      <p:commandButton id="back-to-configuration" styleClass="dashboard__switch-mode u-mar-right-5 ui-button-flat"
+      <p:commandLink id="back-to-configuration" styleClass="dashboard__switch-mode u-mar-right-5 pr-2"
         actionListener="#{dashboardDetailModificationBean.navigatetoDashboardConfigurationPage}"
-        update="grid-stack @this" process="@this"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/back')}"
-        icon="si si-arrow-left-1" />
+        update="grid-stack @this" process="@this">
+          <i class="relative si si-arrow-left-1" style="top: 2px;"/>
+          <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/back')}</span>
+      </p:commandLink>
 
       <c:set var="showRestoreButton" value="#{dashboardDetailModificationBean.foundTemplate.isPresent()}"/>
       <h:panelGroup id="restore-button-group" styleClass="restore-button-group u-mar-right-15">
@@ -102,13 +103,14 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/removeWidgetMessage')}" />
 
         <ui:define name="dialogFooter">
-          <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('remove-widget-dialog').hide();"
-            styleClass="u-mar-right-15" />
-          <p:commandButton id="remove-widget-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
-            actionListener="#{dashboardDetailModificationBean.removeWidget()}"
-            icon="#{visibilityBean.generateButtonIcon('si si-remove-circle')}"
-            process="@this"
-            oncomplete="PF('remove-widget-dialog').hide(); updateDashboardWidget(); return false;"/>
+          <h:panelGroup styleClass="flex flex-column">
+            <p:commandButton id="remove-widget-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
+              actionListener="#{dashboardDetailModificationBean.removeWidget()}"
+              process="@this" styleClass="w-full portal-remove-button"
+              oncomplete="PF('remove-widget-dialog').hide(); updateDashboardWidget(); return false;"/>
+            <p:link href="#" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('remove-widget-dialog').hide();"
+              styleClass="pt-3 flex justify-content-center" />
+           </h:panelGroup>
         </ui:define>
       </ui:decorate>
     </ui:define>
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 a90abd57fac..d3e6db1fefd 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
@@ -130,7 +130,7 @@
       value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/dashboardManagement/deleteDashboardMessage',[dashboardModificationBean.selectedDashboard.title])}" />
     <ui:define name="dialogFooter">
       <div class="flex flex-column">
-      <p:commandButton id="remove-dashboard-button" styleClass="w-full"
+      <p:commandButton id="remove-dashboard-button" styleClass="w-full portal-remove-button"
         value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
         actionListener="#{dashboardModificationBean.removeDashboard()}"
         update="dashboard-modification-container"
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml
index e56100d9edd..7220bddd9d0 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portal/generic/dashboard/component/WelcomeDashboardWidget/WelcomeDashboardWidget.xhtml
@@ -33,7 +33,7 @@
               oncomplete="PF('new-widget-configuration-dialog').show()" />
             <p:menuitem id="delete-welcome-widget"
               value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-              icon="si si-bin-1"
+              icon="si si-bin-1" styleClass="color-destroy"
               oncomplete="PF('remove-widget-dialog').show()"
               actionListener="#{dashboardDetailModificationBean.setDeleteWidget(widget)}"
               update="remove-widget-dialog"
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 2442cc63140..7a74a690f01 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
@@ -86,7 +86,7 @@
                       </p:column>
                       <p:column headerText="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/action')}"
                         styleClass="absences-table-action-column">
-                        <p:commandButton id="absence-action-button" icon="si si-navigation-menu-horizontal"
+                        <p:commandButton id="absence-action-button" icon="fa fa-ellipsis-h"
                           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"
@@ -101,7 +101,7 @@
                           <p:menuitem id="delete-absence" actionListener="#{logic.preDelete(absence)}"
                             oncomplete="PF('deleteAbsenceConfirmation').show();"
                             rendered="#{absenceManagementBean.isAbsenceDeletable(absence)}"
-                            icon="si si-bin-1" process="@this"
+                            icon="si si-bin-1" process="@this" styleClass="color-destroy"
                             value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}">
                           </p:menuitem>
                         </p:menu>
@@ -253,17 +253,17 @@
         <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
 
         <ui:define name="dialogFooter">
-          <p:commandLink id="cancel-confirmation-action"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-            onclick="PF('deleteAbsenceConfirmation').hide()"
-            styleClass="u-mar-right-15" />
-
-          <p:commandButton id="confirm-action" process="@this"
-            icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-            actionListener="#{logic.deleteAbsence}"
-            oncomplete="PF('deleteAbsenceConfirmation').hide();"
-            update="@(.absence-table) @(.substitute-table) @(.substitution-table)" />
+          <h:panelGroup styleClass="flex flex-column">
+            <p:commandButton id="confirm-action" process="@this"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
+              actionListener="#{logic.deleteAbsence}" styleClass="w-full portal-remove-button"
+              oncomplete="PF('deleteAbsenceConfirmation').hide();"
+              update="@(.absence-table) @(.substitute-table) @(.substitution-table)" />
+            <p:commandLink id="cancel-confirmation-action"
+              value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+              onclick="PF('deleteAbsenceConfirmation').hide()"
+              styleClass="pt-3 flex justify-content-center" />
+          </h:panelGroup>
         </ui:define>
       </ui:decorate>
       <c:if test="#{absenceManagementBean.absencesCreatable ||  absenceManagementBean.ownAbsencesCreatable}">
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 1accd261b13..f390f58154e 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
@@ -81,7 +81,7 @@
                   process="@this" />
                 <p:menuitem id="delete-application"
                   value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-                  icon="si si-bin-1"
+                  icon="si si-bin-1" styleClass="color-destroy"
                   oncomplete="PF('deleteConfirmation').show()"
                   actionListener="#{logic.submitDeleteApp(app)}"
                   update=":#{p:resolveFirstComponentWithId('deleteConfirmationDialog', view).clientId}"
@@ -230,7 +230,7 @@
                 <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="w-full">
-                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" isNotInAdminSettings="false"/>
+                  <ic:ch.ivy.addon.portalkit.component.IconSelection value="#{data.selectedApp.menuIcon}" isImmediate="false"/>
                 </div>
               </div>
 
@@ -363,12 +363,14 @@
     <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('deleteConfirmation').hide()" styleClass="u-mar-right-15"/>
+      <h:panelGroup styleClass="flex flex-column">
        <p:commandButton value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-          icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+          styleClass="w-full portal-remove-button"
           actionListener="#{logic.delete}" oncomplete="PF('deleteConfirmation').hide();"
           update=":#{p:resolveFirstComponentWithId('applicationForm', view).clientId}" />
+       <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" 
+          onclick="PF('deleteConfirmation').hide()" styleClass="pt-3 flex justify-content-center"/>
+      </h:panelGroup>
     </ui:define>
   </ui:decorate>
 
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 f91f3032968..7e008bc2554 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
@@ -74,7 +74,7 @@
       <h:outputText value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}" />
     </p:commandLink>
 
-    <h:panelGroup id="side-steps">
+    <h:panelGroup id="side-steps" styleClass="case-side-steps-panel">
       <f:event listener="#{sideStepBean.getSideSteps(cc.attrs.taskId, case.id)}" type="preRenderComponent" />
       <h:outputText rendered="#{empty sideStepBean.currentSideSteps}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/noSideSteps')}" styleClass="action-step-item" />
       <ui:repeat var="sideStep" value="#{sideStepBean.currentSideSteps}">
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml
index a035bbc8d98..b18ad939d28 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDetails/CaseItemDetails.xhtml
@@ -181,12 +181,14 @@
     <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseList/destroyCaseMessage')}" />
   
     <ui:define name="dialogFooter">
-      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        onclick="PF('destroy-case-dialog').hide();" styleClass="u-mar-right-15" />
-      <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-        actionListener="#{caseWidgetBean.destroyCase(case)}"
-        oncomplete="backToPrevPage(#{caseWidgetBean.willNavigateBack()});" />
+      <h:panelGroup styleClass="flex flex-column">
+        <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
+          styleClass="w-full portal-remove-button"
+          actionListener="#{caseWidgetBean.destroyCase(case)}"
+          oncomplete="backToPrevPage(#{caseWidgetBean.willNavigateBack()});" />
+        <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+          onclick="PF('destroy-case-dialog').hide();" styleClass="pt-3 flex justify-content-center" />
+        </h:panelGroup>
     </ui:define>
   </ui:decorate>
 
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
index 4c966982edf..3d073e96869 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/CaseItemDocument/CaseItemDocument.xhtml
@@ -167,13 +167,13 @@
     <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
     
     <ui:define name="dialogFooter">
-      <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-         process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
       <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}"
-        process="@this" icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+        process="@this"
         update="#{cc.attrs.componentToUpdate} #{cc.clientId}:case-document-global-messages #{cc.clientId}:case-document-form"
-        actionListener="#{logic.deleteDocument}"
+        actionListener="#{logic.deleteDocument}" styleClass="w-full portal-remove-button"
         oncomplete="PF('document-deletion-dialog').hide();handleCaseDetailsTable();" />
+      <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+         process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
     </ui:define>
   </ui:decorate>
   <script type="text/javascript">
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 bd0ba3fd786..852e2fbb2e9 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
@@ -9,14 +9,14 @@
   <cc:attribute name="tabindex" required="false" default="1" />
   <cc:attribute name="isReadOnly" default="false" />
   <cc:attribute name="hideIconArray" default="false"/>
-  <cc:attribute name="isNotInAdminSettings" default="true"/>
+  <cc:attribute name="isImmediate" 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="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}"/>
+  <p:remoteCommand rendered="#{!hideIconArray}" oncomplete="loadIconsFirstTime('#{hideIconArray}','#{cc.clientId}', '#{cc.attrs.value}');" autoRun="true" global="false" process="@this" immediate="#{cc.attrs.isImmediate}"/>
 
   <h:panelGroup id="awesome-icon-selection" styleClass="awesome-icon-selection-panel">
     <h:panelGroup rendered="#{!hideIconArray}" id="menu-icon-container" styleClass="menu-icon-container" layout="block">
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 2827e269108..f879affb6cb 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
@@ -18,6 +18,7 @@
     <h:form id="edit-process-form" styleClass="ui-g edit-process-form">
       <c:set var="process" value="#{processWidgetBean.editedProcess}" />
       <c:set var="processIcon" value="#{process.getIcon()}" />
+      <div style="display: none;" id="edit-external-link-error-message" />
       <div class="ui-g-12 edit-process-header-group u-no-padding-left u-no-padding-right">
         <div class="ui-g-12 u-padding-0">
           <p class="edit-process-header-sub-title">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/description')}</p>
@@ -28,7 +29,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" hideIconArray="true"
+          <ic:ch.ivy.addon.portalkit.component.IconSelection id="edit-process-icon" hideIconArray="false" isImmediate="false"
             value="#{processWidgetBean.selectedIconProcess}"
             isReadOnly="#{!processWidgetBean.canChangeProcessIcon()}" />
         </div>
@@ -39,7 +40,7 @@
           <span class="u-mar-right-5">#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/processwidget/editDialog/dialogEditInfoTitle', [process.getType().getLabel()])}</span>
         </p>
 
-        <p:messages styleClass="ui-g-12 u-padding-0">
+        <p:messages id="edit-external-link-error-message" styleClass="ui-g-12 u-padding-0">
           <p:autoUpdate />
         </p:messages>
 
@@ -151,27 +152,35 @@
 
           <h:panelGroup id="file-upload-panel" layout="block"
             styleClass="#{empty processWidgetBean.editedExternalLink.imageLocation ? 'ui-g-12' : 'ui-g-12 ui-fluid u-padding-0 MarTop10 external-link-preview-image-panel'}">
-            <p:fileUpload id="editing-external-link-image-upload"
+            <p:fileUpload id="editing-external-link-image-upload" style="display: none;"
               rendered="#{empty processWidgetBean.editedExternalLink.imageLocation}"
               listener="#{processWidgetBean.handleExternalLinkImageUpload}"
               chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
-              dragDropSupport="true" auto="true"
-              update="file-upload-panel"
+              dragDropSupport="true" auto="true" widgetVar="editExternalLinkUpload"
+              update="file-upload-panel" 
               allowTypes="/(\.|\/)(png|jpg|jpeg|svg)$/i"
-              accept=".png,.jpg,.jpeg,.svg"
-              label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/select')}"
-              invalidFileMessage="#{ivy.cms.co('/Dialogs/components/CaseDocument/invalidFileMessage')}" />
-            <p:graphicImage id="editing-external-link-preview-image"
-              rendered="#{not empty processWidgetBean.editedExternalLink.imageLocation}"
-              styleClass="external-link-preview-image" library="ivy-cms"
-              name="#{processWidgetBean.editedExternalLink.imageLocation}" />
+              accept=".png,.jpg,.jpeg,.svg" onvalidationfailure="handleEditExternalLinkUploadFileFail();"
+              label="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/select')}" oncomplete="hideExtendLinkPreviewLabel();"
+              invalidFileMessage="#{ivy.cms.co('/Dialogs/components/CaseDocument/invalidFileMessage')}" dropZone="edit-external-link-preview-image-panel"/>
+              <p:outputPanel id="edit-external-link-preview-image-panel" styleClass="ui-external-link-preview-image-panel" >
+                <h:panelGroup rendered="#{empty processWidgetBean.editedExternalLink.imageLocation}" class="ui-external-link-preview-image-label">
+                <i class="si si-file-code-upload-1" id="ui-external-link-preview-image-icon" />
+                <p:outputLabel value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/dragAndDropImage')}">
+                <p:link value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/uploadOneHere')}" onclick="PF('editExternalLinkUpload').show();return false"/>
+                </p:outputLabel>
+                </h:panelGroup>
+                <p:graphicImage id="editing-external-link-preview-image"
+                  rendered="#{not empty processWidgetBean.editedExternalLink.imageLocation}"
+                  styleClass="external-link-preview-image" library="ivy-cms"
+                  name="#{processWidgetBean.editedExternalLink.imageLocation}" />
+              </p:outputPanel>
             <h:panelGroup
               class="external-link-preview-image-overlay-panel"
               rendered="#{not empty processWidgetBean.editedExternalLink.imageLocation}">
               <p:commandButton
                 id="editing-external-link-delete-image-button"
                 actionListener="#{processWidgetBean.removeTempExternalLinkImage}"
-                update="file-upload-panel"
+                update="file-upload-panel" immediate="true"
                 rendered="#{not empty processWidgetBean.editedExternalLink.imageLocation}"
                 styleClass="external-link-delete-image-button"
                 icon="si si-bin-1" />
@@ -183,13 +192,9 @@
     </h:form>
 
     <f:facet name="footer">
-      <p:commandLink id="cancel-edit-process-command"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        actionListener="#{processWidgetBean.removeTempExternalLinkImage}"
-        oncomplete="PF('edit-process-dialog').hide()"
-        styleClass="u-mar-right-10" />
-      <p:commandButton id="save-process-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}" icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
-        process="#{cc.clientId}:edit-process-form" actionListener="#{processWidgetBean.updateProcessData()}" update="#{cc.clientId}:edit-process-form"
+      <p:commandButton id="save-process-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/save')}"
+        process="#{cc.clientId}:edit-process-form" actionListener="#{processWidgetBean.updateProcessData()}" styleClass="w-full"
+        update="#{cc.clientId}:edit-process-form:edit-external-link-error-message"
         oncomplete="if(!args.validationFailed){PF('edit-process-dialog').hide(); updateProcessListOnSaveSuccessful();}" form="#{cc.clientId}:edit-process-form"/>
     </f:facet>
   </p:dialog>
@@ -214,14 +219,14 @@
     </ui:define>
     
     <ui:define name="dialogFooter">
-      <h:form id="delete-process-workflow-form">
-        <p:link onclick="PF('remove-process-workflow-dialog').hide()" styleClass="u-mar-right-15"
-          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-          href="#" />
+      <h:form id="delete-process-workflow-form" styleClass="flex flex-column">
         <p:commandButton id="remove-process-command" global="false" process="@this" update="#{cc.clientId}:process-list"
-          icon="#{visibilityBean.generateButtonIcon('si si-check-1')}"
-          actionListener="#{processWidgetBean.deleteProcessWorkflow()}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/ok')}"
+          styleClass="w-full portal-remove-button"
+          actionListener="#{processWidgetBean.deleteProcessWorkflow()}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/remove')}"
           oncomplete="PF('remove-process-workflow-dialog').hide(); updateProcessListOnSaveSuccessful();" />
+        <p:link onclick="PF('remove-process-workflow-dialog').hide()" styleClass="pt-3 flex justify-content-center"
+          value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+          href="#" />
       </h:form>
     </ui:define>
   </ui:decorate>
@@ -343,14 +348,14 @@
       <h:panelGroup id="file-upload-panel" layout="block"
         styleClass="#{empty externalLinkBean.externalLink.imageLocation ? 'ui-g-12 ':'ui-g-12 ui-fluid u-padding-0 MarTop10 external-link-preview-image-panel'}">
         <p:fileUpload id="external-link-image-upload"
-          onvalidationfailure="handleUploadFileFail();" style="display: none;"
+          style="display: none;"
           widgetVar="externalLinkUpload"
           rendered="#{empty externalLinkBean.externalLink.imageLocation}"
           listener="#{externalLinkBean.handleImageUpload}"
           chooseIcon="#{visibilityBean.generateButtonIcon('si si-add-small')}"
           dragDropSupport="true" auto="true" update="file-upload-panel"
           allowTypes="/(\.|\/)(png|jpg|jpeg|svg)$/i"
-          accept=".png,.jpg,.jpeg,.svg"
+          accept=".png,.jpg,.jpeg,.svg" onvalidationfailure="handleUploadFileFail();"
           invalidFileMessage="#{ivy.cms.co('/Dialogs/components/CaseDocument/invalidFileMessage')}"
           dropZone="external-link-preview-image-panel" oncomplete="hideExtendLinkPreviewLabel();"/>
           
@@ -381,15 +386,10 @@
     </h:form>
 
     <f:facet name="footer">
-      <p:commandLink id="cancel-adding-external-link-command"
-        value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        actionListener="#{externalLinkBean.removeImage()}"
-        oncomplete="PF('add-external-link-dialog').hide()"
-        styleClass="u-mar-right-15" />
-      <p:commandButton id="adding-new-external-link-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/add')}"
-        icon="#{visibilityBean.generateButtonIcon('si si-add-small')}" process="#{cc.clientId}:add-external-link-form"
+      <p:commandButton id="adding-new-external-link-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/addLink')}"
+        process="#{cc.clientId}:add-external-link-form"
         form="#{cc.clientId}:add-external-link-form" actionListener="#{processWidgetBean.createNewExternalLink()}"
-        update="#{cc.clientId}:add-external-link-form"
+        update="#{cc.clientId}:add-external-link-form" styleClass="w-full"
         oncomplete="if(!args.validationFailed){PF('add-external-link-dialog').hide(); updateProcessListOnSaveSuccessful();}" />
     </f:facet>
   </p:dialog>
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 b3df89c0732..5c2f1981ede 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
@@ -113,14 +113,15 @@
       <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}">
+    <h:panelGroup id="task-additional-actions" styleClass="task-additional-actions-panel" layout="block" rendered="#{cc.attrs.renderedAdditionalAction}">
       <f:event listener="#{sideStepBean.getSideSteps(task.getId(), task.case.getId())}" type="preRenderComponent" />
-      <p:divider styleClass="task-action-separator" />
-      <h:outputText rendered="#{empty sideStepBean.currentSideSteps}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/noSideSteps')}" styleClass="option-item pointer-event-none" />
+      <h:outputText rendered="#{empty sideStepBean.currentSideSteps}" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseDetails/noSideSteps')}" styleClass="option-item  pointer-event-none" />
       <ui:repeat var="sideStep" value="#{sideStepBean.currentSideSteps}">
   
-        <p:commandLink id="option-item" styleClass="option-item" value="#{sideStep.name}" global="false"
-          actionListener="#{sideStepBean.startSideStep(sideStep)}" process="@this" />
+        <p:commandLink id="option-item" styleClass="option-item" global="false"
+          actionListener="#{sideStepBean.startSideStep(sideStep)}" process="@this">
+          <span class="option-item-label" >#{sideStep.name}</span>
+        </p:commandLink>  
       </ui:repeat>
     </h:panelGroup>
   </p:overlayPanel>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDetails/TaskItemDetails.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDetails/TaskItemDetails.xhtml
index 0d45c5670e2..6e6e0c83a21 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDetails/TaskItemDetails.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDetails/TaskItemDetails.xhtml
@@ -200,11 +200,13 @@
     <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskList/destroyTaskMessage')}" />
 
     <ui:define name="dialogFooter">
-      <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('destroy-task-dialog').hide();"
-        styleClass="u-mar-right-15" />
-      <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove')}" actionListener="#{logic.destroyTask(task)}"
-        oncomplete="PF('destroy-task-dialog').hide()" update="#{informationWidgetComponent}" process="@this" />
+      <h:panelGroup styleClass="flex flex-column">
+        <p:commandButton id="confirm-destruction" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
+          actionListener="#{logic.destroyTask(task)}" styleClass="w-full portal-remove-button"
+          oncomplete="PF('destroy-task-dialog').hide()" update="#{informationWidgetComponent}" process="@this" />
+        <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}" onclick="PF('destroy-task-dialog').hide();"
+          styleClass="pt-3 flex justify-content-center" />
+      </h:panelGroup>
     </ui:define>
   </ui:decorate>
   
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDocuments/TaskItemDocuments.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDocuments/TaskItemDocuments.xhtml
index edbf1b00073..724ab83c410 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDocuments/TaskItemDocuments.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/TaskItemDocuments/TaskItemDocuments.xhtml
@@ -166,12 +166,12 @@
     <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/confirmForDelete')}" />
     
     <ui:define name="dialogFooter">
-      <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-        process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="u-mar-right-15"/>
       <p:commandButton id="document-deletion-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/delete')}" process="@this"
-        icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+        styleClass="w-full portal-remove-button"
         update="#{p:resolveFirstComponentWithId('task-document-form', view).clientId} #{cc.attrs.componentToUpdate} #{p:resolveFirstComponentWithId('task-document-global-messages', view).clientId}"
         actionListener="#{logic.deleteDocument}" oncomplete="PF('document-deletion-dialog').hide();handleTaskDetailsTables();" />
+      <p:commandLink id="document-deletion-cancellation-command" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+        process="@this" onsuccess="PF('document-deletion-dialog').hide()" styleClass="pt-3 flex justify-content-center"/>
     </ui:define>
   </ui:decorate>
   <script type="text/javascript">
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 f17551c2a52..a11103d165b 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
@@ -47,11 +47,11 @@
             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"
+          <p:commandLink 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')}" />
+            styleClass="ui-confirmdialog-yes w-full mx-0 text-center"
+            value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"/>
         </div>
       </h:form>
     </ui:define>
diff --git a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
index 111554405ca..a3b4139e27d 100644
--- a/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
+++ b/AxonIvyPortal/portal/src_hd/ch/ivy/addon/portalkit/component/process/ProcessItemAction/ProcessItemAction.xhtml
@@ -31,7 +31,7 @@
 
   <div id="process-action-group" class="process-action-group">
     <h:panelGroup layout="block" rendered="#{!hideActionButton}">
-      <p:commandButton id="process-action-button" icon="si si-navigation-menu-horizontal"
+      <p:commandButton id="process-action-button" icon="fa fa-ellipsis-h"
         styleClass="rounded-button icon-more-menu-button #{buttonStyle} ui-no-rounded-button-process-page" type="button"/>
 
       <p:menu id="process-action-menu" overlay="true"
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
index b6e4256d46c..9fe382e903b 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/DashboardTemplate.xhtml
@@ -178,13 +178,15 @@
               value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/taskList/destroyTaskMessage')}" />
              
             <ui:define name="dialogFooter">
-              <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-               onclick="PF('destroy-task-dialog').hide();" styleClass="u-mar-right-15" />
+              <h:panelGroup styleClass="flex flex-column">
               <p:commandButton id="confirm-destruction-dashboard-tasks" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
-               icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
+               styleClass="w-full portal-remove-button"
                actionListener="#{taskWidgetBean.destroyTask(taskWidgetBean.selectedTaskItemId)}"
                oncomplete="PF('destroy-task-dialog').hide();loadGrid(#{managedBean.selectedDashboard.isResponsive}); initStatistics();"
                update="grid-stack dashboard-title-container" />
+              <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+               onclick="PF('destroy-task-dialog').hide();" styleClass="pt-3 flex justify-content-center" />
+               </h:panelGroup>
             </ui:define>
            </ui:decorate>
            
@@ -228,13 +230,15 @@
             <ui:param name="dialogContent" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/caseList/destroyCaseMessage')}" />
             
            <ui:define name="dialogFooter">
-            <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
-              onclick="PF('destroy-case-dialog').hide();" styleClass="u-mar-right-15"/>
-            <p:commandButton id="confirm-destruction-dashboard-cases" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
-              icon="#{visibilityBean.generateButtonIcon('si si-remove')}"
-              actionListener="#{caseWidgetBean.destroyCase(caseWidgetBean.selectedCase)}"
-              oncomplete="PF('destroy-case-dialog').hide();loadGrid(#{managedBean.selectedDashboard.isResponsive});initStatistics();"
-              update="grid-stack dashboard-title-container" />
+            <h:panelGroup>
+              <p:commandButton id="confirm-destruction-dashboard-cases" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/destroy')}"
+                styleClass="w-full portal-remove-button"
+                actionListener="#{caseWidgetBean.destroyCase(caseWidgetBean.selectedCase)}"
+                oncomplete="PF('destroy-case-dialog').hide();loadGrid();initStatistics();"
+                update="grid-stack dashboard-title-container" />
+              <p:commandLink value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/cancel')}"
+                onclick="PF('destroy-case-dialog').hide();" styleClass="pt-3 flex justify-content-center"/>
+            </h:panelGroup>
            </ui:define>
           </ui:decorate>
           
diff --git a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
index b8b8eefe3bc..6b54297ccbd 100644
--- a/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
+++ b/AxonIvyPortal/portal/webContent/layouts/restricted/decorator/TableWidget.xhtml
@@ -232,9 +232,12 @@
   
           <div class="ui-g filter-overlay-panel__footer ">
             <div id="manage-filter" class="ui-g-3 flex justify-content-center ui-sm-hidden">
-               <p:commandButton icon="si si-pencil" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/ManageFilter')}"
-                    styleClass="ui-sm-hidden saved-filter__manage-filter absolute bottom-0 mb-4 ui-button-flat" global="false"
-                    onclick="hideAllDashboardOverlayPanels(); PF('manage-filter-dialog').show();" />
+               <p:commandLink
+                    styleClass="ui-sm-hidden saved-filter__manage-filter absolute bottom-0 mb-5 ui-button-flat" global="false"
+                    onclick="hideAllDashboardOverlayPanels(); PF('manage-filter-dialog').show();">
+                  <i class="pr-1 pt-1 si si-pencil" />
+                  <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/dashboard/ManageFilter')}</span>
+               </p:commandLink>
             </div>
             <div class="ui-g-9 u-text-align-right ui-sm-12 footer-buttons-container">
               <div class="ui-g-6 ui-sm-hidden">
@@ -264,16 +267,18 @@
                 actionListener="#{widget.onApplyUserFilters()}"
                 styleClass="u-mar-right-5 w-full" />
               </div>
-              <div class="ui-g-12 flex justify-content-center ui-sm-12">
-              <p:commandButton id="reset-button" value="#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/resetFilters')}"
-                styleClass="secondary-btn u-mar-right-5 ui-button-flat" partialSubmit="true"
-                process="filter-form-#{index}" icon="si si-button-refresh-arrows"
-                update="#{componentToUpdateOnResetFilter} #{cc.clientId}:widget-header-actions"
-                oncomplete="PF('filter-overlay-panel-#{index}').hide(); initWidgetFilterHtml('#{widget.id}');"
-                actionListener="#{widget.onResetUserFilters()}"
-                resetValues="true"/>
+              <div class="ui-g-12 flex justify-content-center ui-sm-12 ">
+                <i class="pr-2 pt-1 si si-button-refresh-arrows ui-link u-hover-no-underline"/>
+                <p:commandLink id="reset-button"
+                  styleClass="u-mar-right-5 flex reset-button" partialSubmit="true"
+                  process="filter-form-#{index}"
+                  update="#{componentToUpdateOnResetFilter} #{cc.clientId}:widget-header-actions"
+                  oncomplete="PF('filter-overlay-panel-#{index}').hide(); initWidgetFilterHtml('#{widget.id}');"
+                  actionListener="#{widget.onResetUserFilters()}"
+                  resetValues="true">
+                    <span>#{ivy.cms.co('/ch.ivy.addon.portalkit.ui.jsf/common/resetFilters')}</span>
+                  </p:commandLink>
               </div>
-
             </div>
           </div>
         </h:form>
diff --git a/AxonIvyPortal/portal/webContent/resources/css/module.css b/AxonIvyPortal/portal/webContent/resources/css/module.css
index a34b1eaf453..62b286ae003 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/module.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/module.css
@@ -5180,7 +5180,7 @@ body.light .image-process-container .image-process-item .card-item.card.image-wi
 }
 
 .image-process-item .card.image-widget-mode .process-name {
-  padding: 0.5rem 0.6rem;
+  padding: 1rem 0.6rem;
 }
 
 .image-process-icon .process-image-view-icon {
@@ -5610,7 +5610,7 @@ a.dashboard-action-container label {
   border: 1px solid var(--process-list-item-border-color);
   background-color: var(--process-list-item-background-color);
   border-radius: 10px;
-  height: 10em;
+  height: 15rem;
   align-items: center;
   display: flex;
 }
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
index 49187eeb259..18ce559c462 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-dark.css
@@ -299,7 +299,8 @@
   --text-tab-default-color: var(--ivy-primary-color-grey-medium);
   --no-item-icon-color: var(--ivy-primary-color-grey-light);
   --user-menu-items-border-color: var(--ivy-portal-color-gray-dark);
-  
+  --option-item-border-color: var(--ivy-portal-color-gray-dark);
+
   /* Portal breadcrumb */
   --breadcrumb-background-color: transparent;
   --breadcrumb-home-icon-color: var(--primary-color);
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
index 0c8388c9914..e89d41c305f 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal-variables-light.css
@@ -309,6 +309,7 @@
   --text-tab-default-color: var(--ivy-primary-color-grey-medium);
   --no-item-icon-color: var(--ivy-primary-color-grey-light);
   --user-menu-items-border-color: var(--ivy-primary-color-grey-pale);
+  --option-item-border-color: var(--ivy-primary-color-grey-pale);
   /* Portal breadcrumb */
   --breadcrumb-background-color: transparent;
   --breadcrumb-home-icon-color: var(--primary-color);
diff --git a/AxonIvyPortal/portal/webContent/resources/css/portal.css b/AxonIvyPortal/portal/webContent/resources/css/portal.css
index 6b05e0d2411..7be9f666aae 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/portal.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/portal.css
@@ -247,7 +247,7 @@ body .process-widget .ui-selectbooleanbutton.ui-state-active .ui-icon {
   font-size: var(--large-font-size); }
 
 .edit-process-icon-group .awesome-icon-selection-panel span {
-  font-size: var(--process-grid-icon-font-size); }
+  font-size: 1.4em; }
 
 .edit-process-info-group .edit-process-detail-1st-cell,
 .grid-view-form .process-action-group {
@@ -785,9 +785,12 @@ body .ui-inputfield.case-detail-name-input {
   color: var(--action-step-disabled-text-color); }
 
 .action-steps-panel a.action-step-item:hover {
-  background-color: var(--item-background-hover);
   color: var(--menu-action-hover-text-color); }
 
+.action-steps-panel a.action-step-item:not(:last-child) {
+  border-bottom: 1px solid var(--option-item-border-color);
+}
+
 .case-state-in-progress {
   color: var(--case-state-in-progress-color); }
 
@@ -1156,13 +1159,20 @@ ul.users-in-role {
 .options-panel .option-item:hover {
   text-decoration: none;
   color: var(--menu-action-hover-text-color);
-  background-color: var(--item-background-hover);
+}
+
+.options-panel .option-item:not(:last-child) {
+  border-bottom: 1px solid var(--option-item-border-color);
 }
 
 .options-panel .pointer-event-none {
   pointer-events: none;
 }
 
+.task-additional-actions-panel, .case-side-steps-panel {
+  border-top: 1px solid var(--ivy-primary-color-grey-light);
+}
+
 .process-widget-action .name-sort-command,
 .process-widget-action .editing-switch-command,
 .process-widget-action .show-adding-dialog-commmand,
@@ -1285,6 +1295,15 @@ color: var(--button-text-color);
   color: var(--ivy-tertinary-color-red-medium);
 }
 
+.portal-remove-button {
+  background-color: var(--ivy-tertinary-color-red-medium) !important;
+  border-color: var(--ivy-tertinary-color-red-medium) !important;
+}
+
+.ui-button.portal-remove-button:active {
+  border-color: var(--ivy-tertinary-color-red-medium) !important;
+}
+
 
 /* My Profile */
 .my-profile-container .setting-header span {
diff --git a/AxonIvyPortal/portal/webContent/resources/css/utility.css b/AxonIvyPortal/portal/webContent/resources/css/utility.css
index 6b8a3fe3de3..c98684a324d 100644
--- a/AxonIvyPortal/portal/webContent/resources/css/utility.css
+++ b/AxonIvyPortal/portal/webContent/resources/css/utility.css
@@ -72,6 +72,10 @@
   transition: all 0.5s ease;
 }
 
+.u-hover-no-underline:hover{
+  text-decoration: none !important;
+}
+
 .u-hover-effect:hover {
   opacity: 0.8;
   -webkit-transition: all 0.5s ease;
diff --git a/AxonIvyPortal/portal/webContent/resources/js/process-widget.js b/AxonIvyPortal/portal/webContent/resources/js/process-widget.js
index 8b2f4d90924..f1508bc733a 100644
--- a/AxonIvyPortal/portal/webContent/resources/js/process-widget.js
+++ b/AxonIvyPortal/portal/webContent/resources/js/process-widget.js
@@ -345,4 +345,11 @@ function handleUploadFileFail() {
   let uploadErrorElement = document.getElementsByClassName('ui-messages ui-widget ui-helper-hidden ui-fileupload-messages')[1];
   errorMessageElement.style.display = 'block';
   errorMessageElement.appendChild(uploadErrorElement);
+}
+
+function handleEditExternalLinkUploadFileFail() {
+  let errorMessageElement = document.getElementById('edit-external-link-error-message');
+  let uploadErrorElement = document.getElementsByClassName('ui-messages ui-widget ui-helper-hidden ui-fileupload-messages')[0];
+  errorMessageElement.style.display = 'block';
+  errorMessageElement.appendChild(uploadErrorElement);
 }
\ No newline at end of file
diff --git a/Documentation/portal-guide/source/portal-user-guide/full-process-list/index.rst b/Documentation/portal-guide/source/portal-user-guide/full-process-list/index.rst
index a6d45171e83..5be92984647 100644
--- a/Documentation/portal-guide/source/portal-user-guide/full-process-list/index.rst
+++ b/Documentation/portal-guide/source/portal-user-guide/full-process-list/index.rst
@@ -127,8 +127,7 @@ HowTo: Edit process icon of External link in Image mode
 #. Click on ``More menu item`` icon in the process card item.
 #. Click on |edit-icon| :guilabel:`Edit` menu item.
 #. The dialog **Edit process information** is opened.
-#. Click on the link ``Change`` besides the current icon.
-#. The dialog :guilabel:`Selecting icon` is opened, and choose new icon.
+#. You can change the current icon using the available icon list, or open the :guilabel:`Selecting icon dialog` to get more new icons.
 #. Press on :guilabel:`Save` button, and process icon is changed
 
    |edit-process-menu-item|