diff --git a/webui/package-lock.json b/webui/package-lock.json
index ab37df2e758..aa8b3140928 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -21,6 +21,7 @@
         "leaflet": "^1.9.4",
         "leaflet-defaulticon-compatibility": "^0.1.2",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.525.0",
         "p-map": "^7.0.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
@@ -8515,6 +8516,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.525.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
+      "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -23473,6 +23483,12 @@
         "yallist": "^4.0.0"
       }
     },
+    "lucide-react": {
+      "version": "0.525.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
+      "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
+      "requires": {}
+    },
     "lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/webui/package.json b/webui/package.json
index 412a99ddd56..d659c7018d5 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -32,6 +32,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.525.0",
     "p-map": "^7.0.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
diff --git a/webui/src/lib/components/repository/treeRows.jsx b/webui/src/lib/components/repository/treeRows.jsx
index f295d194d05..220f88036df 100644
--- a/webui/src/lib/components/repository/treeRows.jsx
+++ b/webui/src/lib/components/repository/treeRows.jsx
@@ -13,6 +13,7 @@ import {OverlayTrigger} from "react-bootstrap";
 import Tooltip from "react-bootstrap/Tooltip";
 import Button from "react-bootstrap/Button";
 import {TreeRowType} from "../../../constants";
+import { BarChart3 } from 'lucide-react';
 
 class RowAction {
     /**
@@ -20,12 +21,14 @@ class RowAction {
      * @param {string} tooltip
      * @param {string} text
      * @param {()=>void} onClick
+     * @param {boolean} active
      */
-    constructor(icon, tooltip= "", text, onClick) {
+    constructor(icon, tooltip= "", text, onClick, active = false) {
         this.icon = icon
         this.tooltip = tooltip
         this.text = text
         this.onClick = onClick
+        this.active = active
     }
 }
 
@@ -37,6 +40,7 @@ const ChangeRowActions = ({actions}) => <>
         actions.map(action => (
             <OverlayTrigger key={action.text} placement="bottom" overlay={<Tooltip hidden={!action.tooltip}>{action.tooltip}</Tooltip>}>
                 <Button variant="link" disabled={false}
+                        className={`row-action-btn ${action.active ? 'active' : ''}`}
                         onClick={(e) => {
                             e.preventDefault();
                             action.onClick()
@@ -57,7 +61,9 @@ export const ObjectTreeEntryRow = ({entry, relativeTo = "", diffExpanded, depth
 
     const rowActions = []
     if (onClickExpandDiff) {
-        rowActions.push(new RowAction(null, null, diffExpanded ? "Hide object changes" : "Show object changes", onClickExpandDiff))
+        const expandIcon = diffExpanded ? <ChevronDownIcon/> : <ChevronRightIcon/>;
+        const expandTooltip = diffExpanded ? "Hide object changes" : "Show object changes";
+        rowActions.push(new RowAction(expandIcon, expandTooltip, null, onClickExpandDiff))
     }
     if (onRevert) {
         rowActions.push(new RowAction(<HistoryIcon/>, "Revert changes", null, () => {
@@ -81,7 +87,8 @@ export const PrefixTreeEntryRow = ({entry, relativeTo = "", dirExpanded, depth =
         pathSection = <Link href={onNavigate(entry)}>{pathSection}</Link>
     }
     const rowActions = []
-    rowActions.push(new RowAction(null, null, showSummary ? "Hide change summary" : "Calculate change summary", () => setShowSummary(!showSummary)))
+    const summaryTooltip = showSummary ? "Hide change summary" : "Calculate change summary";
+    rowActions.push(new RowAction(<BarChart3/>, summaryTooltip, null, () => setShowSummary(!showSummary), showSummary))
     if (onRevert) {
         rowActions.push(new RowAction(<HistoryIcon/>, "Revert changes", null, () => {
             setShowRevertConfirm(true)
diff --git a/webui/src/styles/objects/tree.css b/webui/src/styles/objects/tree.css
index 526b5df954a..bd347b83542 100644
--- a/webui/src/styles/objects/tree.css
+++ b/webui/src/styles/objects/tree.css
@@ -144,4 +144,14 @@ tr:hover .row-hover .btn-outline-danger {
 [data-bs-theme="dark"] .tree-container .dropdown-divider,
 [data-bs-theme="dark"] .change-entry-row .dropdown-divider {
   border-color: #374151;
+}
+
+.row-action-btn {
+  color: #000000;
+  opacity: 1;
+}
+
+.row-action-btn.active {
+  color: #6c757d;
+  opacity: 0.7;
 } 
\ No newline at end of file