diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8b055b7a6..1191bbebf 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -24,4 +24,8 @@ yarn-debug.log*
 yarn-error.log*
 
 playwright-report
-test-results
\ No newline at end of file
+test-results
+
+# auto-generated files
+/src/assets/material-symbols-icons.json
+/src/assets/material-symbols-icons.d.ts
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f9ec204a6..817f7b17e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@iconify/react": "^6.0.0",
         "@mantine/core": "^8.0.1",
         "@mantine/dropzone": "^8.0.1",
         "@mantine/hooks": "^8.0.1",
@@ -29,7 +30,6 @@
         "i18next-browser-languagedetector": "^8.1.0",
         "i18next-http-backend": "^3.0.2",
         "jszip": "^3.10.1",
-        "material-symbols": "^0.33.0",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^3.11.174",
         "react": "^19.1.0",
@@ -40,6 +40,8 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@iconify-json/material-symbols": "^1.2.33",
+        "@iconify/utils": "^3.0.1",
         "@playwright/test": "^1.40.0",
         "@types/node": "^24.2.1",
         "@types/react": "^19.1.4",
@@ -48,6 +50,7 @@
         "@vitest/coverage-v8": "^1.0.0",
         "jsdom": "^23.0.0",
         "license-checker": "^25.0.1",
+        "madge": "^8.0.0",
         "postcss": "^8.5.3",
         "postcss-cli": "^11.0.1",
         "postcss-preset-mantine": "^1.17.0",
@@ -88,6 +91,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-9.2.0.tgz",
+      "integrity": "sha512-Oq1d9BGZakE/FyoEtcNeSwM7MpDO2vUBi11RWBZXf75zPsbUVWmUs03EqkRFrcgbXyKTas0BdZWC1wcuSoqSAw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
@@ -331,12 +356,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.3.tgz",
-      "integrity": "sha512-xyYxRj6+tLNDTWi0KCBcZ9V7yg3/lwL9DWh9Uwh/RIVlIfFidggcgxKX3GCXwCiswwcGRawBKbEg2LG/Y8eJhw==",
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
+      "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.3"
+        "@babel/types": "^7.28.2"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -419,9 +444,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz",
-      "integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==",
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
+      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -553,6 +578,20 @@
         "node": ">=18"
       }
     },
+    "node_modules/@dependents/detective-less": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@dependents/detective-less/-/detective-less-5.0.1.tgz",
+      "integrity": "sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "gonzales-pe": "^4.3.0",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -1177,6 +1216,104 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@iconify-json/material-symbols": {
+      "version": "1.2.33",
+      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.33.tgz",
+      "integrity": "sha512-Bs0X1+/vpJydW63olrGh60zkR8/Y70sI14AIWaP7Z6YQXukzWANH4q3I0sIPklbIn1oL6uwLvh0zQyd6Vh79LQ==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.0.tgz",
+      "integrity": "sha512-eqNscABVZS8eCpZLU/L5F5UokMS9mnCf56iS1nM9YYHdH8ZxqZL9zyjSwW60IOQFsXZkilbBiv+1paMXBhSQnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.0.1.tgz",
+      "integrity": "sha512-A78CUEnFGX8I/WlILxJCuIJXloL0j/OJ9PSchPAfCargEIKmUBWvvEMmKWB5oONwiUqlNt+5eRufdkLxeHIWYw==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@antfu/utils": "^9.2.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.1",
+        "globals": "^15.15.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.1.1",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "dev": true,
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true
+    },
+    "node_modules/@iconify/utils/node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -2367,6 +2504,96 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@ts-graphviz/adapter": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ts-graphviz/adapter/-/adapter-2.0.6.tgz",
+      "integrity": "sha512-kJ10lIMSWMJkLkkCG5gt927SnGZcBuG0s0HHswGzcHTgvtUe7yk5/3zTEr0bafzsodsOq5Gi6FhQeV775nC35Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ts-graphviz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ts-graphviz"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@ts-graphviz/common": "^2.1.5"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ts-graphviz/ast": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@ts-graphviz/ast/-/ast-2.0.7.tgz",
+      "integrity": "sha512-e6+2qtNV99UT6DJSoLbHfkzfyqY84aIuoV8Xlb9+hZAjgpum8iVHprGeAMQ4rF6sKUAxrmY8rfF/vgAwoPc3gw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ts-graphviz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ts-graphviz"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@ts-graphviz/common": "^2.1.5"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ts-graphviz/common": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@ts-graphviz/common/-/common-2.1.5.tgz",
+      "integrity": "sha512-S6/9+T6x8j6cr/gNhp+U2olwo1n0jKj/682QVqsh7yXWV6ednHYqxFw0ZsY3LyzT0N8jaZ6jQY9YD99le3cmvg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ts-graphviz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ts-graphviz"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ts-graphviz/core": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@ts-graphviz/core/-/core-2.0.7.tgz",
+      "integrity": "sha512-w071DSzP94YfN6XiWhOxnLpYT3uqtxJBDYdh6Jdjzt+Ce6DNspJsPQgpC7rbts/B8tEkq0LHoYuIF/O5Jh5rPg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ts-graphviz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ts-graphviz"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@ts-graphviz/ast": "^2.0.7",
+        "@ts-graphviz/common": "^2.1.5"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -2475,6 +2702,132 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.40.0.tgz",
+      "integrity": "sha512-/A89vz7Wf5DEXsGVvcGdYKbVM9F7DyFXj52lNYUDS1L9yJfqjW/fIp5PgMuEJL/KeqVTe2QSbXAGUZljDUpArw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.40.0",
+        "@typescript-eslint/types": "^8.40.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.40.0.tgz",
+      "integrity": "sha512-jtMytmUaG9d/9kqSl/W3E3xaWESo4hFDxAIHGVW/WKKtQhesnRIJSAJO6XckluuJ6KDB5woD1EiqknriCtAmcw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.40.0.tgz",
+      "integrity": "sha512-ETdbFlgbAmXHyFPwqUIYrfc12ArvpBhEVgGAxVYSwli26dn8Ko+lIo4Su9vI9ykTZdJn+vJprs/0eZU0YMAEQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.40.0.tgz",
+      "integrity": "sha512-k1z9+GJReVVOkc1WfVKs1vBrR5MIKKbdAjDTPvIK3L8De6KbFfPFt6BKpdkdk7rZS2GtC/m6yI5MYX+UsuvVYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.40.0",
+        "@typescript-eslint/tsconfig-utils": "8.40.0",
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/visitor-keys": "8.40.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.40.0.tgz",
+      "integrity": "sha512-8CZ47QwalyRjsypfwnbI3hKy5gJDPmrkLjkgMxhi0+DZZ2QNx2naS6/hWoVYUHU7LU2zleF68V9miaVZvhFfTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.40.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.0.tgz",
@@ -2668,6 +3021,94 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.19.tgz",
+      "integrity": "sha512-/afpyvlkrSNYbPo94Qu8GtIOWS+g5TRdOvs6XZNw6pWQQmj5pBgSZvEPOIZlqWq0YvoUhDDQaQ2TnzuJdOV4hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@vue/shared": "3.5.19",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.19.tgz",
+      "integrity": "sha512-Drs6rPHQZx/pN9S6ml3Z3K/TWCIRPvzG2B/o5kFK9X0MNHt8/E+38tiRfojufrYBfA6FQUFB2qBBRXlcSXWtOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.19",
+        "@vue/shared": "3.5.19"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.19.tgz",
+      "integrity": "sha512-YWCm1CYaJ+2RvNmhCwI7t3I3nU+hOrWGWMsn+Z/kmm1jy5iinnVtlmkiZwbLlbV1SRizX7vHsc0/bG5dj0zRTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@vue/compiler-core": "3.5.19",
+        "@vue/compiler-dom": "3.5.19",
+        "@vue/compiler-ssr": "3.5.19",
+        "@vue/shared": "3.5.19",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.17",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.19.tgz",
+      "integrity": "sha512-/wx0VZtkWOPdiQLWPeQeqpHWR/LuNC7bHfSX7OayBTtUy8wur6vT6EQIX6Et86aED6J+y8tTw43qo2uoqGg5sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.19",
+        "@vue/shared": "3.5.19"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.19",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.19.tgz",
+      "integrity": "sha512-IhXCOn08wgKrLQxRFKKlSacWg4Goi1BolrdEeLYn6tgHjJNXVrWJ5nzoxZqNwl5p88aLlQ8LOaoMa3AYvaKJ/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2738,6 +3179,13 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -2752,6 +3200,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/app-module-path": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/app-module-path/-/app-module-path-2.2.0.tgz",
+      "integrity": "sha512-gkco+qxENJV+8vFcDiiFhuoSvRXb2a/QPqpSoWhVz829VNJfOTnELbBmPmNKFxf3xdNnw4DWCkzkDaavcX/1YQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -2808,6 +3263,16 @@
         "node": "*"
       }
     },
+    "node_modules/ast-module-types": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ast-module-types/-/ast-module-types-6.0.1.tgz",
+      "integrity": "sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2893,6 +3358,27 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -2922,6 +3408,18 @@
       "integrity": "sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==",
       "license": "MIT"
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2978,6 +3476,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -3152,6 +3675,42 @@
         "node": ">=10"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3201,6 +3760,23 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3424,6 +4000,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3450,6 +4049,35 @@
         "node": ">=4"
       }
     },
+    "node_modules/dependency-tree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/dependency-tree/-/dependency-tree-11.2.0.tgz",
+      "integrity": "sha512-+C1H3mXhcvMCeu5i2Jpg9dc0N29TWTuT6vJD7mHLAfVmAbo9zW8NlkvQ1tYd3PDMab0IRQM0ccoyX68EZtx9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^12.1.0",
+        "filing-cabinet": "^5.0.3",
+        "precinct": "^12.2.0",
+        "typescript": "^5.8.3"
+      },
+      "bin": {
+        "dependency-tree": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/dependency-tree/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3474,6 +4102,147 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/detective-amd": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/detective-amd/-/detective-amd-6.0.1.tgz",
+      "integrity": "sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-module-types": "^6.0.1",
+        "escodegen": "^2.1.0",
+        "get-amd-module-type": "^6.0.1",
+        "node-source-walk": "^7.0.1"
+      },
+      "bin": {
+        "detective-amd": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-cjs": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/detective-cjs/-/detective-cjs-6.0.1.tgz",
+      "integrity": "sha512-tLTQsWvd2WMcmn/60T2inEJNhJoi7a//PQ7DwRKEj1yEeiQs4mrONgsUtEJKnZmrGWBBmE0kJ1vqOG/NAxwaJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-module-types": "^6.0.1",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-es6": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/detective-es6/-/detective-es6-5.0.1.tgz",
+      "integrity": "sha512-XusTPuewnSUdoxRSx8OOI6xIA/uld/wMQwYsouvFN2LAg7HgP06NF1lHRV3x6BZxyL2Kkoih4ewcq8hcbGtwew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-postcss": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/detective-postcss/-/detective-postcss-7.0.1.tgz",
+      "integrity": "sha512-bEOVpHU9picRZux5XnwGsmCN4+8oZo7vSW0O0/Enq/TO5R2pIAP2279NsszpJR7ocnQt4WXU0+nnh/0JuK4KHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-url": "^1.2.4",
+        "postcss-values-parser": "^6.0.2"
+      },
+      "engines": {
+        "node": "^14.0.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.47"
+      }
+    },
+    "node_modules/detective-sass": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/detective-sass/-/detective-sass-6.0.1.tgz",
+      "integrity": "sha512-jSGPO8QDy7K7pztUmGC6aiHkexBQT4GIH+mBAL9ZyBmnUIOFbkfZnO8wPRRJFP/QP83irObgsZHCoDHZ173tRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "gonzales-pe": "^4.3.0",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-scss": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/detective-scss/-/detective-scss-5.0.1.tgz",
+      "integrity": "sha512-MAyPYRgS6DCiS6n6AoSBJXLGVOydsr9huwXORUlJ37K3YLyiN0vYHpzs3AdJOgHobBfispokoqrEon9rbmKacg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "gonzales-pe": "^4.3.0",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-stylus": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/detective-stylus/-/detective-stylus-5.0.1.tgz",
+      "integrity": "sha512-Dgn0bUqdGbE3oZJ+WCKf8Dmu7VWLcmRJGc6RCzBgG31DLIyai9WAoEhYRgIHpt/BCRMrnXLbGWGPQuBUrnF0TA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/detective-typescript": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/detective-typescript/-/detective-typescript-14.0.0.tgz",
+      "integrity": "sha512-pgN43/80MmWVSEi5LUuiVvO/0a9ss5V7fwVfrJ4QzAQRd3cwqU1SfWGXJFcNKUqoD5cS+uIovhw5t/0rSeC5Mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "^8.23.0",
+        "ast-module-types": "^6.0.1",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "typescript": "^5.4.4"
+      }
+    },
+    "node_modules/detective-vue2": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/detective-vue2/-/detective-vue2-2.2.0.tgz",
+      "integrity": "sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dependents/detective-less": "^5.0.1",
+        "@vue/compiler-sfc": "^3.5.13",
+        "detective-es6": "^5.0.1",
+        "detective-sass": "^6.0.1",
+        "detective-scss": "^5.0.1",
+        "detective-stylus": "^5.0.1",
+        "detective-typescript": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "typescript": "^5.4.4"
+      }
+    },
     "node_modules/dezalgo": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
@@ -3672,6 +4441,76 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -3682,6 +4521,16 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -3719,6 +4568,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -3771,6 +4626,42 @@
         "node": ">= 12"
       }
     },
+    "node_modules/filing-cabinet": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/filing-cabinet/-/filing-cabinet-5.0.3.tgz",
+      "integrity": "sha512-PlPcMwVWg60NQkhvfoxZs4wEHjhlOO/y7OAm4sKM60o1Z9nttRY4mcdQxp/iZ+kg/Vv6Hw1OAaTbYVM9DA9pYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-module-path": "^2.2.0",
+        "commander": "^12.1.0",
+        "enhanced-resolve": "^5.18.0",
+        "module-definition": "^6.0.1",
+        "module-lookup-amd": "^9.0.3",
+        "resolve": "^1.22.10",
+        "resolve-dependency-path": "^4.0.1",
+        "sass-lookup": "^6.1.0",
+        "stylus-lookup": "^6.1.0",
+        "tsconfig-paths": "^4.2.0",
+        "typescript": "^5.7.3"
+      },
+      "bin": {
+        "filing-cabinet": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/filing-cabinet/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3934,6 +4825,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-amd-module-type": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-amd-module-type/-/get-amd-module-type-6.0.1.tgz",
+      "integrity": "sha512-MtjsmYiCXcYDDrGqtNbeIYdAl85n+5mSv2r3FbzER/YV3ZILw4HNNIw34HuV5pyl0jzs6GFYU1VHVEefhgcNHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-module-types": "^6.0.1",
+        "node-source-walk": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -3987,6 +4892,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4044,6 +4956,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/gonzales-pe": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
+      "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "gonzales": "bin/gonzales.js"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4273,6 +5201,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -4321,6 +5270,13 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4388,6 +5344,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4398,6 +5364,16 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -4405,6 +5381,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@@ -4418,6 +5404,39 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-url-superb": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-4.0.0.tgz",
+      "integrity": "sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -4662,6 +5681,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true
+    },
     "node_modules/license-checker": {
       "version": "25.0.1",
       "resolved": "https://registry.npmjs.org/license-checker/-/license-checker-25.0.1.tgz",
@@ -5062,6 +6087,23 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5103,6 +6145,45 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/madge": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/madge/-/madge-8.0.0.tgz",
+      "integrity": "sha512-9sSsi3TBPhmkTCIpVQF0SPiChj1L7Rq9kU2KDG1o6v2XH9cCw086MopjVCD+vuoL5v8S77DTbVopTO8OUiQpIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "commander": "^7.2.0",
+        "commondir": "^1.0.1",
+        "debug": "^4.3.4",
+        "dependency-tree": "^11.0.0",
+        "ora": "^5.4.1",
+        "pluralize": "^8.0.0",
+        "pretty-ms": "^7.0.1",
+        "rc": "^1.2.8",
+        "stream-to-array": "^2.3.0",
+        "ts-graphviz": "^2.1.2",
+        "walkdir": "^0.4.1"
+      },
+      "bin": {
+        "madge": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://www.paypal.me/pahen"
+      },
+      "peerDependencies": {
+        "typescript": "^5.4.4"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -5150,12 +6231,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/material-symbols": {
-      "version": "0.33.0",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.33.0.tgz",
-      "integrity": "sha512-t9/Gz+14fClRgN7oVOt5CBuwsjFLxSNP9BRDyMrI5el3IZNvoD94IDGJha0YYivyAow24rCS0WOkAv4Dp+YjNg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5359,6 +6434,52 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/module-definition": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/module-definition/-/module-definition-6.0.1.tgz",
+      "integrity": "sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-module-types": "^6.0.1",
+        "node-source-walk": "^7.0.1"
+      },
+      "bin": {
+        "module-definition": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/module-lookup-amd": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/module-lookup-amd/-/module-lookup-amd-9.0.5.tgz",
+      "integrity": "sha512-Rs5FVpVcBYRHPLuhHOjgbRhosaQYLtEo3JIeDIbmNo7mSssi1CTzwMh8v36gAzpbzLGXI9wB/yHh+5+3fY1QVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^12.1.0",
+        "glob": "^7.2.3",
+        "requirejs": "^2.3.7",
+        "requirejs-config-file": "^4.0.0"
+      },
+      "bin": {
+        "lookup-amd": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/module-lookup-amd/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5438,6 +6559,19 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
+    "node_modules/node-source-walk": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/node-source-walk/-/node-source-walk-7.0.1.tgz",
+      "integrity": "sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.26.7"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/nopt": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -5578,6 +6712,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -5623,6 +6781,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "dev": true
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -5658,6 +6822,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
+      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -5857,10 +7031,20 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5877,7 +7061,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -6186,6 +7370,64 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/postcss-values-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz",
+      "integrity": "sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "is-url-superb": "^4.0.0",
+        "quote-unquote": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.9"
+      }
+    },
+    "node_modules/precinct": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/precinct/-/precinct-12.2.0.tgz",
+      "integrity": "sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dependents/detective-less": "^5.0.1",
+        "commander": "^12.1.0",
+        "detective-amd": "^6.0.1",
+        "detective-cjs": "^6.0.1",
+        "detective-es6": "^5.0.1",
+        "detective-postcss": "^7.0.1",
+        "detective-sass": "^6.0.1",
+        "detective-scss": "^5.0.1",
+        "detective-stylus": "^5.0.1",
+        "detective-typescript": "^14.0.0",
+        "detective-vue2": "^2.2.0",
+        "module-definition": "^6.0.1",
+        "node-source-walk": "^7.0.1",
+        "postcss": "^8.5.1",
+        "typescript": "^5.7.3"
+      },
+      "bin": {
+        "precinct": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/precinct/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -6228,6 +7470,22 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/pretty-ms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
+      "integrity": "sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse-ms": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -6279,6 +7537,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ]
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -6307,12 +7581,35 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quote-unquote": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/quote-unquote/-/quote-unquote-1.0.0.tgz",
+      "integrity": "sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/raf-schd": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
       "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
       "license": "MIT"
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -6596,8 +7893,8 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -6666,6 +7963,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requirejs": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.7.tgz",
+      "integrity": "sha512-DouTG8T1WanGok6Qjg2SXuCMzszOo0eHeH9hDZ5Y4x8Je+9JB38HdTLT4/VA8OaUhBa0JPVHJ0pyBkM1z+pDsw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "r_js": "bin/r.js",
+        "r.js": "bin/r.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/requirejs-config-file": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/requirejs-config-file/-/requirejs-config-file-4.0.0.tgz",
+      "integrity": "sha512-jnIre8cbWOyvr8a5F2KuqBnY+SDA4NXr/hzEZJG79Mxm2WiFQz2dzhC8ibtPJS7zkmBEl1mxSwp5HhC1W4qpxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esprima": "^4.0.0",
+        "stringify-object": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -6693,6 +8018,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-dependency-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dependency-path/-/resolve-dependency-path-4.0.1.tgz",
+      "integrity": "sha512-YQftIIC4vzO9UMhO/sCgXukNyiwVRCVaxiWskCBy7Zpqkplm8kTAISZ8O1MoKW1ca6xzgLUBjZTcDgypXvXxiQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -6702,6 +8037,46 @@
         "node": ">=4"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6805,6 +8180,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -6819,8 +8195,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -6829,6 +8204,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sass-lookup": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/sass-lookup/-/sass-lookup-6.1.0.tgz",
+      "integrity": "sha512-Zx+lVyoWqXZxHuYWlTA17Z5sczJ6braNT2C7rmClw+c4E7r/n911Zwss3h1uHI9reR5AgHZyNHF7c2+VIp5AUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^12.1.0",
+        "enhanced-resolve": "^5.18.0"
+      },
+      "bin": {
+        "sass-lookup": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/sass-lookup/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6913,8 +8315,8 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "license": "ISC",
-      "optional": true
+      "devOptional": true,
+      "license": "ISC"
     },
     "node_modules/simple-concat": {
       "version": "1.0.1",
@@ -7050,12 +8452,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stream-to-array": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/stream-to-array/-/stream-to-array-2.3.0.tgz",
+      "integrity": "sha512-UsZtOYEn4tWU2RGLOXr/o/xjRBftZRlG3dEWoaHr8j4GuypJ3isitGbVyjQKAuMu+xbiop8q224TjiZWc4XTZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.1.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -7082,6 +8494,21 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -7095,6 +8522,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@@ -7120,6 +8557,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.1.tgz",
@@ -7146,6 +8593,32 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
+    "node_modules/stylus-lookup": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/stylus-lookup/-/stylus-lookup-6.1.0.tgz",
+      "integrity": "sha512-5QSwgxAzXPMN+yugy61C60PhoANdItfdjSEZR8siFwz7yL9jTmV0UBKDCfn3K8GkGB4g0Y9py7vTCX8rFu4/pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^12.1.0"
+      },
+      "bin": {
+        "stylus-lookup": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/stylus-lookup/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/sugarss": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
@@ -7292,6 +8765,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -7418,6 +8897,60 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-graphviz": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/ts-graphviz/-/ts-graphviz-2.1.6.tgz",
+      "integrity": "sha512-XyLVuhBVvdJTJr2FJJV2L1pc4MwSjMhcunRVgDE9k4wbb2ee7ORYnPewxMWUav12vxyfUM686MSGsqnVRIInuw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ts-graphviz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ts-graphviz"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@ts-graphviz/adapter": "^2.0.6",
+        "@ts-graphviz/ast": "^2.0.7",
+        "@ts-graphviz/common": "^2.1.5",
+        "@ts-graphviz/core": "^2.0.7"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -8827,6 +10360,26 @@
         "node": ">=18"
       }
     },
+    "node_modules/walkdir": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.4.1.tgz",
+      "integrity": "sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ad945dbc2..eaa5f20d4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@iconify/react": "^6.0.0",
     "@mantine/core": "^8.0.1",
     "@mantine/dropzone": "^8.0.1",
     "@mantine/hooks": "^8.0.1",
@@ -25,7 +26,6 @@
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
-    "material-symbols": "^0.33.0",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^3.11.174",
     "react": "^19.1.0",
@@ -36,10 +36,14 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "predev": "npm run generate-icons",
     "dev": "npx tsc --noEmit && vite",
+    "prebuild": "npm run generate-icons",
     "build": "npx tsc --noEmit && vite build",
     "preview": "vite preview",
     "generate-licenses": "node scripts/generate-licenses.js",
+    "generate-icons": "node scripts/generate-icons.js",
+    "generate-icons:verbose": "node scripts/generate-icons.js --verbose",
     "test": "vitest",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
@@ -66,6 +70,8 @@
     ]
   },
   "devDependencies": {
+    "@iconify-json/material-symbols": "^1.2.33",
+    "@iconify/utils": "^3.0.1",
     "@playwright/test": "^1.40.0",
     "@types/node": "^24.2.1",
     "@types/react": "^19.1.4",
@@ -74,6 +80,7 @@
     "@vitest/coverage-v8": "^1.0.0",
     "jsdom": "^23.0.0",
     "license-checker": "^25.0.1",
+    "madge": "^8.0.0",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "postcss-preset-mantine": "^1.17.0",
diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e09f874ac..2c9a0a6cd 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -85,6 +85,7 @@
   "warning": {
     "tooltipTitle": "Warning"
   },
+  "edit": "Edit",
   "delete": "Delete",
   "username": "Username",
   "password": "Password",
@@ -538,10 +539,6 @@
       "title": "Edit Table of Contents",
       "desc": "Add or edit bookmarks and table of contents in PDF documents"
     },
-    "automate": {
-      "title": "Automate",
-      "desc": "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."
-    },
     "manageCertificates": {
       "title": "Manage Certificates",
       "desc": "Import, export, or delete digital certificate files used for signing PDFs."
@@ -601,8 +598,16 @@
     "changePermissions": {
       "title": "Change Permissions",
       "desc": "Change document restrictions and permissions"
+    },
+    "automate": {
+      "title": "Automate",
+      "desc": "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."
     }
   },
+  "landing": {
+    "addFiles": "Add Files",
+    "uploadFromComputer": "Upload from computer"
+  },
   "viewPdf": {
     "tags": "view,read,annotate,text,image,highlight,edit",
     "title": "View/Edit PDF",
@@ -731,7 +736,8 @@
     "officeDocs": "Office Documents (Word, Excel, PowerPoint)",
     "imagesExt": "Images (JPG, PNG, etc.)",
     "markdown": "Markdown",
-    "textRtf": "Text/RTF"
+    "textRtf": "Text/RTF",
+    "grayscale": "Greyscale"
   },
   "imageToPdf": {
     "tags": "conversion,img,jpg,picture,photo"
@@ -986,6 +992,7 @@
     },
     "submit": "Change"
   },
+  
   "removePages": {
     "tags": "Remove pages,delete pages",
     "title": "Remove Pages",
@@ -1920,23 +1927,41 @@
     "currentPage": "Current Page",
     "totalPages": "Total Pages"
   },
+  "rightRail": {
+    "closeSelected": "Close Selected Files",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "selectByNumber": "Select by Page Numbers",
+    "deleteSelected": "Delete Selected Pages",
+    "closePdf": "Close PDF",
+    "exportAll": "Export PDF",
+    "downloadSelected": "Download Selected Files",
+    "downloadAll": "Download All",
+    "toggleTheme": "Toggle Theme",
+    "language": "Language"
+  },
   "toolPicker": {
     "searchPlaceholder": "Search tools...",
     "noToolsFound": "No tools found",
     "allTools": "ALL TOOLS",
     "quickAccess": "QUICK ACCESS",
+    "categories": {
+      "standardTools": "Standard Tools",
+      "advancedTools": "Advanced Tools",
+      "recommendedTools": "Recommended Tools"
+    },
     "subcategories": {
-      "Signing": "Signing",
-      "Document Security": "Document Security",
-      "Verification": "Verification",
-      "Document Review": "Document Review",
-      "Page Formatting": "Page Formatting",
-      "Extraction": "Extraction",
-      "Removal": "Removal",
-      "Automation": "Automation",
-      "General": "General",
-      "Advanced Formatting": "Advanced Formatting",
-      "Developer Tools": "Developer Tools"
+      "signing": "Signing",
+      "documentSecurity": "Document Security",
+      "verification": "Verification",
+      "documentReview": "Document Review",
+      "pageFormatting": "Page Formatting",
+      "extraction": "Extraction",
+      "removal": "Removal",
+      "automation": "Automation",
+      "general": "General",
+      "advancedFormatting": "Advanced Formatting",
+      "developerTools": "Developer Tools"
     }
   },
   "quickAccess": {
@@ -1963,6 +1988,7 @@
     "dropFilesHere": "Drop files here or click to upload",
     "pdfFilesOnly": "PDF files only",
     "supportedFileTypes": "Supported file types",
+    "upload": "Upload",
     "uploadFile": "Upload File",
     "uploadFiles": "Upload Files",
     "noFilesInStorage": "No files available in storage. Upload some files first.",
@@ -2016,7 +2042,8 @@
     "downloadSelected": "Download Selected",
     "selectedCount": "{{count}} selected",
     "download": "Download",
-    "delete": "Delete"
+    "delete": "Delete",
+    "unsupported":"Unsupported"
   },
   "storage": {
     "temporaryNotice": "Files are stored temporarily in your browser and may be cleared automatically",
@@ -2186,5 +2213,68 @@
     "results": {
       "title": "Decrypted PDFs"
     }
-  }
+  },
+  "automate": {
+      "title": "Automate",
+      "desc": "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks.",
+      "invalidStep": "Invalid step",
+      "files": {
+        "placeholder": "Select files to process with this automation"
+      },
+      "selection": {
+        "title": "Automation Selection",
+        "saved": {
+          "title": "Saved"
+        },
+        "createNew": {
+          "title": "Create New Automation"
+        },
+        "suggested": {
+          "title": "Suggested"
+        }
+      },
+      "creation": {
+        "createTitle": "Create Automation",
+        "editTitle": "Edit Automation",
+        "description": "Automations run tools sequentially. To get started, add tools in the order you want them to run.",
+        "name": {
+          "placeholder": "Automation name"
+        },
+        "tools": {
+          "selectTool": "Select a tool...",
+          "selected": "Selected Tools",
+          "remove": "Remove tool",
+          "configure": "Configure tool",
+          "notConfigured": "! Not Configured",
+          "addTool": "Add Tool",
+          "add": "Add a tool..."
+        },
+        "save": "Save Automation",
+        "unsavedChanges": {
+          "title": "Unsaved Changes",
+          "message": "You have unsaved changes. Are you sure you want to go back? All changes will be lost.",
+          "cancel": "Cancel",
+          "confirm": "Go Back"
+        }
+      },
+      "run": {
+        "title": "Run Automation"
+      },
+      "sequence": {
+        "unnamed": "Unnamed Automation",
+        "steps": "{{count}} steps",
+        "running": "Running Automation...",
+        "run": "Run Automation",
+        "finish": "Finish"
+      },
+      "reviewTitle": "Automation Results",
+      "config": {
+        "loading": "Loading tool configuration...",
+        "noSettings": "This tool does not have configurable settings.",
+        "title": "Configure {{toolName}}",
+        "description": "Configure the settings for this tool. These settings will be applied when the automation runs.",
+        "cancel": "Cancel",
+        "save": "Save Configuration"
+      }
+    }
 }
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index 358ccd53a..26c2e5b15 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -55,6 +55,7 @@
   "bored": "Bored Waiting?",
   "alphabet": "Alphabet",
   "downloadPdf": "Download PDF",
+
   "text": "Text",
   "font": "Font",
   "selectFillter": "-- Select --",
@@ -607,6 +608,10 @@
       "desc": "Replace color for text and background in PDF and invert full color of pdf to reduce file size"
     }
   },
+  "landing": {
+    "addFiles": "Add Files",
+    "uploadFromComputer": "Upload from computer"
+  },
   "viewPdf": {
     "tags": "view,read,annotate,text,image,highlight,edit",
     "title": "View/Edit PDF",
@@ -2068,6 +2073,18 @@
       }
     }
   },
+  "rightRail": {
+    "closePdf": "Close PDF",
+    "closeSelected": "Close Selected Files",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "selectByNumber": "Select by Page Numbers",
+    "deleteSelected": "Delete Selected Pages",
+    "toggleTheme": "Toggle Theme",
+    "exportAll": "Export PDF",
+    "downloadSelected": "Download Selected Files",
+    "downloadAll": "Download All"
+  },
   "removePassword": {
     "title": "Remove Password",
     "desc": "Remove password protection from your PDF document.",
diff --git a/frontend/scripts/generate-icons.js b/frontend/scripts/generate-icons.js
new file mode 100644
index 000000000..681b06728
--- /dev/null
+++ b/frontend/scripts/generate-icons.js
@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+
+const { icons } = require('@iconify-json/material-symbols');
+const { getIcons } = require('@iconify/utils');
+const fs = require('fs');
+const path = require('path');
+
+// Check for verbose flag
+const isVerbose = process.argv.includes('--verbose') || process.argv.includes('-v');
+
+// Logging functions
+const info = (message) => console.log(message);
+const debug = (message) => {
+  if (isVerbose) {
+    console.log(message);
+  }
+};
+
+// Function to scan codebase for LocalIcon usage
+function scanForUsedIcons() {
+  const usedIcons = new Set();
+  const srcDir = path.join(__dirname, '..', 'src');
+  
+  info('🔍 Scanning codebase for LocalIcon usage...');
+  
+  if (!fs.existsSync(srcDir)) {
+    console.error('❌ Source directory not found:', srcDir);
+    process.exit(1);
+  }
+  
+  // Recursively scan all .tsx and .ts files
+  function scanDirectory(dir) {
+    const files = fs.readdirSync(dir);
+    
+    files.forEach(file => {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+      
+      if (stat.isDirectory()) {
+        scanDirectory(filePath);
+      } else if (file.endsWith('.tsx') || file.endsWith('.ts')) {
+        const content = fs.readFileSync(filePath, 'utf8');
+        
+        // Match LocalIcon usage: <LocalIcon icon="icon-name" ...>
+        const localIconMatches = content.match(/<LocalIcon\s+[^>]*icon="([^"]+)"/g);
+        if (localIconMatches) {
+          localIconMatches.forEach(match => {
+            const iconMatch = match.match(/icon="([^"]+)"/);
+            if (iconMatch) {
+              usedIcons.add(iconMatch[1]);
+              debug(`  Found: ${iconMatch[1]} in ${path.relative(srcDir, filePath)}`);
+            }
+          });
+        }
+        
+        // Match old material-symbols-rounded spans: <span className="material-symbols-rounded">icon-name</span>
+        const spanMatches = content.match(/<span[^>]*className="[^"]*material-symbols-rounded[^"]*"[^>]*>([^<]+)<\/span>/g);
+        if (spanMatches) {
+          spanMatches.forEach(match => {
+            const iconMatch = match.match(/>([^<]+)<\/span>/);
+            if (iconMatch && iconMatch[1].trim()) {
+              const iconName = iconMatch[1].trim();
+              usedIcons.add(iconName);
+              debug(`  Found (legacy): ${iconName} in ${path.relative(srcDir, filePath)}`);
+            }
+          });
+        }
+        
+        // Match Icon component usage: <Icon icon="material-symbols:icon-name" ...>
+        const iconMatches = content.match(/<Icon\s+[^>]*icon="material-symbols:([^"]+)"/g);
+        if (iconMatches) {
+          iconMatches.forEach(match => {
+            const iconMatch = match.match(/icon="material-symbols:([^"]+)"/);
+            if (iconMatch) {
+              usedIcons.add(iconMatch[1]);
+              debug(`  Found (Icon): ${iconMatch[1]} in ${path.relative(srcDir, filePath)}`);
+            }
+          });
+        }
+      }
+    });
+  }
+  
+  scanDirectory(srcDir);
+  
+  const iconArray = Array.from(usedIcons).sort();
+  info(`📋 Found ${iconArray.length} unique icons across codebase`);
+  
+  return iconArray;
+}
+
+// Auto-detect used icons
+const usedIcons = scanForUsedIcons();
+
+// Check if we need to regenerate (compare with existing)
+const outputPath = path.join(__dirname, '..', 'src', 'assets', 'material-symbols-icons.json');
+let needsRegeneration = true;
+
+if (fs.existsSync(outputPath)) {
+  try {
+    const existingSet = JSON.parse(fs.readFileSync(outputPath, 'utf8'));
+    const existingIcons = Object.keys(existingSet.icons || {}).sort();
+    const currentIcons = [...usedIcons].sort();
+    
+    if (JSON.stringify(existingIcons) === JSON.stringify(currentIcons)) {
+      needsRegeneration = false;
+      info(`✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`);
+    }
+  } catch (error) {
+    // If we can't parse existing file, regenerate
+    needsRegeneration = true;
+  }
+}
+
+if (!needsRegeneration) {
+  info('🎉 No regeneration needed!');
+  process.exit(0);
+}
+
+info(`🔍 Extracting ${usedIcons.length} icons from Material Symbols...`);
+
+// Extract only our used icons from the full set
+const extractedIcons = getIcons(icons, usedIcons);
+
+if (!extractedIcons) {
+  console.error('❌ Failed to extract icons');
+  process.exit(1);
+}
+
+// Check for missing icons
+const extractedIconNames = Object.keys(extractedIcons.icons || {});
+const missingIcons = usedIcons.filter(icon => !extractedIconNames.includes(icon));
+
+if (missingIcons.length > 0) {
+  info(`⚠️  Missing icons (${missingIcons.length}): ${missingIcons.join(', ')}`);
+  info('💡 These icons don\'t exist in Material Symbols. Please use available alternatives.');
+}
+
+// Create output directory
+const outputDir = path.join(__dirname, '..', 'src', 'assets');
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Write the extracted icon set to a file (outputPath already defined above)
+fs.writeFileSync(outputPath, JSON.stringify(extractedIcons, null, 2));
+
+info(`✅ Successfully extracted ${Object.keys(extractedIcons.icons || {}).length} icons`);
+info(`📦 Bundle size: ${Math.round(JSON.stringify(extractedIcons).length / 1024)}KB`);
+info(`💾 Saved to: ${outputPath}`);
+
+// Generate TypeScript types
+const typesContent = `// Auto-generated icon types
+// This file is automatically generated by scripts/generate-icons.js
+// Do not edit manually - changes will be overwritten
+
+export type MaterialSymbolIcon = ${usedIcons.map(icon => `'${icon}'`).join(' | ')};
+
+export interface IconSet {
+  prefix: string;
+  icons: Record<string, any>;
+  width?: number;
+  height?: number;
+}
+
+// Re-export the icon set as the default export with proper typing
+declare const iconSet: IconSet;
+export default iconSet;
+`;
+
+const typesPath = path.join(outputDir, 'material-symbols-icons.d.ts');
+fs.writeFileSync(typesPath, typesContent);
+
+info(`📝 Generated types: ${typesPath}`);
+info(`🎉 Icon extraction complete!`);
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e628dc4de..ef4d663f6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,24 +1,30 @@
-import React, { Suspense } from 'react';
-import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
-import { FileContextProvider } from './contexts/FileContext';
-import { NavigationProvider } from './contexts/NavigationContext';
-import { FilesModalProvider } from './contexts/FilesModalContext';
-import HomePage from './pages/HomePage';
+import React, { Suspense } from "react";
+import { RainbowThemeProvider } from "./components/shared/RainbowThemeProvider";
+import { FileContextProvider } from "./contexts/FileContext";
+import { NavigationProvider } from "./contexts/NavigationContext";
+import { FilesModalProvider } from "./contexts/FilesModalContext";
+import { ToolWorkflowProvider } from "./contexts/ToolWorkflowContext";
+import { SidebarProvider } from "./contexts/SidebarContext";
+import ErrorBoundary from "./components/shared/ErrorBoundary";
+import HomePage from "./pages/HomePage";
 
 // Import global styles
-import './styles/tailwind.css';
-import './index.css';
+import "./styles/tailwind.css";
+import "./index.css";
+import { RightRailProvider } from "./contexts/RightRailContext";
 
 // Loading component for i18next suspense
 const LoadingFallback = () => (
-  <div style={{
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh',
-    fontSize: '18px',
-    color: '#666'
-  }}>
+  <div
+    style={{
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100vh",
+      fontSize: "18px",
+      color: "#666",
+    }}
+  >
     Loading...
   </div>
 );
@@ -27,13 +33,21 @@ export default function App() {
   return (
     <Suspense fallback={<LoadingFallback />}>
       <RainbowThemeProvider>
-        <FileContextProvider enableUrlSync={true} enablePersistence={true}>
-        <NavigationProvider>
-            <FilesModalProvider>
-              <HomePage />
-            </FilesModalProvider>
-        </NavigationProvider>
-        </FileContextProvider>
+        <ErrorBoundary>
+          <FileContextProvider enableUrlSync={true} enablePersistence={true}>
+            <NavigationProvider>
+              <FilesModalProvider>
+                <ToolWorkflowProvider>
+                  <SidebarProvider>
+                    <RightRailProvider>
+                    <HomePage />
+                    </RightRailProvider>
+                  </SidebarProvider>
+                </ToolWorkflowProvider>
+              </FilesModalProvider>
+            </NavigationProvider>
+          </FileContextProvider>
+        </ErrorBoundary>
       </RainbowThemeProvider>
     </Suspense>
   );
diff --git a/frontend/src/assets/3rdPartyLicenses.json b/frontend/src/assets/3rdPartyLicenses.json
index 0235380af..2f19f5db6 100644
--- a/frontend/src/assets/3rdPartyLicenses.json
+++ b/frontend/src/assets/3rdPartyLicenses.json
@@ -21,6 +21,13 @@
             "moduleLicense": "Apache-2.0",
             "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0"
         },
+        {
+            "moduleName": "@atlaskit/pragmatic-drag-and-drop",
+            "moduleUrl": "https://github.com/atlassian/pragmatic-drag-and-drop",
+            "moduleVersion": "1.7.4",
+            "moduleLicense": "Apache-2.0",
+            "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0"
+        },
         {
             "moduleName": "@babel/code-frame",
             "moduleUrl": "https://github.com/babel/babel",
@@ -59,7 +66,7 @@
         {
             "moduleName": "@babel/parser",
             "moduleUrl": "https://github.com/babel/babel",
-            "moduleVersion": "7.27.3",
+            "moduleVersion": "7.28.3",
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
@@ -87,7 +94,7 @@
         {
             "moduleName": "@babel/types",
             "moduleUrl": "https://github.com/babel/babel",
-            "moduleVersion": "7.27.3",
+            "moduleVersion": "7.28.2",
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
@@ -217,6 +224,20 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
+        {
+            "moduleName": "@iconify/react",
+            "moduleUrl": "https://github.com/iconify/iconify",
+            "moduleVersion": "6.0.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
+        {
+            "moduleName": "@iconify/types",
+            "moduleUrl": "https://github.com/iconify/iconify",
+            "moduleVersion": "2.0.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
         {
             "moduleName": "@isaacs/fs-minipass",
             "moduleUrl": "https://github.com/npm/fs-minipass",
@@ -399,6 +420,20 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
+        {
+            "moduleName": "@tanstack/react-virtual",
+            "moduleUrl": "https://github.com/TanStack/virtual",
+            "moduleVersion": "3.13.12",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
+        {
+            "moduleName": "@tanstack/virtual-core",
+            "moduleUrl": "https://github.com/TanStack/virtual",
+            "moduleVersion": "3.13.12",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
         {
             "moduleName": "@testing-library/dom",
             "moduleUrl": "https://github.com/testing-library/dom-testing-library",
@@ -567,6 +602,13 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
+        {
+            "moduleName": "bind-event-listener",
+            "moduleUrl": "https://github.com/alexreardon/bind-event-listener",
+            "moduleVersion": "3.0.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
         {
             "moduleName": "brace-expansion",
             "moduleUrl": "https://github.com/juliangruber/brace-expansion",
@@ -1246,13 +1288,6 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
-        {
-            "moduleName": "material-symbols",
-            "moduleUrl": "https://github.com/marella/material-symbols",
-            "moduleVersion": "0.33.0",
-            "moduleLicense": "Apache-2.0",
-            "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0"
-        },
         {
             "moduleName": "math-intrinsics",
             "moduleUrl": "https://github.com/es-shims/math-intrinsics",
@@ -1494,7 +1529,7 @@
         {
             "moduleName": "postcss",
             "moduleUrl": "https://github.com/postcss/postcss",
-            "moduleVersion": "8.5.3",
+            "moduleVersion": "8.5.6",
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
@@ -1526,6 +1561,13 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
         },
+        {
+            "moduleName": "raf-schd",
+            "moduleUrl": "https://github.com/alexreardon/raf-schd",
+            "moduleVersion": "4.0.3",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://opensource.org/licenses/MIT"
+        },
         {
             "moduleName": "react-dom",
             "moduleUrl": "https://github.com/facebook/react",
diff --git a/frontend/src/components/FileManager.tsx b/frontend/src/components/FileManager.tsx
index 1c327cefa..4294180f3 100644
--- a/frontend/src/components/FileManager.tsx
+++ b/frontend/src/components/FileManager.tsx
@@ -111,7 +111,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
       onClose={closeFilesModal}
       size={isMobile ? "100%" : "auto"}
       centered
-      radius={30}
+      radius="md"
       className="overflow-hidden p-0"
       withCloseButton={false}
       styles={{
@@ -144,7 +144,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
             height: '100%',
             width: '100%',
             border: 'none',
-            borderRadius: '30px',
+            borderRadius: 'var(--radius-md)',
             backgroundColor: 'var(--bg-file-manager)'
           }}
           styles={{
diff --git a/frontend/src/components/fileEditor/FileEditor.tsx b/frontend/src/components/fileEditor/FileEditor.tsx
index c93e78670..df1197ab9 100644
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import {
-  Button, Text, Center, Box, Notification, TextInput, LoadingOverlay, Modal, Alert, Container,
-  Stack, Group
+  Text, Center, Box, Notification, LoadingOverlay, Stack, Group, Portal
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useTranslation } from 'react-i18next';
@@ -466,21 +465,6 @@ const FileEditor = ({
         <LoadingOverlay visible={false} />
 
         <Box p="md" pt="xl">
-          <Group mb="md">
-            {toolMode && (
-              <>
-                <Button onClick={selectAll} variant="light">Select All</Button>
-                <Button onClick={deselectAll} variant="light">Deselect All</Button>
-              </>
-            )}
-            {showBulkActions && !toolMode && (
-              <>
-                <Button onClick={closeAllFiles} variant="light" color="orange">
-                  Close All
-                </Button>
-              </>
-            )}
-          </Group>
 
 
         {activeFileRecords.length === 0 && !zipExtractionProgress.isExtracting ? (
@@ -573,25 +557,29 @@ const FileEditor = ({
       />
 
       {status && (
-        <Notification
-          color="blue"
-          mt="md"
-          onClose={() => setStatus(null)}
-          style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 1000 }}
-        >
-          {status}
-        </Notification>
+        <Portal>
+          <Notification
+            color="blue"
+            mt="md"
+            onClose={() => setStatus(null)}
+            style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 10001 }}
+          >
+            {status}
+          </Notification>
+        </Portal>
       )}
 
       {error && (
-        <Notification
-          color="red"
-          mt="md"
-          onClose={() => setError(null)}
-          style={{ position: 'fixed', bottom: 80, right: 20, zIndex: 1000 }}
-        >
-          {error}
-        </Notification>
+        <Portal>
+          <Notification
+            color="red"
+            mt="md"
+            onClose={() => setError(null)}
+            style={{ position: 'fixed', bottom: 80, right: 20, zIndex: 10001 }}
+          >
+            {error}
+          </Notification>
+        </Portal>
       )}
       </Box>
     </Dropzone>
diff --git a/frontend/src/components/fileManager/FileInfoCard.tsx b/frontend/src/components/fileManager/FileInfoCard.tsx
index f8cc84cb8..68c2a491d 100644
--- a/frontend/src/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/components/fileManager/FileInfoCard.tsx
@@ -17,7 +17,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
 
   return (
     <Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
-      <Box bg="blue.6" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
+      <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
         <Text size="sm" fw={500} ta="center" c="white">
           {t('fileManager.details', 'File Details')}
         </Text>
@@ -31,7 +31,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             </Text>
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
             {currentFile ? (
@@ -43,7 +43,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             )}
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
             <Text size="sm" fw={500}>
@@ -51,7 +51,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             </Text>
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
             <Text size="sm" fw={500}>
@@ -64,4 +64,4 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
   );
 };
 
-export default FileInfoCard;
\ No newline at end of file
+export default FileInfoCard;
diff --git a/frontend/src/components/fileManager/FileSourceButtons.tsx b/frontend/src/components/fileManager/FileSourceButtons.tsx
index a6870a661..d2d28e09e 100644
--- a/frontend/src/components/fileManager/FileSourceButtons.tsx
+++ b/frontend/src/components/fileManager/FileSourceButtons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stack, Text, Button, Group } from '@mantine/core';
 import HistoryIcon from '@mui/icons-material/History';
-import FolderIcon from '@mui/icons-material/Folder';
+import UploadIcon from '@mui/icons-material/Upload';
 import CloudIcon from '@mui/icons-material/Cloud';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
@@ -10,7 +10,7 @@ interface FileSourceButtonsProps {
   horizontal?: boolean;
 }
 
-const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({ 
+const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   horizontal = false
 }) => {
   const { activeSource, onSourceChange, onLocalFileClick } = useFileManagerContext();
@@ -44,11 +44,11 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       >
         {horizontal ? t('fileManager.recent', 'Recent') : t('fileManager.recent', 'Recent')}
       </Button>
-      
+
       <Button
         variant="subtle"
         color='var(--mantine-color-gray-6)'
-        leftSection={<FolderIcon />}
+        leftSection={<UploadIcon />}
         justify={horizontal ? "center" : "flex-start"}
         onClick={onLocalFileClick}
         fullWidth={!horizontal}
@@ -63,9 +63,9 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
           }
         }}
       >
-        {horizontal ? t('fileManager.localFiles', 'Local') : t('fileManager.localFiles', 'Local Files')}
+        {horizontal ? t('fileUpload.uploadFiles', 'Upload') : t('fileUpload.uploadFiles', 'Upload Files')}
       </Button>
-      
+
       <Button
         variant={buttonProps.variant('drive')}
         leftSection={<CloudIcon />}
@@ -100,4 +100,4 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   );
 };
 
-export default FileSourceButtons;
\ No newline at end of file
+export default FileSourceButtons;
diff --git a/frontend/src/components/layout/Workbench.tsx b/frontend/src/components/layout/Workbench.tsx
index 35398eb14..a9e20f13e 100644
--- a/frontend/src/components/layout/Workbench.tsx
+++ b/frontend/src/components/layout/Workbench.tsx
@@ -162,6 +162,7 @@ export default function Workbench() {
         className="flex-1 min-h-0 relative z-10"
         style={{
           transition: 'opacity 0.15s ease-in-out',
+          marginTop: '1rem',
         }}
       >
         {renderMainContent()}
diff --git a/frontend/src/components/pageEditor/BulkSelectionPanel.tsx b/frontend/src/components/pageEditor/BulkSelectionPanel.tsx
index 5a6b4504f..b9ebb8d2c 100644
--- a/frontend/src/components/pageEditor/BulkSelectionPanel.tsx
+++ b/frontend/src/components/pageEditor/BulkSelectionPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Paper, Group, TextInput, Button, Text } from '@mantine/core';
+import { Group, TextInput, Button, Text } from '@mantine/core';
 
 interface BulkSelectionPanelProps {
   csvInput: string;
@@ -15,7 +15,7 @@ const BulkSelectionPanel = ({
   onUpdatePagesFromCSV,
 }: BulkSelectionPanelProps) => {
   return (
-    <Paper p="md" mb="md" withBorder>
+    <>
       <Group>
         <TextInput
           value={csvInput}
@@ -35,7 +35,7 @@ const BulkSelectionPanel = ({
           Selected: {selectedPages.length} pages
         </Text>
       )}
-    </Paper>
+      </>
   );
 };
 
diff --git a/frontend/src/components/pageEditor/FileThumbnail.tsx b/frontend/src/components/pageEditor/FileThumbnail.tsx
index d84eb2a16..609a31e1a 100644
--- a/frontend/src/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/components/pageEditor/FileThumbnail.tsx
@@ -141,7 +141,6 @@ const FileThumbnail = ({
         filter: isSupported ? 'none' : 'grayscale(50%)'
       }}
     >
-      {selectionMode && (
         <div
           className={styles.checkboxContainer}
           data-testid="file-thumbnail-checkbox"
@@ -175,7 +174,6 @@ const FileThumbnail = ({
             size="sm"
           />
         </div>
-      )}
 
       {/* File content area */}
       <div className="file-container w-[90%] h-[80%] relative">
diff --git a/frontend/src/components/pageEditor/PageEditor.tsx b/frontend/src/components/pageEditor/PageEditor.tsx
index f42a16143..6c20a8c3c 100644
--- a/frontend/src/components/pageEditor/PageEditor.tsx
+++ b/frontend/src/components/pageEditor/PageEditor.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import {
-  Button, Text, Center, Checkbox, Box, Tooltip, ActionIcon,
+  Button, Text, Center, Box,
   Notification, TextInput, LoadingOverlay, Modal, Alert,
-  Stack, Group
+  Stack, Group, Portal
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { useFileState, useFileActions, useCurrentFile, useFileSelection } from "../../contexts/FileContext";
@@ -62,20 +62,19 @@ export interface PageEditorProps {
 const PageEditor = ({
   onFunctionsReady,
 }: PageEditorProps) => {
-  const { t } = useTranslation();
 
   // Use split contexts to prevent re-renders
   const { state, selectors } = useFileState();
   const { actions } = useFileActions();
-  
+
   // Prefer IDs + selectors to avoid array identity churn
   const activeFileIds = state.files.ids;
   const primaryFileId = activeFileIds[0] ?? null;
   const selectedFiles = selectors.getSelectedFiles();
-  
+
   // Stable signature for effects (prevents loops)
   const filesSignature = selectors.getFilesSignature();
-  
+
   // UI state
   const globalProcessing = state.ui.isProcessing;
   const processingProgress = state.ui.processingProgress;
@@ -101,20 +100,20 @@ const PageEditor = ({
     setSelectionMode, setSelectedPageNumbers, setMovingPage, setIsAnimating, setSplitPositions, setExportLoading,
     togglePage, toggleSelectAll, animateReorder
   } = usePageEditorState();
-  
+
   // Grid container ref for positioning split indicators
   const gridContainerRef = useRef<HTMLDivElement>(null);
-  
+
   // Undo/Redo state
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  
+
   // Update undo/redo state
   const updateUndoRedoState = useCallback(() => {
     setCanUndo(undoManagerRef.current.canUndo());
     setCanRedo(undoManagerRef.current.canRedo());
   }, []);
-  
+
   // Set up undo manager callback
   useEffect(() => {
     undoManagerRef.current.setStateChangeCallback(updateUndoRedoState);
@@ -143,12 +142,12 @@ const PageEditor = ({
   const createDeleteCommand = useCallback((pageIds: string[]) => ({
     execute: () => {
       if (!displayDocument) return;
-      
+
       const pagesToDelete = pageIds.map(pageId => {
         const page = displayDocument.pages.find(p => p.id === pageId);
         return page?.pageNumber || 0;
       }).filter(num => num > 0);
-      
+
       if (pagesToDelete.length > 0) {
         const deleteCommand = new DeletePagesCommand(
           pagesToDelete,
@@ -181,8 +180,8 @@ const PageEditor = ({
       command.execute();
     }
   }, []);
-  
-  
+
+
   const handleUndo = useCallback(() => {
     undoManagerRef.current.undo();
   }, []);
@@ -200,13 +199,13 @@ const PageEditor = ({
           return page?.id || '';
         }).filter(id => id)
       : displayDocument.pages.map(p => p.id);
-    
+
     handleRotatePages(pagesToRotate, rotation);
   }, [displayDocument, selectedPageNumbers, selectionMode, handleRotatePages]);
 
   const handleDelete = useCallback(() => {
     if (!displayDocument || selectedPageNumbers.length === 0) return;
-    
+
     const deleteCommand = new DeletePagesCommand(
       selectedPageNumbers,
       () => displayDocument,
@@ -221,7 +220,7 @@ const PageEditor = ({
 
   const handleDeletePage = useCallback((pageNumber: number) => {
     if (!displayDocument) return;
-    
+
     const deleteCommand = new DeletePagesCommand(
       [pageNumber],
       () => displayDocument,
@@ -236,9 +235,9 @@ const PageEditor = ({
 
   const handleSplit = useCallback(() => {
     if (!displayDocument || selectedPageNumbers.length === 0) return;
-    
+
     console.log('Toggle split markers at selected page positions:', selectedPageNumbers);
-    
+
     // Convert page numbers to positions (0-based indices)
     const positions: number[] = [];
     selectedPageNumbers.forEach(pageNum => {
@@ -261,7 +260,7 @@ const PageEditor = ({
 
   const handleSplitAll = useCallback(() => {
     if (!displayDocument) return;
-    
+
     const splitAllCommand = new SplitAllCommand(
       displayDocument.pages.length,
       () => splitPositions,
@@ -272,9 +271,9 @@ const PageEditor = ({
 
   const handlePageBreak = useCallback(() => {
     if (!displayDocument || selectedPageNumbers.length === 0) return;
-    
+
     console.log('Insert page breaks after selected pages:', selectedPageNumbers);
-    
+
     const pageBreakCommand = new PageBreakCommand(
       selectedPageNumbers,
       () => displayDocument,
@@ -286,7 +285,7 @@ const PageEditor = ({
 
   const handlePageBreakAll = useCallback(() => {
     if (!displayDocument) return;
-    
+
     const pageBreakAllCommand = new BulkPageBreakCommand(
       () => displayDocument,
       setEditedDocument,
@@ -297,7 +296,7 @@ const PageEditor = ({
 
   const handleReorderPages = useCallback((sourcePageNumber: number, targetIndex: number, selectedPages?: number[]) => {
     if (!displayDocument) return;
-    
+
     const reorderCommand = new ReorderPagesCommand(
       sourcePageNumber,
       targetIndex,
@@ -311,12 +310,12 @@ const PageEditor = ({
   // Helper function to collect source files for multi-file export
   const getSourceFiles = useCallback((): Map<string, File> | null => {
     const sourceFiles = new Map<string, File>();
-    
+
     // Check if we have multiple files by looking at active file IDs
     if (activeFileIds.length <= 1) {
       return null; // Use single-file export method
     }
-    
+
     // Collect all source files
     activeFileIds.forEach(fileId => {
       const file = selectors.getFile(fileId);
@@ -324,7 +323,7 @@ const PageEditor = ({
         sourceFiles.set(fileId, file);
       }
     });
-    
+
     return sourceFiles.size > 0 ? sourceFiles : null;
   }, [activeFileIds, selectors]);
 
@@ -332,7 +331,7 @@ const PageEditor = ({
 
   const onExportSelected = useCallback(async () => {
     if (!displayDocument || selectedPageNumbers.length === 0) return;
-    
+
     setExportLoading(true);
     try {
       // Step 1: Apply DOM changes to document state first
@@ -342,10 +341,10 @@ const PageEditor = ({
         displayDocument, // Current display order (includes reordering)
         splitPositions // Position-based splits
       );
-      
+
       // For selected pages export, we work with the first document (or single document)
       const documentWithDOMState = Array.isArray(processedDocuments) ? processedDocuments[0] : processedDocuments;
-      
+
       // Step 2: Convert selected page numbers to page IDs from the document with DOM state
       const selectedPageIds = selectedPageNumbers.map(pageNum => {
         const page = documentWithDOMState.pages.find(p => p.pageNumber === pageNum);
@@ -354,9 +353,9 @@ const PageEditor = ({
 
       // Step 3: Export with pdfExportService
       console.log('Exporting selected pages:', selectedPageNumbers, 'with DOM rotations applied');
-      
+
       const sourceFiles = getSourceFiles();
-      const result = sourceFiles 
+      const result = sourceFiles
         ? await pdfExportService.exportPDFMultiFile(
             documentWithDOMState,
             sourceFiles,
@@ -371,7 +370,7 @@ const PageEditor = ({
 
       // Step 4: Download the result
       pdfExportService.downloadFile(result.blob, result.filename);
-      
+
       setExportLoading(false);
     } catch (error) {
       console.error('Export failed:', error);
@@ -381,7 +380,7 @@ const PageEditor = ({
 
   const onExportAll = useCallback(async () => {
     if (!displayDocument) return;
-    
+
     setExportLoading(true);
     try {
       // Step 1: Apply DOM changes to document state first
@@ -391,34 +390,34 @@ const PageEditor = ({
         displayDocument, // Current display order (includes reordering)
         splitPositions // Position-based splits
       );
-      
+
       // Step 2: Check if we have multiple documents (splits) or single document
       if (Array.isArray(processedDocuments)) {
         // Multiple documents (splits) - export as ZIP
         console.log('Exporting multiple split documents:', processedDocuments.length);
         const blobs: Blob[] = [];
         const filenames: string[] = [];
-        
+
         const sourceFiles = getSourceFiles();
         for (const doc of processedDocuments) {
-          const result = sourceFiles 
+          const result = sourceFiles
             ? await pdfExportService.exportPDFMultiFile(doc, sourceFiles, [], { filename: doc.name })
             : await pdfExportService.exportPDF(doc, [], { filename: doc.name });
           blobs.push(result.blob);
           filenames.push(result.filename);
         }
-        
+
         // Create ZIP file
         const JSZip = await import('jszip');
         const zip = new JSZip.default();
-        
+
         blobs.forEach((blob, index) => {
           zip.file(filenames[index], blob);
         });
-        
+
         const zipBlob = await zip.generateAsync({ type: 'blob' });
         const zipFilename = displayDocument.name.replace(/\.pdf$/i, '.zip');
-        
+
         pdfExportService.downloadFile(zipBlob, zipFilename);
       } else {
         // Single document - regular export
@@ -439,7 +438,7 @@ const PageEditor = ({
 
         pdfExportService.downloadFile(result.blob, result.filename);
       }
-      
+
       setExportLoading(false);
     } catch (error) {
       console.error('Export failed:', error);
@@ -450,18 +449,18 @@ const PageEditor = ({
   // Apply DOM changes to document state using dedicated service
   const applyChanges = useCallback(() => {
     if (!displayDocument) return;
-    
+
     // Pass current display document (which includes reordering) to get both reordering AND DOM changes
     const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
       mergedPdfDocument || displayDocument, // Original order
       displayDocument, // Current display order (includes reordering)
       splitPositions // Position-based splits
     );
-    
+
     // For apply changes, we only set the first document if it's an array (splits shouldn't affect document state)
     const documentToSet = Array.isArray(processedDocuments) ? processedDocuments[0] : processedDocuments;
     setEditedDocument(documentToSet);
-    
+
     console.log('Changes applied to document');
   }, [displayDocument, mergedPdfDocument, splitPositions]);
 
@@ -473,10 +472,10 @@ const PageEditor = ({
     setSelectionMode(false);
   }, [actions]);
 
-  // Export preview function - defined after export functions to avoid circular dependency  
+  // Export preview function - defined after export functions to avoid circular dependency
   const handleExportPreview = useCallback((selectedOnly: boolean = false) => {
     if (!displayDocument) return;
-    
+
     // For now, trigger the actual export directly
     // In the original, this would show a preview modal first
     if (selectedOnly) {
@@ -514,7 +513,7 @@ const PageEditor = ({
     }
   }, [
     onFunctionsReady, handleUndo, handleRedo, canUndo, canRedo, handleRotate, handleDelete, handleSplit, handleSplitAll,
-    handlePageBreak, handlePageBreakAll, handleExportPreview, onExportSelected, onExportAll, applyChanges, exportLoading, 
+    handlePageBreak, handlePageBreakAll, handleExportPreview, onExportSelected, onExportAll, applyChanges, exportLoading,
     selectionMode, selectedPageNumbers, splitPositions, displayDocument?.pages.length, closePdf
   ]);
 
@@ -552,8 +551,8 @@ const PageEditor = ({
               style={{ minWidth: 300 }}
             />
             <Group>
-              <Button 
-                variant={selectionMode ? "filled" : "outline"} 
+              <Button
+                variant={selectionMode ? "filled" : "outline"}
                 onClick={() => setSelectionMode(!selectionMode)}
               >
                 {selectionMode ? "Exit Selection" : "Select Pages"}
@@ -573,7 +572,7 @@ const PageEditor = ({
 
 
           {/* Split Lines Overlay */}
-          <div 
+          <div
             style={{
               position: 'absolute',
               top: 0,
@@ -590,14 +589,14 @@ const PageEditor = ({
               const ITEM_HEIGHT = 340; // 20rem + gap
               const ITEM_GAP = 24; // 1.5rem
               const ITEMS_PER_ROW = 4; // Default, could be dynamic
-              
+
               const row = Math.floor(position / ITEMS_PER_ROW);
               const col = position % ITEMS_PER_ROW;
-              
+
               // Position after the current item
               const leftPosition = (col + 1) * (ITEM_WIDTH + ITEM_GAP) - ITEM_GAP / 2;
               const topPosition = row * ITEM_HEIGHT + 100; // Offset for header controls
-              
+
               return (
                 <div
                   key={`split-${position}`}
@@ -659,4 +658,4 @@ const PageEditor = ({
   );
 };
 
-export default PageEditor;
\ No newline at end of file
+export default PageEditor;
diff --git a/frontend/src/components/pageEditor/PageEditorControls.tsx b/frontend/src/components/pageEditor/PageEditorControls.tsx
index ca351477a..8855db27b 100644
--- a/frontend/src/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/components/pageEditor/PageEditorControls.tsx
@@ -2,17 +2,16 @@ import React from "react";
 import {
   Tooltip,
   ActionIcon,
-  Paper
 } from "@mantine/core";
 import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
 import ContentCutIcon from "@mui/icons-material/ContentCut";
-import DownloadIcon from "@mui/icons-material/Download";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import DeleteIcon from "@mui/icons-material/Delete";
 import CloseIcon from "@mui/icons-material/Close";
 import InsertPageBreakIcon from "@mui/icons-material/InsertPageBreak";
+import DownloadIcon from "@mui/icons-material/Download";
 
 interface PageEditorControlsProps {
   // Close/Reset functions
@@ -98,9 +97,9 @@ const PageEditorControls = ({
     <div
       style={{
         position: 'absolute',
-        left: '50%',
-        bottom: '20px',
-        transform: 'translateX(-50%)',
+        left: 0,
+        right: 0,
+        bottom: 0,
         zIndex: 50,
         display: 'flex',
         justifyContent: 'center',
@@ -108,34 +107,28 @@ const PageEditorControls = ({
         background: 'transparent',
       }}
     >
-      <Paper
-        radius="xl"
-        shadow="lg"
-        p={16}
+      <div
         style={{
           display: 'flex',
           alignItems: 'center',
           gap: 12,
-          borderRadius: 32,
-          boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+          boxShadow: '0 -2px 8px rgba(0,0,0,0.04)',
+          backgroundColor: 'var(--bg-toolbar)',
+          border: '1px solid var(--border-default)',
+          borderRadius: '16px 16px 0 0',
           pointerEvents: 'auto',
-          minWidth: 400,
-          justifyContent: 'center'
+          minWidth: 420,
+          maxWidth: 700,
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          padding: "1rem",
+          paddingBottom: "2rem"
         }}
       >
-        {/* Close PDF */}
-        <Tooltip label="Close PDF">
-          <ActionIcon
-            onClick={onClosePdf}
-            color="red"
-            variant="light"
-            size="lg"
-          >
-            <CloseIcon />
-          </ActionIcon>
-        </Tooltip>
-
-        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
 
         {/* Undo/Redo */}
         <Tooltip label="Undo">
@@ -210,8 +203,6 @@ const PageEditorControls = ({
           </ActionIcon>
         </Tooltip>
 
-        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
-
         {/* Export Controls */}
         {selectionMode && (
           <Tooltip label="Export Selected">
@@ -237,7 +228,7 @@ const PageEditorControls = ({
             <DownloadIcon />
           </ActionIcon>
         </Tooltip>
-      </Paper>
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/components/pageEditor/PageThumbnail.tsx b/frontend/src/components/pageEditor/PageThumbnail.tsx
index 2cc4e986c..1530531be 100644
--- a/frontend/src/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/components/pageEditor/PageThumbnail.tsx
@@ -290,7 +290,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseLeave}
     >
-      {selectionMode && (
+      {
         <div
           className={styles.checkboxContainer}
           style={{
@@ -323,7 +323,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             style={{ pointerEvents: 'none' }}
           />
         </div>
-      )}
+      }
 
       <div className="page-container w-[90%] h-[90%]" draggable={false}>
         <div
diff --git a/frontend/src/components/shared/ErrorBoundary.tsx b/frontend/src/components/shared/ErrorBoundary.tsx
new file mode 100644
index 000000000..3dfd32d27
--- /dev/null
+++ b/frontend/src/components/shared/ErrorBoundary.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, Button, Stack } from '@mantine/core';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ComponentType<{error?: Error; retry: () => void}>;
+}
+
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  retry = () => {
+    this.setState({ hasError: false, error: undefined });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        const Fallback = this.props.fallback;
+        return <Fallback error={this.state.error} retry={this.retry} />;
+      }
+
+      return (
+        <Stack align="center" justify="center" style={{ minHeight: '200px', padding: '2rem' }}>
+          <Text size="lg" fw={500} c="red">Something went wrong</Text>
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <Text size="sm" c="dimmed" style={{ textAlign: 'center', fontFamily: 'monospace' }}>
+              {this.state.error.message}
+            </Text>
+          )}
+          <Button onClick={this.retry} variant="light">
+            Try Again
+          </Button>
+        </Stack>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/shared/FilePreview.tsx b/frontend/src/components/shared/FilePreview.tsx
index a13894040..06c55ee2d 100644
--- a/frontend/src/components/shared/FilePreview.tsx
+++ b/frontend/src/components/shared/FilePreview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box } from '@mantine/core';
+import { Box, Center } from '@mantine/core';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { FileMetadata } from '../../types/file';
 import DocumentThumbnail from './filePreview/DocumentThumbnail';
 import DocumentStack from './filePreview/DocumentStack';
@@ -38,7 +39,21 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   onPrevious,
   onNext
 }) => {
-  if (!file) return null;
+  if (!file) {
+    return (
+      <Box style={{ width: '100%', height: '100%' }}>
+        <Center style={{ width: '100%', height: '100%' }}>
+          <InsertDriveFileIcon 
+            style={{ 
+              fontSize: '4rem', 
+              color: 'var(--mantine-color-gray-4)',
+              opacity: 0.6 
+            }} 
+          />
+        </Center>
+      </Box>
+    );
+  }
   
   const hasMultipleFiles = totalFiles > 1;
   
diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx
index 6c1668a43..14322076e 100644
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -1,21 +1,28 @@
 import React from 'react';
 import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import AddIcon from '@mui/icons-material/Add';
+import LocalIcon from './LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '../../hooks/useFileHandler';
+import { useFilesModalContext } from '../../contexts/FilesModalContext';
 
 const LandingPage = () => {
   const { addMultipleFiles } = useFileHandler();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const { colorScheme } = useMantineColorScheme();
   const { t } = useTranslation();
+  const { openFilesModal } = useFilesModalContext();
+  const [isUploadHover, setIsUploadHover] = React.useState(false);
 
   const handleFileDrop = async (files: File[]) => {
     await addMultipleFiles(files);
   };
 
-  const handleAddFilesClick = () => {
+  const handleOpenFilesModal = () => {
+    openFilesModal();
+  };
+
+  const handleNativeUploadClick = () => {
     fileInputRef.current?.click();
   };
 
@@ -44,7 +51,7 @@ const LandingPage = () => {
           borderRadius: '0.5rem 0.5rem 0 0',
           filter: 'var(--drop-shadow-filter)',
           backgroundColor: 'var(--landing-paper-bg)',
-          transition: 'background-color 0.2s ease',
+          transition: 'background-color 0.4s ease',
         }}
         activateOnClick={false}
         styles={{
@@ -99,26 +106,73 @@ const LandingPage = () => {
               />
             </Group>
 
-            {/* Add Files Button */}
-            <Button
+            {/* Add Files + Native Upload Buttons */}
+            <div
               style={{
-                backgroundColor: 'var(--landing-button-bg)',
-                color: 'var(--landing-button-color)',
-                border: '1px solid var(--landing-button-border)',
-                borderRadius: '2rem',
-                height: '38px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '0.6rem',
                 width: '80%',
                 marginTop: '0.8rem',
-                marginBottom: '0.8rem',
-
+                marginBottom: '0.8rem'
               }}
-              onClick={handleAddFilesClick}
+              onMouseLeave={() => setIsUploadHover(false)}
             >
-              <AddIcon className="text-[var(--accent-interactive)]" />
-              <span>
-                {t('fileUpload.uploadFiles', 'Upload Files')}
-              </span>
-            </Button>
+              <Button
+                style={{
+                  backgroundColor: 'var(--landing-button-bg)',
+                  color: 'var(--landing-button-color)',
+                  border: '1px solid var(--landing-button-border)',
+                  borderRadius: '2rem',
+                  height: '38px',
+                  paddingLeft: isUploadHover ? 0 : '1rem',
+                  paddingRight: isUploadHover ? 0 : '1rem',
+                  width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
+                  minWidth: isUploadHover ? '58px' : undefined,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'width .5s ease, padding .5s ease'
+                }}
+                onClick={handleOpenFilesModal}
+                onMouseEnter={() => setIsUploadHover(false)}
+              >
+                <LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
+                {!isUploadHover && (
+                  <span>
+                    {t('landing.addFiles', 'Add Files')}
+                  </span>
+                )}
+              </Button>
+              <Button
+                aria-label="Upload"
+                style={{
+                  backgroundColor: 'var(--landing-button-bg)',
+                  color: 'var(--landing-button-color)',
+                  border: '1px solid var(--landing-button-border)',
+                  borderRadius: '1rem',
+                  height: '38px',
+                  width: isUploadHover ? 'calc(100% - 50px)' : '58px',
+                  minWidth: '58px',
+                  paddingLeft: isUploadHover ? '1rem' : 0,
+                  paddingRight: isUploadHover ? '1rem' : 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  transition: 'width .5s ease, padding .5s ease'
+                }}
+                onClick={handleNativeUploadClick}
+                onMouseEnter={() => setIsUploadHover(true)}
+              >
+                <LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
+                {isUploadHover && (
+                  <span style={{ marginLeft: '.5rem' }}>
+                    {t('landing.uploadFromComputer', 'Upload from computer')}
+                  </span>
+                )}
+              </Button>
+            </div>
 
             {/* Hidden file input for native file picker */}
             <input
diff --git a/frontend/src/components/shared/LanguageSelector.tsx b/frontend/src/components/shared/LanguageSelector.tsx
index bd6269b8e..d3a346a8e 100644
--- a/frontend/src/components/shared/LanguageSelector.tsx
+++ b/frontend/src/components/shared/LanguageSelector.tsx
@@ -1,11 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Menu, Button, ScrollArea } from '@mantine/core';
+import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
-import LanguageIcon from '@mui/icons-material/Language';
+import LocalIcon from './LocalIcon';
 import styles from './LanguageSelector.module.css';
 
-const LanguageSelector = () => {
+interface LanguageSelectorProps {
+  position?: React.ComponentProps<typeof Menu>['position'];
+  offset?: number;
+  compact?: boolean; // icon-only trigger
+}
+
+const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = false }: LanguageSelectorProps) => {
   const { i18n } = useTranslation();
   const [opened, setOpened] = useState(false);
   const [animationTriggered, setAnimationTriggered] = useState(false);
@@ -21,26 +27,27 @@ const LanguageSelector = () => {
     }));
 
   const handleLanguageChange = (value: string, event: React.MouseEvent) => {
-    // Create ripple effect at click position
-    const rect = event.currentTarget.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    
-    setRippleEffect({ x, y, key: Date.now() });
-    
+    // Create ripple effect at click position (only for button mode)
+    if (!compact) {
+      const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      setRippleEffect({ x, y, key: Date.now() });
+    }
+
     // Start transition animation
     setIsChanging(true);
     setPendingLanguage(value);
-    
+
     // Simulate processing time for smooth transition
     setTimeout(() => {
       i18n.changeLanguage(value);
-      
+
       setTimeout(() => {
         setIsChanging(false);
         setPendingLanguage(null);
         setOpened(false);
-        
+
         // Clear ripple effect
         setTimeout(() => setRippleEffect(null), 100);
       }, 300);
@@ -64,19 +71,9 @@ const LanguageSelector = () => {
       <style>
         {`
           @keyframes ripple-expand {
-            0% {
-              width: 0;
-              height: 0;
-              opacity: 0.6;
-            }
-            50% {
-              opacity: 0.3;
-            }
-            100% {
-              width: 100px;
-              height: 100px;
-              opacity: 0;
-            }
+            0% { width: 0; height: 0; opacity: 0.6; }
+            50% { opacity: 0.3; }
+            100% { width: 100px; height: 100px; opacity: 0; }
           }
         `}
       </style>
@@ -84,8 +81,8 @@ const LanguageSelector = () => {
         opened={opened} 
         onChange={setOpened}
         width={600}
-        position="bottom-start"
-        offset={8}
+        position={position}
+        offset={offset}
         transitionProps={{
           transition: 'scale-y',
           duration: 200,
@@ -93,29 +90,45 @@ const LanguageSelector = () => {
         }}
       >
       <Menu.Target>
-        <Button
-          variant="subtle"
-          size="sm"
-          leftSection={<LanguageIcon style={{ fontSize: 18 }} />}
-          styles={{
-            root: {
-              border: 'none',
-              color: 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-1))',
-              transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-              '&:hover': {
-                backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
+        {compact ? (
+          <ActionIcon
+            variant="subtle"
+            radius="md"
+            title={currentLanguage}
+            className="right-rail-icon"
+            styles={{
+              root: {
+                color: 'var(--right-rail-icon)',
+                '&:hover': {
+                  backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
+                }
               }
-            },
-            label: {
-              fontSize: '12px',
-              fontWeight: 500,
-            }
-          }}
-        >
-          <span className={styles.languageText}>
-            {currentLanguage}
-          </span>
-        </Button>
+            }}
+          >
+            <LocalIcon icon="language" width="1.5rem" height="1.5rem" />
+          </ActionIcon>
+        ) : (
+          <Button
+            variant="subtle"
+            size="sm"
+            leftSection={<LocalIcon icon="language" width="1.5rem" height="1.5rem" />}
+            styles={{
+              root: {
+                border: 'none',
+                color: 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-1))',
+                transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+                '&:hover': {
+                  backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
+                }
+              },
+              label: { fontSize: '12px', fontWeight: 500 }
+            }}
+          >
+            <span className={styles.languageText}>
+              {currentLanguage}
+            </span>
+          </Button>
+        )}
       </Menu.Target>
 
       <Menu.Dropdown
@@ -181,9 +194,7 @@ const LanguageSelector = () => {
                   }}
                 >
                   {option.label}
-                  
-                  {/* Ripple effect */}
-                  {rippleEffect && pendingLanguage === option.value && (
+                  {!compact && rippleEffect && pendingLanguage === option.value && (
                     <div
                       key={rippleEffect.key}
                       style={{
diff --git a/frontend/src/components/shared/LocalIcon.tsx b/frontend/src/components/shared/LocalIcon.tsx
new file mode 100644
index 000000000..c00ccefec
--- /dev/null
+++ b/frontend/src/components/shared/LocalIcon.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { addCollection, Icon } from '@iconify/react';
+import iconSet from '../../assets/material-symbols-icons.json';
+
+// Load icons synchronously at import time - guaranteed to be ready on first render
+let iconsLoaded = false;
+let localIconCount = 0;
+
+try {
+  if (iconSet) {
+    addCollection(iconSet);
+    iconsLoaded = true;
+    localIconCount = Object.keys(iconSet.icons || {}).length;
+    console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
+  }
+} catch (error) {
+  console.info('ℹ️  Local icons not available - using CDN fallback');
+}
+
+interface LocalIconProps {
+  icon: string;
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+/**
+ * LocalIcon component that uses our locally bundled Material Symbols icons
+ * instead of loading from CDN
+ */
+export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
+  // Convert our icon naming convention to the local collection format
+  const iconName = icon.startsWith('material-symbols:') 
+    ? icon 
+    : `material-symbols:${icon}`;
+  
+  // Development logging (only in dev mode)
+  if (process.env.NODE_ENV === 'development') {
+    const logKey = `icon-${iconName}`;
+    if (!sessionStorage.getItem(logKey)) {
+      const source = iconsLoaded ? 'local' : 'CDN';
+      console.debug(`🎯 Icon: ${iconName} (${source})`);
+      sessionStorage.setItem(logKey, 'logged');
+    }
+  }
+  
+  // Always render the icon - Iconify will use local if available, CDN if not
+  return <Icon icon={iconName} {...props} />;
+};
+
+export default LocalIcon;
\ No newline at end of file
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index bc041a923..c57e49c40 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -1,9 +1,7 @@
 import React, { useState, useRef, forwardRef, useEffect } from "react";
 import { ActionIcon, Stack, Divider } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
-import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
-import SettingsIcon from "@mui/icons-material/SettingsRounded";
-import FolderIcon from "@mui/icons-material/FolderRounded";
+import LocalIcon from './LocalIcon';
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import AppConfigModal from './AppConfigModal';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
@@ -13,9 +11,9 @@ import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
 import ActiveToolButton from "./quickAccessBar/ActiveToolButton";
-import { 
-  isNavButtonActive, 
-  getNavButtonStyle, 
+import {
+  isNavButtonActive,
+  getNavButtonStyle,
   getActiveNavButton,
 } from './quickAccessBar/QuickAccessBar';
 
@@ -39,12 +37,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     openFilesModal();
   };
 
-  
+
   const buttonConfigs: ButtonConfig[] = [
     {
       id: 'read',
       name: t("quickAccess.read", "Read"),
-      icon: <MenuBookIcon sx={{ fontSize: "1.5rem" }} />,
+      icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -54,28 +52,23 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
         handleReaderToggle();
       }
     },
-    {
-      id: 'sign',
-      name: t("quickAccess.sign", "Sign"),
-      icon:
-        <span className="material-symbols-rounded font-size-20">
-          signature
-        </span>,
-      size: 'lg',
-      isRound: false,
-      type: 'navigation',
-      onClick: () => {
-        setActiveButton('sign');
-        handleToolSelect('sign');
-      }
-    },
+    // TODO: Add sign
+    //{
+    //  id: 'sign',
+    //  name: t("quickAccess.sign", "Sign"),
+    //  icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
+    //  size: 'lg',
+    //  isRound: false,
+    //  type: 'navigation',
+    //  onClick: () => {
+    //    setActiveButton('sign');
+    //    handleToolSelect('sign');
+    //  }
+    //},
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
-      icon:
-        <span className="material-symbols-rounded font-size-20">
-          automation
-        </span>,
+      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -87,28 +80,26 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'files',
       name: t("quickAccess.files", "Files"),
-      icon: <FolderIcon sx={{ fontSize: "1.25rem" }} />,
+      icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
       size: 'lg',
       type: 'modal',
       onClick: handleFilesButtonClick
     },
-    {
-      id: 'activity',
-      name: t("quickAccess.activity", "Activity"),
-      icon:
-        <span className="material-symbols-rounded font-size-20">
-          vital_signs
-        </span>,
-      isRound: true,
-      size: 'lg',
-      type: 'navigation',
-      onClick: () => setActiveButton('activity')
-    },
+    //TODO: Activity
+    //{
+    //  id: 'activity',
+    //  name: t("quickAccess.activity", "Activity"),
+    //  icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
+    //  isRound: true,
+    //  size: 'lg',
+    //  type: 'navigation',
+    //  onClick: () => setActiveButton('activity')
+    //},
     {
       id: 'config',
       name: t("quickAccess.config", "Config"),
-      icon: <SettingsIcon sx={{ fontSize: "1rem" }} />,
+      icon: <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
       size: 'lg',
       type: 'modal',
       onClick: () => {
@@ -179,8 +170,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
                   </div>
 
 
-                {/* Add divider after Automate button (index 2) */}
-                {index === 2 && (
+                {/* Add divider after Automate button (index 1) and Files button (index 2) */}
+                {index === 1 && (
                   <Divider
                     size="xs"
                     className="content-divider"
@@ -226,4 +217,4 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
   );
 });
 
-export default QuickAccessBar;
\ No newline at end of file
+export default QuickAccessBar;
diff --git a/frontend/src/components/shared/RightRail.tsx b/frontend/src/components/shared/RightRail.tsx
new file mode 100644
index 000000000..eade0a066
--- /dev/null
+++ b/frontend/src/components/shared/RightRail.tsx
@@ -0,0 +1,377 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { ActionIcon, Divider, Popover } from '@mantine/core';
+import LocalIcon from './LocalIcon';
+import './rightRail/RightRail.css';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { useRightRail } from '../../contexts/RightRailContext';
+import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
+import { useNavigationState } from '../../contexts/NavigationContext';
+import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../shared/LanguageSelector';
+import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
+import { Tooltip } from '../shared/Tooltip';
+import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
+
+export default function RightRail() {
+  const { t } = useTranslation();
+  const { toggleTheme } = useRainbowThemeContext();
+  const { buttons, actions } = useRightRail();
+  const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);
+
+  // Access PageEditor functions for page-editor-specific actions
+  const { pageEditorFunctions } = useToolWorkflow();
+
+  // CSV input state for page selection
+  const [csvInput, setCsvInput] = useState<string>("");
+
+  // Navigation view
+  const { currentMode: currentView } = useNavigationState();
+
+  // File state and selection
+  const { state, selectors } = useFileState();
+  const { selectedFiles, selectedFileIds, selectedPageNumbers, setSelectedFiles, setSelectedPages } = useFileSelection();
+  const { removeFiles } = useFileManagement();
+
+  const activeFiles = selectors.getFiles();
+  const filesSignature = selectors.getFilesSignature();
+  const fileRecords = selectors.getFileRecords();
+
+  // Compute selection state and total items
+  const getSelectionState = useCallback(() => {
+    if (currentView === 'fileEditor' || currentView === 'viewer') {
+      const totalItems = activeFiles.length;
+      const selectedCount = selectedFileIds.length;
+      return { totalItems, selectedCount };
+    }
+
+    if (currentView === 'pageEditor') {
+      let totalItems = 0;
+      fileRecords.forEach(rec => {
+        const pf = rec.processedFile;
+        if (pf) {
+          totalItems += (pf.totalPages as number) || (pf.pages?.length || 0);
+        }
+      });
+      const selectedCount = Array.isArray(selectedPageNumbers) ? selectedPageNumbers.length : 0;
+      return { totalItems, selectedCount };
+    }
+
+    return { totalItems: 0, selectedCount: 0 };
+  }, [currentView, activeFiles, fileRecords, selectedFileIds, selectedPageNumbers]);
+
+  const { totalItems, selectedCount } = getSelectionState();
+
+  const handleSelectAll = useCallback(() => {
+    if (currentView === 'fileEditor' || currentView === 'viewer') {
+      // Select all file IDs
+      const allIds = state.files.ids;
+      setSelectedFiles(allIds);
+      return;
+    }
+
+    if (currentView === 'pageEditor') {
+      let totalPages = 0;
+      fileRecords.forEach(rec => {
+        const pf = rec.processedFile;
+        if (pf) {
+          totalPages += (pf.totalPages as number) || (pf.pages?.length || 0);
+        }
+      });
+
+      if (totalPages > 0) {
+        setSelectedPages(Array.from({ length: totalPages }, (_, i) => i + 1));
+      }
+    }
+  }, [currentView, state.files.ids, fileRecords, setSelectedFiles, setSelectedPages]);
+
+  const handleDeselectAll = useCallback(() => {
+    if (currentView === 'fileEditor' || currentView === 'viewer') {
+      setSelectedFiles([]);
+      return;
+    }
+    if (currentView === 'pageEditor') {
+      setSelectedPages([]);
+    }
+  }, [currentView, setSelectedFiles, setSelectedPages]);
+
+  const handleExportAll = useCallback(() => {
+    if (currentView === 'fileEditor' || currentView === 'viewer') {
+      // Download selected files (or all if none selected)
+      const filesToDownload = selectedFiles.length > 0 ? selectedFiles : activeFiles;
+      
+      filesToDownload.forEach(file => {
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(file);
+        link.download = file.name;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+      });
+    } else if (currentView === 'pageEditor') {
+      // Export all pages (not just selected)
+      pageEditorFunctions?.onExportAll?.();
+    }
+  }, [currentView, activeFiles, selectedFiles, pageEditorFunctions]);
+
+  const handleCloseSelected = useCallback(() => {
+    if (currentView !== 'fileEditor') return;
+    if (selectedFileIds.length === 0) return;
+
+    // Close only selected files (do not delete from storage)
+    removeFiles(selectedFileIds, false);
+
+    // Clear selection after closing
+    setSelectedFiles([]);
+  }, [currentView, selectedFileIds, removeFiles, setSelectedFiles]);
+
+  // CSV parsing functions for page selection
+  const parseCSVInput = useCallback((csv: string) => {
+    const pageNumbers: number[] = [];
+    const ranges = csv.split(',').map(s => s.trim()).filter(Boolean);
+
+    ranges.forEach(range => {
+      if (range.includes('-')) {
+        const [start, end] = range.split('-').map(n => parseInt(n.trim()));
+        for (let i = start; i <= end; i++) {
+          if (i > 0) {
+            pageNumbers.push(i);
+          }
+        }
+      } else {
+        const pageNum = parseInt(range);
+        if (pageNum > 0) {
+          pageNumbers.push(pageNum);
+        }
+      }
+    });
+
+    return pageNumbers;
+  }, []);
+
+  const updatePagesFromCSV = useCallback(() => {
+    const rawPages = parseCSVInput(csvInput);
+    // Determine max page count from processed records
+    const maxPages = fileRecords.reduce((sum, rec) => {
+      const pf = rec.processedFile;
+      if (!pf) return sum;
+      return sum + ((pf.totalPages as number) || (pf.pages?.length || 0));
+    }, 0);
+    const normalized = Array.from(new Set(rawPages.filter(n => Number.isFinite(n) && n > 0 && n <= maxPages))).sort((a,b)=>a-b);
+    setSelectedPages(normalized);
+  }, [csvInput, parseCSVInput, fileRecords, setSelectedPages]);
+
+  // Sync csvInput with selectedPageNumbers changes
+  useEffect(() => {
+    const sortedPageNumbers = Array.isArray(selectedPageNumbers)
+      ? [...selectedPageNumbers].sort((a, b) => a - b)
+      : [];
+    const newCsvInput = sortedPageNumbers.join(', ');
+    setCsvInput(newCsvInput);
+  }, [selectedPageNumbers]);
+
+  // Clear CSV input when files change (use stable signature to avoid ref churn)
+  useEffect(() => {
+    setCsvInput("");
+  }, [filesSignature]);
+
+  // Mount/visibility for page-editor-only buttons to allow exit animation, then remove to avoid flex gap
+  const [pageControlsMounted, setPageControlsMounted] = useState<boolean>(currentView === 'pageEditor');
+  const [pageControlsVisible, setPageControlsVisible] = useState<boolean>(currentView === 'pageEditor');
+
+  useEffect(() => {
+    if (currentView === 'pageEditor') {
+      // Mount and show
+      setPageControlsMounted(true);
+      // Next tick to ensure transition applies
+      requestAnimationFrame(() => setPageControlsVisible(true));
+    } else {
+      // Start exit animation
+      setPageControlsVisible(false);
+      // After transition, unmount to remove flex gap
+      const timer = setTimeout(() => setPageControlsMounted(false), 240);
+      return () => clearTimeout(timer);
+    }
+  }, [currentView]);
+
+  return (
+    <div className="right-rail">
+      <div className="right-rail-inner">
+        {topButtons.length > 0 && (
+          <>
+            <div className="right-rail-section">
+              {topButtons.map(btn => (
+                <Tooltip key={btn.id} content={btn.tooltip} position="left" offset={12} arrow>
+                  <ActionIcon
+                    variant="subtle"
+                    radius="md"
+                    className="right-rail-icon"
+                    onClick={() => actions[btn.id]?.()}
+                    disabled={btn.disabled}
+                  >
+                    {btn.icon}
+                  </ActionIcon>
+                </Tooltip>
+              ))}
+            </div>
+            <Divider className="right-rail-divider" />
+          </>
+        )}
+
+        {/* Group: Selection controls + Close, animate as one unit when entering/leaving viewer */}
+        <div 
+          className={`right-rail-slot ${currentView !== 'viewer' ? 'visible right-rail-enter' : 'right-rail-exit'}`} 
+          aria-hidden={currentView === 'viewer'}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+            {/* Select All Button */}
+            <Tooltip content={t('rightRail.selectAll', 'Select All')} position="left" offset={12} arrow>
+              <div>
+                <ActionIcon
+                  variant="subtle"
+                  radius="md"
+                  className="right-rail-icon"
+                  onClick={handleSelectAll}
+                  disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems}
+                >
+                  <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />
+                </ActionIcon>
+              </div>
+            </Tooltip>
+
+            {/* Deselect All Button */}
+            <Tooltip content={t('rightRail.deselectAll', 'Deselect All')} position="left" offset={12} arrow>
+              <div>
+                <ActionIcon
+                  variant="subtle"
+                  radius="md"
+                  className="right-rail-icon"
+                  onClick={handleDeselectAll}
+                  disabled={currentView === 'viewer' || selectedCount === 0}
+                >
+                  <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />
+                </ActionIcon>
+              </div>
+            </Tooltip>
+
+            {/* Select by Numbers - page editor only, with animated presence */}
+            {pageControlsMounted && (
+                                  <Tooltip content={t('rightRail.selectByNumber', 'Select by Page Numbers')} position="left" offset={12} arrow>
+
+              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
+                <Popover position="left" withArrow shadow="md" offset={8}>
+                  <Popover.Target>
+                      <div style={{ display: 'inline-flex' }}>
+                        <ActionIcon
+                          variant="subtle"
+                          radius="md"
+                          className="right-rail-icon"
+                          disabled={!pageControlsVisible || totalItems === 0}
+                          aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'}
+                        >
+                          <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
+                        </ActionIcon>
+                      </div>
+                  </Popover.Target>
+                  <Popover.Dropdown>
+                    <div style={{ minWidth: 280 }}>
+                      <BulkSelectionPanel
+                        csvInput={csvInput}
+                        setCsvInput={setCsvInput}
+                        selectedPages={Array.isArray(selectedPageNumbers) ? selectedPageNumbers : []}
+                        onUpdatePagesFromCSV={updatePagesFromCSV}
+                      />
+                    </div>
+                  </Popover.Dropdown>
+                </Popover>
+              </div>
+              </Tooltip>
+
+            )}
+
+            {/* Delete Selected Pages - page editor only, with animated presence */}
+            {pageControlsMounted && (
+                              <Tooltip content={t('rightRail.deleteSelected', 'Delete Selected Pages')} position="left" offset={12} arrow>
+
+              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
+                  <div style={{ display: 'inline-flex' }}>
+                    <ActionIcon
+                      variant="subtle"
+                      radius="md"
+                      className="right-rail-icon"
+                      onClick={() => { pageEditorFunctions?.handleDelete?.(); setSelectedPages([]); }}
+                      disabled={!pageControlsVisible || (Array.isArray(selectedPageNumbers) ? selectedPageNumbers.length === 0 : true)}
+                      aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'}
+                    >
+                      <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />
+                    </ActionIcon>
+                  </div>
+              </div>
+              </Tooltip>
+
+            )}
+
+            {/* Close (File Editor: Close Selected | Page Editor: Close PDF) */}
+            <Tooltip content={currentView === 'pageEditor' ? t('rightRail.closePdf', 'Close PDF') : t('rightRail.closeSelected', 'Close Selected Files')} position="left" offset={12} arrow>
+              <div>
+                <ActionIcon
+                  variant="subtle"
+                  radius="md"
+                  className="right-rail-icon"
+                  onClick={currentView === 'pageEditor' ? () => pageEditorFunctions?.closePdf?.() : handleCloseSelected}
+                  disabled={
+                    currentView === 'viewer' ||
+                    (currentView === 'fileEditor' && selectedCount === 0) ||
+                    (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf))
+                  }
+                >
+                  <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />
+                </ActionIcon>
+              </div>
+            </Tooltip>
+          </div>
+
+          <Divider className="right-rail-divider" />
+        </div>
+
+        {/* Theme toggle and Language dropdown */}
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+          <Tooltip content={t('rightRail.toggleTheme', 'Toggle Theme')} position="left" offset={12} arrow>
+            <ActionIcon
+              variant="subtle"
+              radius="md"
+              className="right-rail-icon"
+              onClick={toggleTheme}
+            >
+              <LocalIcon icon="contrast" width="1.5rem" height="1.5rem" />
+            </ActionIcon>
+          </Tooltip>
+
+          <LanguageSelector position="left-start" offset={6} compact />
+
+          <Tooltip content={
+            currentView === 'pageEditor' 
+              ? t('rightRail.exportAll', 'Export PDF') 
+              : (selectedCount > 0 ? t('rightRail.downloadSelected', 'Download Selected Files') : t('rightRail.downloadAll', 'Download All'))
+          } position="left" offset={12} arrow>
+            <div>
+              <ActionIcon 
+                variant="subtle" 
+                radius="md" 
+                className="right-rail-icon"
+                onClick={handleExportAll}
+                disabled={currentView === 'viewer' || totalItems === 0}
+              >
+                <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
+              </ActionIcon>
+            </div>
+          </Tooltip>
+        </div>
+
+        <div className="right-rail-spacer" />
+      </div>
+    </div>
+  );
+}
+
+
diff --git a/frontend/src/components/shared/TextInput.tsx b/frontend/src/components/shared/TextInput.tsx
index e44e8efb2..fc3e99015 100644
--- a/frontend/src/components/shared/TextInput.tsx
+++ b/frontend/src/components/shared/TextInput.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useMantineColorScheme } from '@mantine/core';
+import LocalIcon from './LocalIcon';
 import styles from './textInput/TextInput.module.css';
 
 /**
@@ -96,7 +97,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
           style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
           aria-label="Clear input"
         >
-          <span className="material-symbols-rounded">close</span>
+          <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
         </button>
       )}
     </div>
diff --git a/frontend/src/components/shared/Tooltip.tsx b/frontend/src/components/shared/Tooltip.tsx
index c415eddf5..7940112ca 100644
--- a/frontend/src/components/shared/Tooltip.tsx
+++ b/frontend/src/components/shared/Tooltip.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import LocalIcon from './LocalIcon';
 import { isClickOutside, addEventListenerWithCleanup } from '../../utils/genericUtils';
 import { useTooltipPosition } from '../../hooks/useTooltipPosition';
 import { TooltipTip } from '../../types/tips';
@@ -124,8 +125,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     if (sidebarTooltip) return null;
 
     switch (position) {
-      case 'top': return "tooltip-arrow tooltip-arrow-top";
-      case 'bottom': return "tooltip-arrow tooltip-arrow-bottom";
+      case 'top': return "tooltip-arrow tooltip-arrow-bottom";
+      case 'bottom': return "tooltip-arrow tooltip-arrow-top";
       case 'left': return "tooltip-arrow tooltip-arrow-left";
       case 'right': return "tooltip-arrow tooltip-arrow-right";
       default: return "tooltip-arrow tooltip-arrow-right";
@@ -150,7 +151,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         position: 'fixed',
         top: coords.top,
         left: coords.left,
-        width: (maxWidth !== undefined ? maxWidth : '25rem'),
+        width: (maxWidth !== undefined ? maxWidth : (sidebarTooltip ? '25rem' : undefined)),
         minWidth: minWidth,
         zIndex: 9999,
         visibility: positionReady ? 'visible' : 'hidden',
@@ -171,9 +172,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
           }}
           title="Close tooltip"
         >
-          <span className="material-symbols-rounded">
-            close
-          </span>
+          <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
         </button>
       )}
       {arrow && getArrowClass() && (
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index ee5591694..229c3d362 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -1,23 +1,64 @@
-import React, { useState, useCallback, useMemo } from "react";
-import { Button, SegmentedControl, Loader } from "@mantine/core";
+import React, { useState, useCallback } from "react";
+import { SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
-import LanguageSelector from "./LanguageSelector";
 import rainbowStyles from '../../styles/rainbow.module.css';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
-import { Group } from "@mantine/core";
-import { ModeType } from '../../contexts/NavigationContext';
+import { ModeType, isValidMode } from '../../contexts/NavigationContext';
 
-// Stable view option objects that don't recreate on every render
-const VIEW_OPTIONS_BASE = [
-  { value: "viewer", icon: VisibilityIcon },
-  { value: "pageEditor", icon: EditNoteIcon },
-  { value: "fileEditor", icon: FolderIcon },
-] as const;
+const viewOptionStyle = {
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 6,
+  whiteSpace: 'nowrap',
+  paddingTop: '0.3rem',
+}
+
+
+// Create view options with icons and loading states
+const createViewOptions = (switchingTo: ModeType | null) => [
+  {
+    label: (
+      <div style={viewOptionStyle as React.CSSProperties}>
+        {switchingTo === "viewer" ? (
+          <Loader size="xs" />
+        ) : (
+          <VisibilityIcon fontSize="small" />
+        )}
+        <span>Read</span>
+      </div>
+    ),
+    value: "viewer",
+  },
+  {
+    label: (
+      <div style={viewOptionStyle as React.CSSProperties}>
+        {switchingTo === "pageEditor" ? (
+          <Loader size="xs" />
+        ) : (
+          <EditNoteIcon fontSize="small" />
+        )}
+        <span>Page Editor</span>
+      </div>
+    ),
+    value: "pageEditor",
+  },
+  {
+    label: (
+      <div style={viewOptionStyle as React.CSSProperties}>
+        {switchingTo === "fileEditor" ? (
+          <Loader size="xs" />
+        ) : (
+          <FolderIcon fontSize="small" />
+        )}
+        <span>File Manager</span>
+      </div>
+    ),
+    value: "fileEditor",
+  },
+];
 
 interface TopControlsProps {
   currentView: ModeType;
@@ -30,90 +71,60 @@ const TopControls = ({
   setCurrentView,
   selectedToolKey,
 }: TopControlsProps) => {
-  const { themeMode, isRainbowMode, isToggleDisabled, toggleTheme } = useRainbowThemeContext();
-  const [switchingTo, setSwitchingTo] = useState<string | null>(null);
+  const { isRainbowMode } = useRainbowThemeContext();
+  const [switchingTo, setSwitchingTo] = useState<ModeType | null>(null);
 
   const isToolSelected = selectedToolKey !== null;
 
   const handleViewChange = useCallback((view: string) => {
-    // Guard against redundant changes
-    if (view === currentView) return;
-    
+    if (!isValidMode(view)) {
+      // Ignore invalid values defensively
+      return;
+    }
+    const mode = view as ModeType;
+
     // Show immediate feedback
-    setSwitchingTo(view);
+    setSwitchingTo(mode as ModeType);
 
     // Defer the heavy view change to next frame so spinner can render
     requestAnimationFrame(() => {
       // Give the spinner one more frame to show
       requestAnimationFrame(() => {
-        setCurrentView(view as ModeType);
-        
+        setCurrentView(mode as ModeType);
+
         // Clear the loading state after view change completes
         setTimeout(() => setSwitchingTo(null), 300);
       });
     });
-  }, [setCurrentView, currentView]);
-
-  // Memoize the SegmentedControl data with stable references
-  const viewOptions = useMemo(() => 
-    VIEW_OPTIONS_BASE.map(option => ({
-      value: option.value,
-      label: (
-        <Group gap={option.value === "viewer" ? 5 : 4}>
-          {switchingTo === option.value ? (
-            <Loader size="xs" />
-          ) : (
-            <option.icon fontSize="small" />
-          )}
-        </Group>
-      )
-    })), [switchingTo]);
-
-  const getThemeIcon = () => {
-    if (isRainbowMode) return <AutoAwesomeIcon className={rainbowStyles.rainbowText} />;
-    if (themeMode === "dark") return <LightModeIcon />;
-    return <DarkModeIcon />;
-  };
+  }, [setCurrentView]);
 
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
-      <div className={`absolute left-4 pointer-events-auto flex gap-2 items-center ${
-        isToolSelected ? 'top-4' : 'top-1/2 -translate-y-1/2'
-      }`}>
-        <Button
-          onClick={toggleTheme}
-          variant="subtle"
-          size="md"
-          aria-label="Toggle theme"
-          disabled={isToggleDisabled}
-          className={isRainbowMode ? rainbowStyles.rainbowButton : ''}
-          title={
-            isToggleDisabled
-              ? "Button disabled for 3 seconds..."
-              : isRainbowMode
-                ? "Rainbow Mode Active! Click to exit"
-                : "Toggle theme (click rapidly 6 times for a surprise!)"
-          }
-          style={isToggleDisabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
-        >
-          {getThemeIcon()}
-        </Button>
-        <LanguageSelector />
-      </div>
       {!isToolSelected && (
-        <div className="flex justify-center items-center h-full pointer-events-auto">
+        <div className="flex justify-center mt-[0.5rem]">
             <SegmentedControl
-              data={viewOptions}
+              data={createViewOptions(switchingTo)}
               value={currentView}
               onChange={handleViewChange}
               color="blue"
               radius="xl"
-              size="md"
               fullWidth
               className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
               style={{
                 transition: 'all 0.2s ease',
                 opacity: switchingTo ? 0.8 : 1,
+                pointerEvents: 'auto'
+              }}
+              styles={{
+                root: {
+                  borderRadius: 9999,
+                },
+                control: {
+                  borderRadius: 9999,
+                },
+                indicator: {
+                  borderRadius: 9999,
+                },
               }}
             />
         </div>
diff --git a/frontend/src/components/shared/rightRail/RightRail.README.md b/frontend/src/components/shared/rightRail/RightRail.README.md
new file mode 100644
index 000000000..7506e927c
--- /dev/null
+++ b/frontend/src/components/shared/rightRail/RightRail.README.md
@@ -0,0 +1,108 @@
+# RightRail Component
+
+A dynamic vertical toolbar on the right side of the application that supports both static buttons (Undo/Redo, Save, Print, Share) and dynamic buttons registered by tools.
+
+## Structure
+
+- **Top Section**: Dynamic buttons from tools (empty when none)
+- **Middle Section**: Grid, Cut, Undo, Redo
+- **Bottom Section**: Save, Print, Share
+
+## Usage
+
+### For Tools (Recommended)
+
+```tsx
+import { useRightRailButtons } from '../hooks/useRightRailButtons';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+
+function MyTool() {
+  const handleAction = useCallback(() => {
+    // Your action here
+  }, []);
+
+  useRightRailButtons([
+    {
+      id: 'my-action',
+      icon: <PlayArrowIcon />,
+      tooltip: 'Execute Action',
+      onClick: handleAction,
+    },
+  ]);
+
+  return <div>My Tool</div>;
+}
+```
+
+### Multiple Buttons
+
+```tsx
+useRightRailButtons([
+  {
+    id: 'primary',
+    icon: <StarIcon />,
+    tooltip: 'Primary Action',
+    order: 1,
+    onClick: handlePrimary,
+  },
+  {
+    id: 'secondary',
+    icon: <SettingsIcon />,
+    tooltip: 'Secondary Action',
+    order: 2,
+    onClick: handleSecondary,
+  },
+]);
+```
+
+### Conditional Buttons
+
+```tsx
+useRightRailButtons([
+  // Always show
+  {
+    id: 'process',
+    icon: <PlayArrowIcon />,
+    tooltip: 'Process',
+    disabled: isProcessing,
+    onClick: handleProcess,
+  },
+  // Only show when condition met
+  ...(hasResults ? [{
+    id: 'export',
+    icon: <DownloadIcon />,
+    tooltip: 'Export',
+    onClick: handleExport,
+  }] : []),
+]);
+```
+
+## API
+
+### Button Config
+
+```typescript
+interface RightRailButtonWithAction {
+  id: string;                    // Unique identifier
+  icon: React.ReactNode;         // Icon component
+  tooltip: string;               // Hover tooltip
+  section?: 'top' | 'middle' | 'bottom'; // Section (default: 'top')
+  order?: number;                // Sort order (default: 0)
+  disabled?: boolean;            // Disabled state (default: false)
+  visible?: boolean;             // Visibility (default: true)
+  onClick: () => void;           // Click handler
+}
+```
+
+## Built-in Features
+
+- **Undo/Redo**: Automatically integrates with Page Editor
+- **Theme Support**: Light/dark mode with CSS variables
+- **Auto Cleanup**: Buttons unregister when tool unmounts
+
+## Best Practices
+
+- Use descriptive IDs: `'compress-optimize'`, `'ocr-process'`
+- Choose appropriate Material-UI icons
+- Keep tooltips concise: `'Compress PDF'`, `'Process with OCR'`
+- Use `useCallback` for click handlers to prevent re-registration
diff --git a/frontend/src/components/shared/rightRail/RightRail.css b/frontend/src/components/shared/rightRail/RightRail.css
new file mode 100644
index 000000000..8d01052a9
--- /dev/null
+++ b/frontend/src/components/shared/rightRail/RightRail.css
@@ -0,0 +1,127 @@
+.right-rail {
+  background-color: var(--right-rail-bg);
+  width: 3.5rem;
+  min-width: 3.5rem;
+  max-width: 3.5rem;
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  border-left: 1px solid var(--border-subtle);
+}
+
+.right-rail-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 0.5rem;
+}
+
+.right-rail-section {
+  background-color: var(--right-rail-foreground);
+  border-radius: 12px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.right-rail-divider {
+  width: 2.75rem;
+  border: none;
+  border-top: 1px solid var(--tool-subcategory-rule-color);
+  margin: 0.25rem 0;
+}
+
+.right-rail-icon {
+  color: var(--right-rail-icon);
+}
+
+.right-rail-icon[aria-disabled="true"],
+.right-rail-icon[disabled] {
+  color: var(--right-rail-icon-disabled) !important;
+  background-color: transparent !important;
+}
+
+.right-rail-spacer {
+  flex: 1;
+}
+
+/* Animated grow-down slot for buttons (mirrors current-tool-slot behavior) */
+.right-rail-slot {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 450ms ease-out, opacity 300ms ease-out;
+}
+
+.right-rail-enter {
+  animation: rightRailGrowDown 450ms ease-out;
+}
+
+.right-rail-exit {
+  animation: rightRailShrinkUp 450ms ease-out;
+}
+
+.right-rail-slot.visible {
+  max-height: 18rem; /* increased to fit additional controls + divider */
+  opacity: 1;
+}
+
+@keyframes rightRailGrowDown {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 18rem;
+    opacity: 1;
+  }
+}
+
+@keyframes rightRailShrinkUp {
+  0% {
+    max-height: 18rem;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+/* Remove bottom margin from close icon */
+.right-rail-slot .right-rail-icon {
+  margin-bottom: 0;
+}
+
+/* Inline appear/disappear animation for page-number selector button */
+.right-rail-fade {
+  transition-property: opacity, transform, max-height, visibility;
+  transition-duration: 220ms, 220ms, 220ms, 0s;
+  transition-timing-function: ease, ease, ease, linear;
+  transition-delay: 0s, 0s, 0s, 0s;
+  transform-origin: top center;
+  overflow: hidden;
+}
+
+.right-rail-fade.enter {
+  opacity: 1;
+  transform: scale(1);
+  max-height: 3rem;
+  visibility: visible;
+}
+
+.right-rail-fade.exit {
+  opacity: 0;
+  transform: scale(0.85);
+  max-height: 0;
+  visibility: hidden;
+  /* delay visibility change so opacity/max-height can finish */
+  transition-delay: 0s, 0s, 0s, 220ms;
+  pointer-events: none;
+}
+
diff --git a/frontend/src/components/shared/tooltip/Tooltip.module.css b/frontend/src/components/shared/tooltip/Tooltip.module.css
index 46902c04b..50c242812 100644
--- a/frontend/src/components/shared/tooltip/Tooltip.module.css
+++ b/frontend/src/components/shared/tooltip/Tooltip.module.css
@@ -160,7 +160,7 @@
 .tooltip-arrow-top {
   top: -0.25rem;
   left: 50%;
-  transform: translateX(-50%) rotate(45deg);
+  transform: translateX(-50%) rotate(-135deg);
   border-top: none;
   border-left: none;
 }
diff --git a/frontend/src/components/tools/SearchResults.tsx b/frontend/src/components/tools/SearchResults.tsx
index 949bd2f64..6ecb64b7e 100644
--- a/frontend/src/components/tools/SearchResults.tsx
+++ b/frontend/src/components/tools/SearchResults.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Stack, Text } from '@mantine/core';
-import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { getSubcategoryLabel, ToolRegistryEntry } from '../../data/toolsTaxonomy';
 import ToolButton from './toolPicker/ToolButton';
 import { useTranslation } from 'react-i18next';
 import { useToolSections } from '../../hooks/useToolSections';
@@ -23,8 +23,8 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
   return (
     <Stack p="sm" gap="xs">
       {searchGroups.map(group => (
-        <Box key={group.subcategory} w="100%">
-          <SubcategoryHeader label={t(`toolPicker.subcategories.${group.subcategory}`, group.subcategory)} />
+        <Box key={group.subcategoryId} w="100%">
+          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
           <Stack gap="xs">
             {group.tools.map(({ id, tool }) => (
               <ToolButton
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index 9dec8f45a..9a46c8a3e 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -1,12 +1,11 @@
 import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
-import { Box, Text, Stack } from "@mantine/core";
+import { Box, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
-import ToolButton from "./toolPicker/ToolButton";
 import "./toolPicker/ToolPicker.css";
 import { useToolSections } from "../../hooks/useToolSections";
-import SubcategoryHeader from "./shared/SubcategoryHeader";
 import NoToolsFound from "./shared/NoToolsFound";
+import { renderToolButtons } from "./shared/renderToolButtons";
 
 interface ToolPickerProps {
   selectedToolKey: string | null;
@@ -15,31 +14,6 @@ interface ToolPickerProps {
   isSearching?: boolean;
 }
 
-// Helper function to render tool buttons for a subcategory
-const renderToolButtons = (
-  subcategory: any,
-  selectedToolKey: string | null,
-  onSelect: (id: string) => void,
-  showSubcategoryHeader: boolean = true
-) => (
-  <Box key={subcategory.subcategory} w="100%">
-    {showSubcategoryHeader && (
-      <SubcategoryHeader label={subcategory.subcategory} />
-    )}
-    <Stack gap="xs">
-      {subcategory.tools.map(({ id, tool }: { id: string; tool: any }) => (
-        <ToolButton
-          key={id}
-          id={id}
-          tool={tool}
-          isSelected={selectedToolKey === id}
-          onSelect={onSelect}
-        />
-      ))}
-    </Stack>
-  </Box>
-);
-
 const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = false }: ToolPickerProps) => {
   const { t } = useTranslation();
   const [quickHeaderHeight, setQuickHeaderHeight] = useState(0);
@@ -51,29 +25,49 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const allToolsRef = useRef<HTMLDivElement>(null);
 
-  // On resize adjust headers height to offset height
+  // Keep header heights in sync with any dynamic size changes
   useLayoutEffect(() => {
     const update = () => {
       if (quickHeaderRef.current) {
-        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight);
+        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
       }
       if (allHeaderRef.current) {
-        setAllHeaderHeight(allHeaderRef.current.offsetHeight);
+        setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
       }
     };
+
     update();
+
+    // Update on window resize
     window.addEventListener("resize", update);
-    return () => window.removeEventListener("resize", update);
+
+    // Update on element resize (e.g., font load, badge count change, zoom)
+    const observers: ResizeObserver[] = [];
+    if (typeof ResizeObserver !== "undefined") {
+      const observe = (el: HTMLDivElement | null, cb: () => void) => {
+        if (!el) return;
+        const ro = new ResizeObserver(() => cb());
+        ro.observe(el);
+        observers.push(ro);
+      };
+      observe(quickHeaderRef.current, update);
+      observe(allHeaderRef.current, update);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+      observers.forEach(o => o.disconnect());
+    };
   }, []);
 
   const { sections: visibleSections } = useToolSections(filteredTools);
 
   const quickSection = useMemo(
-    () => visibleSections.find(s => (s as any).key === 'quick'),
+    () => visibleSections.find(s => s.key === 'quick'),
     [visibleSections]
   );
   const allSection = useMemo(
-    () => visibleSections.find(s => (s as any).key === 'all'),
+    () => visibleSections.find(s => s.key === 'all'),
     [visibleSections]
   );
 
@@ -111,7 +105,8 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
           overflowY: "auto",
           overflowX: "hidden",
           minHeight: 0,
-          height: "100%"
+          height: "100%",
+          marginTop: -2
         }}
         className="tool-picker-scrollable"
       >
@@ -120,7 +115,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
             {searchGroups.length === 0 ? (
               <NoToolsFound />
             ) : (
-              searchGroups.map(group => renderToolButtons(group, selectedToolKey, onSelect))
+              searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect))
             )}
           </Stack>
         ) : (
@@ -135,7 +130,6 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 zIndex: 2,
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
-                marginBottom: -1,
                 padding: "0.5rem 1rem",
                 fontWeight: 700,
                 background: "var(--tool-header-bg)",
@@ -143,7 +137,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 cursor: "pointer",
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "space-between"
+                justifyContent: "space-between",
               }}
               onClick={() => scrollTo(quickAccessRef)}
             >
@@ -164,8 +158,8 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
             <Box ref={quickAccessRef} w="100%">
               <Stack p="sm" gap="xs">
-                {quickSection?.subcategories.map(sc => 
-                  renderToolButtons(sc, selectedToolKey, onSelect, false)
+                {quickSection?.subcategories.map(sc =>
+                  renderToolButtons(t, sc, selectedToolKey, onSelect, false)
                 )}
               </Stack>
             </Box>
@@ -178,7 +172,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               ref={allHeaderRef}
               style={{
                 position: "sticky",
-                top: quickSection ? quickHeaderHeight - 1: 0,
+                top: quickSection ? quickHeaderHeight -1 : 0,
                 zIndex: 2,
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
@@ -210,8 +204,8 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
             <Box ref={allToolsRef} w="100%">
               <Stack p="sm" gap="xs">
-                {allSection?.subcategories.map(sc => 
-                  renderToolButtons(sc, selectedToolKey, onSelect, true)
+                {allSection?.subcategories.map(sc =>
+                  renderToolButtons(t, sc, selectedToolKey, onSelect, true)
                 )}
               </Stack>
             </Box>
diff --git a/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx b/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
new file mode 100644
index 000000000..59ed48e95
--- /dev/null
+++ b/frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
@@ -0,0 +1,70 @@
+/**
+ * AddWatermarkSingleStepSettings - Used for automation only
+ * 
+ * This component combines all watermark settings into a single step interface
+ * for use in the automation system. It includes type selection and all relevant
+ * settings in one unified component.
+ */
+
+import React from "react";
+import { Stack } from "@mantine/core";
+import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
+import WatermarkTypeSettings from "./WatermarkTypeSettings";
+import WatermarkWording from "./WatermarkWording";
+import WatermarkTextStyle from "./WatermarkTextStyle";
+import WatermarkImageFile from "./WatermarkImageFile";
+import WatermarkFormatting from "./WatermarkFormatting";
+
+interface AddWatermarkSingleStepSettingsProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddWatermarkSingleStepSettings = ({ parameters, onParameterChange, disabled = false }: AddWatermarkSingleStepSettingsProps) => {
+  return (
+    <Stack gap="lg">
+      {/* Watermark Type Selection */}
+      <WatermarkTypeSettings
+        watermarkType={parameters.watermarkType}
+        onWatermarkTypeChange={(type) => onParameterChange("watermarkType", type)}
+        disabled={disabled}
+      />
+
+      {/* Conditional settings based on watermark type */}
+      {parameters.watermarkType === "text" && (
+        <>
+          <WatermarkWording
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+          <WatermarkTextStyle
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+      {parameters.watermarkType === "image" && (
+        <WatermarkImageFile
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      )}
+
+      {/* Formatting settings for both text and image */}
+      {parameters.watermarkType && (
+        <WatermarkFormatting
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default AddWatermarkSingleStepSettings;
\ No newline at end of file
diff --git a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
index 9a267f638..b6af3365c 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx
@@ -6,7 +6,7 @@ import NumberInputWithUnit from "../shared/NumberInputWithUnit";
 
 interface WatermarkFormattingProps {
   parameters: AddWatermarkParameters;
-  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
   disabled?: boolean;
 }
 
diff --git a/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx b/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
index 6f38ae206..85e723ccb 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx
@@ -6,7 +6,7 @@ import FileUploadButton from "../../shared/FileUploadButton";
 
 interface WatermarkImageFileProps {
   parameters: AddWatermarkParameters;
-  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
   disabled?: boolean;
 }
 
@@ -17,7 +17,7 @@ const WatermarkImageFile = ({ parameters, onParameterChange, disabled = false }:
     <Stack gap="sm">
       <FileUploadButton
         file={parameters.watermarkImage}
-        onChange={(file) => onParameterChange('watermarkImage', file)}
+        onChange={(file) => onParameterChange('watermarkImage', file || undefined)}
         accept="image/*"
         disabled={disabled}
         placeholder={t('watermark.settings.image.choose', 'Choose Image')}
diff --git a/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx b/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
index 2de9335b0..f3c6751cf 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx
@@ -5,7 +5,7 @@ import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAdd
 
 interface WatermarkStyleSettingsProps {
   parameters: AddWatermarkParameters;
-  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
   disabled?: boolean;
 }
 
@@ -19,7 +19,7 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
         <Text size="sm" fw={500}>{t('watermark.settings.rotation', 'Rotation (degrees)')}</Text>
         <NumberInput
           value={parameters.rotation}
-          onChange={(value) => onParameterChange('rotation', value || 0)}
+          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : (parseInt(value as string, 10) || 0))}
           min={-360}
           max={360}
           disabled={disabled}
@@ -28,7 +28,7 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
         <Text size="sm" fw={500}>{t('watermark.settings.opacity', 'Opacity (%)')}</Text>
         <NumberInput
           value={parameters.opacity}
-          onChange={(value) => onParameterChange('opacity', value || 50)}
+          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
           min={0}
           max={100}
           disabled={disabled}
@@ -40,7 +40,7 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
         <Text size="sm" fw={500}>{t('watermark.settings.spacing.width', 'Width Spacing')}</Text>
         <NumberInput
           value={parameters.widthSpacer}
-          onChange={(value) => onParameterChange('widthSpacer', value || 50)}
+          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
           min={0}
           max={200}
           disabled={disabled}
@@ -49,7 +49,7 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
         <Text size="sm" fw={500}>{t('watermark.settings.spacing.height', 'Height Spacing')}</Text>
         <NumberInput
           value={parameters.heightSpacer}
-          onChange={(value) => onParameterChange('heightSpacer', value || 50)}
+          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
           min={0}
           max={200}
           disabled={disabled}
diff --git a/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx b/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
index 00fd21d09..91217f76b 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx
@@ -6,7 +6,7 @@ import { alphabetOptions } from "../../../constants/addWatermarkConstants";
 
 interface WatermarkTextStyleProps {
   parameters: AddWatermarkParameters;
-  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
   disabled?: boolean;
 }
 
diff --git a/frontend/src/components/tools/addWatermark/WatermarkWording.tsx b/frontend/src/components/tools/addWatermark/WatermarkWording.tsx
index 621a0f399..5278ca332 100644
--- a/frontend/src/components/tools/addWatermark/WatermarkWording.tsx
+++ b/frontend/src/components/tools/addWatermark/WatermarkWording.tsx
@@ -6,7 +6,7 @@ import { removeEmojis } from "../../../utils/textUtils";
 
 interface WatermarkWordingProps {
   parameters: AddWatermarkParameters;
-  onParameterChange: (key: keyof AddWatermarkParameters, value: any) => void;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
   disabled?: boolean;
 }
 
diff --git a/frontend/src/components/tools/automate/AutomationCreation.tsx b/frontend/src/components/tools/automate/AutomationCreation.tsx
new file mode 100644
index 000000000..49b12c396
--- /dev/null
+++ b/frontend/src/components/tools/automate/AutomationCreation.tsx
@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Text,
+  Stack,
+  Group,
+  TextInput,
+  Divider,
+  Modal
+} from '@mantine/core';
+import CheckIcon from '@mui/icons-material/Check';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import ToolConfigurationModal from './ToolConfigurationModal';
+import ToolList from './ToolList';
+import { AutomationConfig, AutomationMode, AutomationTool } from '../../../types/automation';
+import { useAutomationForm } from '../../../hooks/tools/automate/useAutomationForm';
+
+
+interface AutomationCreationProps {
+  mode: AutomationMode;
+  existingAutomation?: AutomationConfig;
+  onBack: () => void;
+  onComplete: (automation: AutomationConfig) => void;
+  toolRegistry: Record<string, ToolRegistryEntry>;
+}
+
+export default function AutomationCreation({ mode, existingAutomation, onBack, onComplete, toolRegistry }: AutomationCreationProps) {
+  const { t } = useTranslation();
+
+  const {
+    automationName,
+    setAutomationName,
+    selectedTools,
+    addTool,
+    removeTool,
+    updateTool,
+    hasUnsavedChanges,
+    canSaveAutomation,
+    getToolName,
+    getToolDefaultParameters
+  } = useAutomationForm({ mode, existingAutomation, toolRegistry });
+
+  const [configModalOpen, setConfigModalOpen] = useState(false);
+  const [configuraingToolIndex, setConfiguringToolIndex] = useState(-1);
+  const [unsavedWarningOpen, setUnsavedWarningOpen] = useState(false);
+
+
+  const configureTool = (index: number) => {
+    setConfiguringToolIndex(index);
+    setConfigModalOpen(true);
+  };
+
+  const handleToolConfigSave = (parameters: Record<string, any>) => {
+    if (configuraingToolIndex >= 0) {
+      updateTool(configuraingToolIndex, {
+        configured: true,
+        parameters
+      });
+    }
+    setConfigModalOpen(false);
+    setConfiguringToolIndex(-1);
+  };
+
+  const handleToolConfigCancel = () => {
+    setConfigModalOpen(false);
+    setConfiguringToolIndex(-1);
+  };
+
+  const handleToolAdd = () => {
+    const newTool: AutomationTool = {
+      id: `tool-${Date.now()}`,
+      operation: '',
+      name: t('automate.creation.tools.selectTool', 'Select a tool...'),
+      configured: false,
+      parameters: {}
+    };
+    updateTool(selectedTools.length, newTool);
+  };
+
+  const handleBackClick = () => {
+    if (hasUnsavedChanges()) {
+      setUnsavedWarningOpen(true);
+    } else {
+      onBack();
+    }
+  };
+
+  const handleConfirmBack = () => {
+    setUnsavedWarningOpen(false);
+    onBack();
+  };
+
+  const handleCancelBack = () => {
+    setUnsavedWarningOpen(false);
+  };
+
+  const saveAutomation = async () => {
+    if (!canSaveAutomation()) return;
+
+    const automation = {
+      name: automationName.trim(),
+      description: '',
+      operations: selectedTools.map(tool => ({
+        operation: tool.operation,
+        parameters: tool.parameters || {}
+      }))
+    };
+
+    try {
+      const { automationStorage } = await import('../../../services/automationStorage');
+      const savedAutomation = await automationStorage.saveAutomation(automation);
+      onComplete(savedAutomation);
+    } catch (error) {
+      console.error('Error saving automation:', error);
+    }
+  };
+
+  const currentConfigTool = configuraingToolIndex >= 0 ? selectedTools[configuraingToolIndex] : null;
+
+  return (
+    <div>
+        <Text size="sm" mb="md" p="md"  style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
+        {t("automate.creation.description", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
+        </Text>
+      <Divider mb="md" />
+
+      <Stack gap="md">
+        {/* Automation Name */}
+        <TextInput
+          placeholder={t('automate.creation.name.placeholder', 'Automation name')}
+          value={automationName}
+          onChange={(e) => setAutomationName(e.currentTarget.value)}
+          size="sm"
+        />
+
+
+        {/* Selected Tools List */}
+        {selectedTools.length > 0 && (
+          <ToolList
+            tools={selectedTools}
+            toolRegistry={toolRegistry}
+            onToolUpdate={updateTool}
+            onToolRemove={removeTool}
+            onToolConfigure={configureTool}
+            onToolAdd={handleToolAdd}
+            getToolName={getToolName}
+            getToolDefaultParameters={getToolDefaultParameters}
+          />
+        )}
+
+        <Divider />
+
+        {/* Save Button */}
+        <Button
+          leftSection={<CheckIcon />}
+          onClick={saveAutomation}
+          disabled={!canSaveAutomation()}
+          fullWidth
+        >
+          {t('automate.creation.save', 'Save Automation')}
+        </Button>
+      </Stack>
+
+      {/* Tool Configuration Modal */}
+      {currentConfigTool && (
+        <ToolConfigurationModal
+          opened={configModalOpen}
+          tool={currentConfigTool}
+          onSave={handleToolConfigSave}
+          onCancel={handleToolConfigCancel}
+          toolRegistry={toolRegistry}
+        />
+      )}
+
+      {/* Unsaved Changes Warning Modal */}
+      <Modal
+        opened={unsavedWarningOpen}
+        onClose={handleCancelBack}
+        title={t('automate.creation.unsavedChanges.title', 'Unsaved Changes')}
+        centered
+      >
+        <Stack gap="md">
+          <Text>
+            {t('automate.creation.unsavedChanges.message', 'You have unsaved changes. Are you sure you want to go back? All changes will be lost.')}
+          </Text>
+          <Group gap="md" justify="flex-end">
+            <Button variant="outline" onClick={handleCancelBack}>
+              {t('automate.creation.unsavedChanges.cancel', 'Cancel')}
+            </Button>
+            <Button color="red" onClick={handleConfirmBack}>
+              {t('automate.creation.unsavedChanges.confirm', 'Go Back')}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </div>
+  );
+}
diff --git a/frontend/src/components/tools/automate/AutomationEntry.tsx b/frontend/src/components/tools/automate/AutomationEntry.tsx
new file mode 100644
index 000000000..3314831be
--- /dev/null
+++ b/frontend/src/components/tools/automate/AutomationEntry.tsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Group, Text, ActionIcon, Menu, Box } from '@mantine/core';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+interface AutomationEntryProps {
+  /** Optional title for the automation (usually for custom ones) */
+  title?: string;
+  /** MUI Icon component for the badge */
+  badgeIcon?: React.ComponentType<any>;
+  /** Array of tool operation names in the workflow */
+  operations: string[];
+  /** Click handler */
+  onClick: () => void;
+  /** Whether to keep the icon at normal color (for special cases like "Add New") */
+  keepIconColor?: boolean;
+  /** Show menu for saved/suggested automations */
+  showMenu?: boolean;
+  /** Edit handler */
+  onEdit?: () => void;
+  /** Delete handler */
+  onDelete?: () => void;
+}
+
+export default function AutomationEntry({
+  title,
+  badgeIcon: BadgeIcon,
+  operations,
+  onClick,
+  keepIconColor = false,
+  showMenu = false,
+  onEdit,
+  onDelete
+}: AutomationEntryProps) {
+  const { t } = useTranslation();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // Keep item in hovered state if menu is open
+  const shouldShowHovered = isHovered || isMenuOpen;
+
+  const renderContent = () => {
+    if (title) {
+      // Custom automation with title
+      return (
+        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
+          {BadgeIcon && (
+            <BadgeIcon
+              style={{
+                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
+              }}
+            />
+          )}
+          <Text size="xs" style={{ flex: 1, textAlign: 'left', color: 'var(--mantine-color-text)' }}>
+            {title}
+          </Text>
+        </Group>
+      );
+    } else {
+      // Suggested automation showing tool chain
+      return (
+        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
+          {BadgeIcon && (
+            <BadgeIcon
+              style={{
+                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
+              }}
+            />
+          )}
+          <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>
+            {operations.map((op, index) => (
+              <React.Fragment key={`${op}-${index}`}>
+                <Text size="xs" style={{ color: 'var(--mantine-color-text)' }}>
+                  {t(`${op}.title`, op)}
+                </Text>
+
+                {index < operations.length - 1 && (
+                  <Text size="xs" c="dimmed" style={{ color: 'var(--mantine-color-text)' }}>
+                    →
+                  </Text>
+                )}
+              </React.Fragment>
+            ))}
+          </Group>
+        </Group>
+      );
+    }
+  };
+
+  return (
+    <Box
+      style={{
+        backgroundColor: shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'transparent',
+        borderRadius: 'var(--mantine-radius-md)',
+        transition: 'background-color 0.15s ease',
+        padding: '0.75rem 1rem',
+        cursor: 'pointer'
+      }}
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Group gap="md" align="center" justify="space-between" style={{ width: '100%' }}>
+        <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-start' }}>
+          {renderContent()}
+        </div>
+
+        {showMenu && (
+          <Menu
+            position="bottom-end"
+            withinPortal
+            onOpen={() => setIsMenuOpen(true)}
+            onClose={() => setIsMenuOpen(false)}
+          >
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                c="dimmed"
+                size="md"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  opacity: shouldShowHovered ? 1 : 0,
+                  transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)',
+                  transition: 'opacity 0.3s ease, transform 0.3s ease',
+                  pointerEvents: shouldShowHovered ? 'auto' : 'none'
+                }}
+              >
+                <MoreVertIcon style={{ fontSize: 20 }} />
+              </ActionIcon>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              {onEdit && (
+                <Menu.Item
+                  leftSection={<EditIcon style={{ fontSize: 16 }} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                >
+                  {t('edit', 'Edit')}
+                </Menu.Item>
+              )}
+              {onDelete && (
+                <Menu.Item
+                  leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete();
+                  }}
+                >
+                  {t('delete', 'Delete')}
+                </Menu.Item>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        )}
+      </Group>
+    </Box>
+  );
+}
diff --git a/frontend/src/components/tools/automate/AutomationRun.tsx b/frontend/src/components/tools/automate/AutomationRun.tsx
new file mode 100644
index 000000000..640f802f6
--- /dev/null
+++ b/frontend/src/components/tools/automate/AutomationRun.tsx
@@ -0,0 +1,223 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Text, Stack, Group, Card, Progress } from "@mantine/core";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import CheckIcon from "@mui/icons-material/Check";
+import { useFileSelection } from "../../../contexts/FileContext";
+import { useFlatToolRegistry } from "../../../data/useTranslatedToolRegistry";
+import { AutomationConfig, ExecutionStep } from "../../../types/automation";
+import { AUTOMATION_CONSTANTS, EXECUTION_STATUS } from "../../../constants/automation";
+import { useResourceCleanup } from "../../../utils/resourceManager";
+
+interface AutomationRunProps {
+  automation: AutomationConfig;
+  onComplete: () => void;
+  automateOperation?: any; // TODO: Type this properly when available
+}
+
+export default function AutomationRun({ automation, onComplete, automateOperation }: AutomationRunProps) {
+  const { t } = useTranslation();
+  const { selectedFiles } = useFileSelection();
+  const toolRegistry = useFlatToolRegistry();
+  const cleanup = useResourceCleanup();
+  
+  // Progress tracking state
+  const [executionSteps, setExecutionSteps] = useState<ExecutionStep[]>([]);
+  const [currentStepIndex, setCurrentStepIndex] = useState(-1);
+  
+  // Use the operation hook's loading state
+  const isExecuting = automateOperation?.isLoading || false;
+  const hasResults = automateOperation?.files.length > 0 || automateOperation?.downloadUrl !== null;
+
+  // Initialize execution steps from automation
+  React.useEffect(() => {
+    if (automation?.operations) {
+      const steps = automation.operations.map((op: any, index: number) => {
+        const tool = toolRegistry[op.operation];
+        return {
+          id: `${op.operation}-${index}`,
+          operation: op.operation,
+          name: tool?.name || op.operation,
+          status: EXECUTION_STATUS.PENDING
+        };
+      });
+      setExecutionSteps(steps);
+      setCurrentStepIndex(-1);
+    }
+  }, [automation, toolRegistry]);
+
+  // Cleanup when component unmounts
+  React.useEffect(() => {
+    return () => {
+      // Reset progress state when component unmounts
+      setExecutionSteps([]);
+      setCurrentStepIndex(-1);
+      // Clean up any blob URLs
+      cleanup();
+    };
+  }, [cleanup]);
+
+  const executeAutomation = async () => {
+    if (!selectedFiles || selectedFiles.length === 0) {
+      return;
+    }
+
+    if (!automateOperation) {
+      console.error('No automateOperation provided');
+      return;
+    }
+
+    // Reset progress tracking
+    setCurrentStepIndex(0);
+    setExecutionSteps(prev => prev.map(step => ({ ...step, status: EXECUTION_STATUS.PENDING, error: undefined })));
+
+    try {
+      // Use the automateOperation.executeOperation to handle file consumption properly
+      await automateOperation.executeOperation(
+        { 
+          automationConfig: automation,
+          onStepStart: (stepIndex: number, operationName: string) => {
+            setCurrentStepIndex(stepIndex);
+            setExecutionSteps(prev => prev.map((step, idx) =>
+              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.RUNNING } : step
+            ));
+          },
+          onStepComplete: (stepIndex: number, resultFiles: File[]) => {
+            setExecutionSteps(prev => prev.map((step, idx) =>
+              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.COMPLETED } : step
+            ));
+          },
+          onStepError: (stepIndex: number, error: string) => {
+            setExecutionSteps(prev => prev.map((step, idx) =>
+              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.ERROR, error } : step
+            ));
+          }
+        },
+        selectedFiles
+      );
+      
+      // Mark all as completed and reset current step
+      setCurrentStepIndex(-1);
+      console.log(`✅ Automation completed successfully`);
+    } catch (error: any) {
+      console.error("Automation execution failed:", error);
+      setCurrentStepIndex(-1);
+    }
+  };
+
+  const getProgress = () => {
+    if (executionSteps.length === 0) return 0;
+    const completedSteps = executionSteps.filter(step => step.status === EXECUTION_STATUS.COMPLETED).length;
+    return (completedSteps / executionSteps.length) * 100;
+  };
+
+  const getStepIcon = (step: ExecutionStep) => {
+    switch (step.status) {
+      case EXECUTION_STATUS.COMPLETED:
+        return <CheckIcon style={{ fontSize: 16, color: 'green' }} />;
+      case EXECUTION_STATUS.ERROR:
+        return <span style={{ fontSize: 16, color: 'red' }}>✕</span>;
+      case EXECUTION_STATUS.RUNNING:
+        return <div style={{ 
+          width: 16, 
+          height: 16, 
+          border: '2px solid #ccc', 
+          borderTop: '2px solid #007bff', 
+          borderRadius: '50%',
+          animation: `spin ${AUTOMATION_CONSTANTS.SPINNER_ANIMATION_DURATION} linear infinite` 
+        }} />;
+      default:
+        return <div style={{ 
+          width: 16, 
+          height: 16, 
+          border: '2px solid #ccc', 
+          borderRadius: '50%' 
+        }} />;
+    }
+  };
+
+  return (
+    <div>
+      <Stack gap="md">
+        {/* Automation Info */}
+        <Card padding="md" withBorder>
+          <Text size="sm" fw={500} mb="xs">
+            {automation?.name || t("automate.sequence.unnamed", "Unnamed Automation")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("automate.sequence.steps", "{{count}} steps", { count: executionSteps.length })}
+          </Text>
+        </Card>
+
+        {/* Progress Bar */}
+        {isExecuting && (
+          <div>
+            <Text size="sm" mb="xs">
+              Progress: {currentStepIndex + 1}/{executionSteps.length}
+            </Text>
+            <Progress value={getProgress()} size="lg" />
+          </div>
+        )}
+
+        {/* Execution Steps */}
+        <Stack gap="xs">
+          {executionSteps.map((step, index) => (
+            <Group key={step.id} gap="sm" align="center">
+              <Text size="xs" c="dimmed" style={{ minWidth: "1rem", textAlign: "center" }}>
+                {index + 1}
+              </Text>
+
+              {getStepIcon(step)}
+
+              <div style={{ flex: 1 }}>
+                <Text 
+                  size="sm" 
+                  style={{
+                    color: step.status === EXECUTION_STATUS.RUNNING ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-text)',
+                    fontWeight: step.status === EXECUTION_STATUS.RUNNING ? 500 : 400
+                  }}
+                >
+                  {step.name}
+                </Text>
+                {step.error && (
+                  <Text size="xs" c="red" mt="xs">
+                    {step.error}
+                  </Text>
+                )}
+              </div>
+            </Group>
+          ))}
+        </Stack>
+
+        {/* Action Buttons */}
+        <Group justify="space-between" mt="xl">
+          <Button
+            leftSection={<PlayArrowIcon />}
+            onClick={executeAutomation}
+            disabled={isExecuting || !selectedFiles || selectedFiles.length === 0}
+            loading={isExecuting}
+          >
+            {isExecuting
+              ? t("automate.sequence.running", "Running Automation...")
+              : t("automate.sequence.run", "Run Automation")}
+          </Button>
+
+          {hasResults && (
+            <Button variant="light" onClick={onComplete}>
+              {t("automate.sequence.finish", "Finish")}
+            </Button>
+          )}
+        </Group>
+      </Stack>
+
+      <style>
+        {`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/tools/automate/AutomationSelection.tsx b/frontend/src/components/tools/automate/AutomationSelection.tsx
new file mode 100644
index 000000000..f55cf4c5d
--- /dev/null
+++ b/frontend/src/components/tools/automate/AutomationSelection.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Title, Stack, Divider } from "@mantine/core";
+import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
+import SettingsIcon from "@mui/icons-material/Settings";
+import AutomationEntry from "./AutomationEntry";
+import { useSuggestedAutomations } from "../../../hooks/tools/automate/useSuggestedAutomations";
+import { AutomationConfig } from "../../../types/automation";
+
+interface AutomationSelectionProps {
+  savedAutomations: AutomationConfig[];
+  onCreateNew: () => void;
+  onRun: (automation: AutomationConfig) => void;
+  onEdit: (automation: AutomationConfig) => void;
+  onDelete: (automation: AutomationConfig) => void;
+}
+
+export default function AutomationSelection({ 
+  savedAutomations,
+  onCreateNew, 
+  onRun, 
+  onEdit, 
+  onDelete 
+}: AutomationSelectionProps) {
+  const { t } = useTranslation();
+  const suggestedAutomations = useSuggestedAutomations();
+
+  return (
+    <div>
+      <Title order={3} size="h4" fw={600} mb="md" style={{color: 'var(--mantine-color-dimmed)'}}>
+        {t("automate.selection.saved.title", "Saved")}
+      </Title>
+
+    <Stack gap="xs">
+      <AutomationEntry
+        title={t("automate.selection.createNew.title", "Create New Automation")}
+        badgeIcon={AddCircleOutline}
+        operations={[]}
+        onClick={onCreateNew}
+        keepIconColor={true}
+      />
+      {/* Saved Automations */}
+      {savedAutomations.map((automation) => (
+        <AutomationEntry
+          key={automation.id}
+          title={automation.name}
+          badgeIcon={SettingsIcon}
+          operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
+          onClick={() => onRun(automation)}
+          showMenu={true}
+          onEdit={() => onEdit(automation)}
+          onDelete={() => onDelete(automation)}
+        />
+      ))}
+      <Divider pb='sm' />
+
+      {/* Suggested Automations */}
+      <div>
+        <Title order={3} size="h4" fw={600} mb="md"style={ {color: 'var(--mantine-color-dimmed)'}}>
+          {t("automate.selection.suggested.title", "Suggested")}
+        </Title>
+        <Stack gap="xs">
+          {suggestedAutomations.map((automation) => (
+            <AutomationEntry
+              key={automation.id}
+              badgeIcon={automation.icon}
+              operations={automation.operations.map(op => op.operation)}
+              onClick={() => onRun(automation)}
+            />
+          ))}
+        </Stack>
+      </div>
+    </Stack>
+    </div>
+  );
+}
diff --git a/frontend/src/components/tools/automate/ToolConfigurationModal.tsx b/frontend/src/components/tools/automate/ToolConfigurationModal.tsx
new file mode 100644
index 000000000..d97819fb8
--- /dev/null
+++ b/frontend/src/components/tools/automate/ToolConfigurationModal.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Modal,
+  Title,
+  Button,
+  Group,
+  Stack,
+  Text,
+  Alert
+} from '@mantine/core';
+import SettingsIcon from '@mui/icons-material/Settings';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import WarningIcon from '@mui/icons-material/Warning';
+import { ToolRegistry } from '../../../data/toolsTaxonomy';
+import { getAvailableToExtensions } from '../../../utils/convertUtils';
+interface ToolConfigurationModalProps {
+  opened: boolean;
+  tool: {
+    id: string;
+    operation: string;
+    name: string;
+    parameters?: any;
+  };
+  onSave: (parameters: any) => void;
+  onCancel: () => void;
+  toolRegistry: ToolRegistry;
+}
+
+export default function ToolConfigurationModal({ opened, tool, onSave, onCancel, toolRegistry }: ToolConfigurationModalProps) {
+  const { t } = useTranslation();
+
+  const [parameters, setParameters] = useState<any>({});
+  const [isValid, setIsValid] = useState(true);
+
+  // Get tool info from registry
+  const toolInfo = toolRegistry[tool.operation];
+  const SettingsComponent = toolInfo?.settingsComponent;
+
+  // Initialize parameters from tool (which should contain defaults from registry)
+  useEffect(() => {
+    if (tool.parameters) {
+      setParameters(tool.parameters);
+    } else {
+      // Fallback to empty parameters if none provided
+      setParameters({});
+    }
+  }, [tool.parameters, tool.operation]);
+
+  // Render the settings component
+  const renderToolSettings = () => {
+    if (!SettingsComponent) {
+      return (
+        <Alert icon={<WarningIcon />} color="orange">
+          <Text size="sm">
+            {t('automate.config.noSettings', 'This tool does not have configurable settings.')}
+          </Text>
+        </Alert>
+      );
+    }
+
+    // Special handling for ConvertSettings which needs additional props
+    if (tool.operation === 'convert') {
+      return (
+        <SettingsComponent
+          parameters={parameters}
+          onParameterChange={(key: string, value: any) => {
+            setParameters((prev: any) => ({ ...prev, [key]: value }));
+          }}
+          getAvailableToExtensions={getAvailableToExtensions}
+          selectedFiles={[]}
+          disabled={false}
+        />
+      );
+    }
+
+    return (
+      <SettingsComponent
+        parameters={parameters}
+        onParameterChange={(key: string, value: any) => {
+          setParameters((prev: any) => ({ ...prev, [key]: value }));
+        }}
+        disabled={false}
+      />
+    );
+  };
+
+  const handleSave = () => {
+    if (isValid) {
+      onSave(parameters);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onCancel}
+      title={
+        <Group gap="xs">
+          <SettingsIcon />
+          <Title order={3}>
+            {t('automate.config.title', 'Configure {{toolName}}', { toolName: tool.name })}
+          </Title>
+        </Group>
+      }
+      size="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          {t('automate.config.description', 'Configure the settings for this tool. These settings will be applied when the automation runs.')}
+        </Text>
+
+        <div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+          {renderToolSettings()}
+        </div>
+
+        <Group justify="flex-end" gap="sm">
+          <Button
+            variant="light"
+            leftSection={<CloseIcon />}
+            onClick={onCancel}
+          >
+            {t('automate.config.cancel', 'Cancel')}
+          </Button>
+          <Button
+            leftSection={<CheckIcon />}
+            onClick={handleSave}
+            disabled={!isValid}
+          >
+            {t('automate.config.save', 'Save Configuration')}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/frontend/src/components/tools/automate/ToolList.tsx b/frontend/src/components/tools/automate/ToolList.tsx
new file mode 100644
index 000000000..8b24b5c17
--- /dev/null
+++ b/frontend/src/components/tools/automate/ToolList.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, Stack, Group, ActionIcon } from '@mantine/core';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SettingsIcon from '@mui/icons-material/Settings';
+import CloseIcon from '@mui/icons-material/Close';
+import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
+import { AutomationTool } from '../../../types/automation';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import ToolSelector from './ToolSelector';
+import AutomationEntry from './AutomationEntry';
+
+interface ToolListProps {
+  tools: AutomationTool[];
+  toolRegistry: Record<string, ToolRegistryEntry>;
+  onToolUpdate: (index: number, updates: Partial<AutomationTool>) => void;
+  onToolRemove: (index: number) => void;
+  onToolConfigure: (index: number) => void;
+  onToolAdd: () => void;
+  getToolName: (operation: string) => string;
+  getToolDefaultParameters: (operation: string) => Record<string, any>;
+}
+
+export default function ToolList({
+  tools,
+  toolRegistry,
+  onToolUpdate,
+  onToolRemove,
+  onToolConfigure,
+  onToolAdd,
+  getToolName,
+  getToolDefaultParameters
+}: ToolListProps) {
+  const { t } = useTranslation();
+
+  const handleToolSelect = (index: number, newOperation: string) => {
+    const defaultParams = getToolDefaultParameters(newOperation);
+    
+    onToolUpdate(index, {
+      operation: newOperation,
+      name: getToolName(newOperation),
+      configured: false,
+      parameters: defaultParams
+    });
+  };
+
+  return (
+    <div>
+      <Text size="sm" fw={500} mb="xs" style={{ color: 'var(--mantine-color-text)' }}>
+        {t('automate.creation.tools.selected', 'Selected Tools')} ({tools.length})
+      </Text>
+      <Stack gap="0">
+        {tools.map((tool, index) => (
+          <React.Fragment key={tool.id}>
+            <div
+              style={{
+                border: '1px solid var(--mantine-color-gray-2)',
+                borderRadius: 'var(--mantine-radius-sm)',
+                position: 'relative',
+                padding: 'var(--mantine-spacing-xs)'
+              }}
+            >
+              {/* Delete X in top right */}
+              <ActionIcon
+                variant="subtle"
+                size="xs"
+                onClick={() => onToolRemove(index)}
+                title={t('automate.creation.tools.remove', 'Remove tool')}
+                style={{
+                  position: 'absolute',
+                  top: '4px',
+                  right: '4px',
+                  zIndex: 1,
+                  color: 'var(--mantine-color-gray-6)'
+                }}
+              >
+                <CloseIcon style={{ fontSize: 12 }} />
+              </ActionIcon>
+
+              <div style={{ paddingRight: '1.25rem' }}>
+                {/* Tool Selection Dropdown with inline settings cog */}
+                <Group gap="xs" align="center" wrap="nowrap">
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <ToolSelector
+                      key={`tool-selector-${tool.id}`}
+                      onSelect={(newOperation) => handleToolSelect(index, newOperation)}
+                      excludeTools={['automate']}
+                      toolRegistry={toolRegistry}
+                      selectedValue={tool.operation}
+                      placeholder={tool.name}
+                    />
+                  </div>
+
+                  {/* Settings cog - only show if tool is selected, aligned right */}
+                  {tool.operation && (
+                    <ActionIcon
+                      variant="subtle"
+                      size="sm"
+                      onClick={() => onToolConfigure(index)}
+                      title={t('automate.creation.tools.configure', 'Configure tool')}
+                      style={{ color: 'var(--mantine-color-gray-6)' }}
+                    >
+                      <SettingsIcon style={{ fontSize: 16 }} />
+                    </ActionIcon>
+                  )}
+                </Group>
+
+                {/* Configuration status underneath */}
+                {tool.operation && !tool.configured && (
+                  <Text pl="md" size="xs" c="dimmed" mt="xs">
+                    {t('automate.creation.tools.notConfigured', "! Not Configured")}
+                  </Text>
+                )}
+              </div>
+            </div>
+
+            {index < tools.length - 1 && (
+              <div style={{ textAlign: 'center', padding: '8px 0' }}>
+                <Text size="xs" c="dimmed">↓</Text>
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+
+        {/* Arrow before Add Tool Button */}
+        {tools.length > 0 && (
+          <div style={{ textAlign: 'center', padding: '8px 0' }}>
+            <Text size="xs" c="dimmed">↓</Text>
+          </div>
+        )}
+
+        {/* Add Tool Button */}
+        <div style={{
+          border: '1px solid var(--mantine-color-gray-2)',
+          borderRadius: 'var(--mantine-radius-sm)',
+          overflow: 'hidden'
+        }}>
+          <AutomationEntry
+            title={t('automate.creation.tools.addTool', 'Add Tool')}
+            badgeIcon={AddCircleOutline}
+            operations={[]}
+            onClick={onToolAdd}
+            keepIconColor={true}
+          />
+        </div>
+      </Stack>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/tools/automate/ToolSelector.tsx b/frontend/src/components/tools/automate/ToolSelector.tsx
new file mode 100644
index 000000000..80b68b0a4
--- /dev/null
+++ b/frontend/src/components/tools/automate/ToolSelector.tsx
@@ -0,0 +1,182 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Menu, Stack, Text, ScrollArea } from '@mantine/core';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+import { useToolSections } from '../../../hooks/useToolSections';
+import { renderToolButtons } from '../shared/renderToolButtons';
+import ToolSearch from '../toolPicker/ToolSearch';
+
+interface ToolSelectorProps {
+  onSelect: (toolKey: string) => void;
+  excludeTools?: string[];
+  toolRegistry: Record<string, ToolRegistryEntry>; // Pass registry as prop to break circular dependency
+  selectedValue?: string; // For showing current selection when editing existing tool
+  placeholder?: string; // Custom placeholder text
+}
+
+export default function ToolSelector({
+  onSelect,
+  excludeTools = [],
+  toolRegistry,
+  selectedValue,
+  placeholder
+}: ToolSelectorProps) {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Filter out excluded tools (like 'automate' itself)
+  const baseFilteredTools = useMemo(() => {
+    return Object.entries(toolRegistry).filter(([key]) => !excludeTools.includes(key));
+  }, [toolRegistry, excludeTools]);
+
+  // Apply search filter
+  const filteredTools = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return baseFilteredTools;
+    }
+
+    const lowercaseSearch = searchTerm.toLowerCase();
+    return baseFilteredTools.filter(([key, tool]) => {
+      return (
+        tool.name.toLowerCase().includes(lowercaseSearch) ||
+        tool.description?.toLowerCase().includes(lowercaseSearch) ||
+        key.toLowerCase().includes(lowercaseSearch)
+      );
+    });
+  }, [baseFilteredTools, searchTerm]);
+
+  // Create filtered tool registry for ToolSearch
+  const filteredToolRegistry = useMemo(() => {
+    const registry: Record<string, ToolRegistryEntry> = {};
+    baseFilteredTools.forEach(([key, tool]) => {
+      registry[key] = tool;
+    });
+    return registry;
+  }, [baseFilteredTools]);
+
+  // Use the same tool sections logic as the main ToolPicker
+  const { sections, searchGroups } = useToolSections(filteredTools);
+
+  // Determine what to display: search results or organized sections
+  const isSearching = searchTerm.trim().length > 0;
+  const displayGroups = useMemo(() => {
+    if (isSearching) {
+      return searchGroups || [];
+    }
+
+    if (!sections || sections.length === 0) {
+      return [];
+    }
+
+    // Find the "all" section which contains all tools without duplicates
+    const allSection = sections.find(s => (s as any).key === 'all');
+    return allSection?.subcategories || [];
+  }, [isSearching, searchGroups, sections]);
+
+  const handleToolSelect = useCallback((toolKey: string) => {
+    onSelect(toolKey);
+    setOpened(false);
+    setSearchTerm(''); // Clear search to show the selected tool display
+  }, [onSelect]);
+
+  const renderedTools = useMemo(() =>
+    displayGroups.map((subcategory) =>
+      renderToolButtons(t, subcategory, null, handleToolSelect, !isSearching)
+    ), [displayGroups, handleToolSelect, isSearching, t]
+  );
+
+  const handleSearchFocus = () => {
+    setOpened(true);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    if (!opened) {
+      setOpened(true);
+    }
+  };
+
+  // Get display value for selected tool
+  const getDisplayValue = () => {
+    if (selectedValue && toolRegistry[selectedValue]) {
+      return toolRegistry[selectedValue].name;
+    }
+    return placeholder || t('automate.creation.tools.add', 'Add a tool...');
+  };
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <Menu
+        opened={opened}
+        onChange={(isOpen) => {
+          setOpened(isOpen);
+          // Clear search term when menu closes to show proper display
+          if (!isOpen) {
+            setSearchTerm('');
+          }
+        }}
+        closeOnClickOutside={true}
+        closeOnEscape={true}
+        position="bottom-start"
+        offset={4}
+        withinPortal={false}
+        trapFocus={false}
+        shadow="sm"
+        transitionProps={{ duration: 0 }}
+      >
+        <Menu.Target>
+          <div style={{ width: '100%' }}>
+            {selectedValue && toolRegistry[selectedValue] && !opened ? (
+              // Show selected tool in AutomationEntry style when tool is selected and not searching
+              <div onClick={handleSearchFocus} style={{ cursor: 'pointer' }}>
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--mantine-spacing-sm)',
+                  padding: '0 0.5rem',
+                  borderRadius: 'var(--mantine-radius-sm)',
+                }}>
+                  <div style={{ color: 'var(--mantine-color-text)', fontSize: '1.2rem' }}>
+                    {toolRegistry[selectedValue].icon}
+                  </div>
+                  <Text size="sm" style={{ flex: 1, color: 'var(--mantine-color-text)' }}>
+                    {toolRegistry[selectedValue].name}
+                  </Text>
+                </div>
+              </div>
+            ) : (
+              // Show search input when no tool selected or actively searching
+              <ToolSearch
+                value={searchTerm}
+                onChange={handleSearchChange}
+                toolRegistry={filteredToolRegistry}
+                mode="filter"
+                placeholder={getDisplayValue()}
+                hideIcon={true}
+                onFocus={handleSearchFocus}
+              />
+            )}
+          </div>
+        </Menu.Target>
+
+      <Menu.Dropdown p={0} style={{ minWidth: '16rem' }}>
+        <ScrollArea h={350}>
+          <Stack gap="sm" p="sm">
+            {displayGroups.length === 0 ? (
+              <Text size="sm" c="dimmed" ta="center" p="md">
+                {isSearching
+                  ? t('tools.noSearchResults', 'No tools found')
+                  : t('tools.noTools', 'No tools available')
+                }
+              </Text>
+            ) : (
+              renderedTools
+            )}
+          </Stack>
+        </ScrollArea>
+      </Menu.Dropdown>
+    </Menu>
+    </div>
+  );
+}
diff --git a/frontend/src/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
index 22a25e627..20e7c4d7a 100644
--- a/frontend/src/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
@@ -1,6 +1,9 @@
 import React from "react";
-import { Text } from "@mantine/core";
+import { Text, Anchor } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import FolderIcon from '@mui/icons-material/Folder';
+import { useFilesModalContext } from "../../../contexts/FilesModalContext";
+import { useAllFiles } from "../../../contexts/FileContext";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: File[];
@@ -12,13 +15,39 @@ const FileStatusIndicator = ({
   placeholder,
 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
-  const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started");
-  
-  // Only show content when no files are selected
+  const { openFilesModal } = useFilesModalContext();
+  const { files: workbenchFiles } = useAllFiles();
+
+  // Check if there are no files in the workbench
+  if (workbenchFiles.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("files.noFiles", "No files uploaded. ")}{" "}
+        <Anchor
+          size="sm"
+          onClick={openFilesModal}
+          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+        >
+          <FolderIcon style={{ fontSize: '14px' }} />
+          {t("files.addFiles", "Add files")}
+        </Anchor>
+      </Text>
+    );
+  }
+
+  // Show selection status when there are files in workbench
   if (selectedFiles.length === 0) {
     return (
       <Text size="sm" c="dimmed">
-        {defaultPlaceholder}
+        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+        <Anchor
+          size="sm"
+          onClick={openFilesModal}
+          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+        >
+          <FolderIcon style={{ fontSize: '14px' }} />
+          {t("files.addFiles", "Add files")}
+        </Anchor>
       </Text>
     );
   }
diff --git a/frontend/src/components/tools/shared/SuggestedToolsSection.tsx b/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
index b1f91fc39..fca3b5e56 100644
--- a/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
+++ b/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Stack, Text, Divider, Card, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
+
 export interface SuggestedToolsSectionProps {}
 
 export function SuggestedToolsSection(): React.ReactElement {
@@ -21,7 +22,7 @@ export function SuggestedToolsSection(): React.ReactElement {
           const IconComponent = tool.icon;
           return (
             <Card
-              key={tool.name}
+              key={tool.id}
               p="sm"
               withBorder
               style={{ cursor: 'pointer' }}
diff --git a/frontend/src/components/tools/shared/ToolStep.tsx b/frontend/src/components/tools/shared/ToolStep.tsx
index 927180038..9d86d2f03 100644
--- a/frontend/src/components/tools/shared/ToolStep.tsx
+++ b/frontend/src/components/tools/shared/ToolStep.tsx
@@ -1,7 +1,6 @@
 import React, { createContext, useContext, useMemo, useRef } from 'react';
 import { Text, Stack, Box, Flex, Divider } from '@mantine/core';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import LocalIcon from '../../shared/LocalIcon';
 import { Tooltip } from '../../shared/Tooltip';
 import { TooltipTip } from '../../../types/tips';
 import { createFilesToolStep, FilesToolStepProps } from './FilesToolStep';
@@ -25,6 +24,7 @@ export interface ToolStepProps {
   _stepNumber?: number; // Internal prop set by ToolStepContainer
   _excludeFromCount?: boolean; // Internal prop to exclude from visible count calculation
   _noPadding?: boolean; // Internal prop to exclude from default left padding
+  alwaysShowTooltip?: boolean; // Force tooltip to show even when collapsed
   tooltip?: {
     content?: React.ReactNode;
     tips?: TooltipTip[];
@@ -38,9 +38,10 @@ export interface ToolStepProps {
 const renderTooltipTitle = (
   title: string,
   tooltip: ToolStepProps['tooltip'],
-  isCollapsed: boolean
+  isCollapsed: boolean,
+  alwaysShowTooltip: boolean = false
 ) => {
-  if (tooltip && !isCollapsed) {
+  if (tooltip && (!isCollapsed || alwaysShowTooltip)) {
     return (
       <Tooltip
         content={tooltip.content}
@@ -52,9 +53,7 @@ const renderTooltipTitle = (
           <Text fw={500} size="lg">
             {title}
           </Text>
-          <span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
-            gpp_maybe
-          </span>
+          <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
         </Flex>
       </Tooltip>
     );
@@ -77,6 +76,7 @@ const ToolStep = ({
   showNumber,
   _stepNumber,
   _noPadding,
+  alwaysShowTooltip = false,
   tooltip
 }: ToolStepProps) => {
   if (!isVisible) return null;
@@ -118,18 +118,16 @@ const ToolStep = ({
               {stepNumber}
             </Text>
           )}
-          {renderTooltipTitle(title, tooltip, isCollapsed)}
+          {renderTooltipTitle(title, tooltip, isCollapsed, alwaysShowTooltip)}
         </Flex>
 
         {isCollapsed ? (
-          <ChevronRightIcon style={{
-            fontSize: '1.2rem',
+          <LocalIcon icon="chevron-right-rounded" width="1.2rem" height="1.2rem" style={{
             color: 'var(--mantine-color-dimmed)',
             opacity: onCollapsedClick ? 1 : 0.5
           }} />
         ) : (
-          <ExpandMoreIcon style={{
-            fontSize: '1.2rem',
+          <LocalIcon icon="expand-more-rounded" width="1.2rem" height="1.2rem" style={{
             color: 'var(--mantine-color-dimmed)',
             opacity: onCollapsedClick ? 1 : 0.5
           }} />
diff --git a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
new file mode 100644
index 000000000..6ed949442
--- /dev/null
+++ b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Flex, Text, Divider } from '@mantine/core';
+import LocalIcon from '../../shared/LocalIcon';
+import { Tooltip } from '../../shared/Tooltip';
+
+export interface ToolWorkflowTitleProps {
+  title: string;
+  tooltip?: {
+    content?: React.ReactNode;
+    tips?: any[];
+    header?: {
+      title: string;
+      logo?: React.ReactNode;
+    };
+  };
+}
+
+export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
+  if (tooltip) {
+    return (
+      <>
+        <Flex justify="center" w="100%">
+          <Tooltip
+            content={tooltip.content}
+            tips={tooltip.tips}
+            header={tooltip.header}
+            sidebarTooltip={true}
+          >
+            <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
+              <Text fw={500} size="xl" p="md">
+                {title}
+              </Text>
+              <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
+            </Flex>
+          </Tooltip>
+        </Flex>
+        <Divider />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Flex justify="center" w="100%">
+        <Text fw={500} size="xl" p="md">
+          {title}
+        </Text>
+      </Flex>
+      <Divider />
+    </>
+  );
+}
diff --git a/frontend/src/components/tools/shared/createToolFlow.tsx b/frontend/src/components/tools/shared/createToolFlow.tsx
index 3cb46ed60..d523ff6f6 100644
--- a/frontend/src/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/components/tools/shared/createToolFlow.tsx
@@ -3,12 +3,14 @@ import { Stack } from '@mantine/core';
 import { createToolSteps, ToolStepProvider } from './ToolStep';
 import OperationButton from './OperationButton';
 import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';
+import { ToolWorkflowTitle, ToolWorkflowTitleProps } from './ToolWorkflowTitle';
 
 export interface FilesStepConfig {
   selectedFiles: File[];
   isCollapsed?: boolean;
   placeholder?: string;
   onCollapsedClick?: () => void;
+  isVisible?: boolean;
 }
 
 export interface MiddleStepConfig {
@@ -44,7 +46,10 @@ export interface ReviewStepConfig {
   testId?: string;
 }
 
+export interface TitleConfig extends ToolWorkflowTitleProps {}
+
 export interface ToolFlowConfig {
+  title?: TitleConfig;
   files: FilesStepConfig;
   steps: MiddleStepConfig[];
   executeButton?: ExecuteButtonConfig;
@@ -62,8 +67,10 @@ export function createToolFlow(config: ToolFlowConfig) {
   return (
     <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
+        {config.title && <ToolWorkflowTitle {...config.title} />}
+
         {/* Files Step */}
-        {steps.createFilesStep({
+        {config.files.isVisible !== false && steps.createFilesStep({
           selectedFiles: config.files.selectedFiles,
           isCollapsed: config.files.isCollapsed,
           placeholder: config.files.placeholder,
diff --git a/frontend/src/components/tools/shared/renderToolButtons.tsx b/frontend/src/components/tools/shared/renderToolButtons.tsx
new file mode 100644
index 000000000..eb9c9be6d
--- /dev/null
+++ b/frontend/src/components/tools/shared/renderToolButtons.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Stack } from '@mantine/core';
+import ToolButton from '../toolPicker/ToolButton';
+import SubcategoryHeader from './SubcategoryHeader';
+
+import { getSubcategoryLabel } from "../../../data/toolsTaxonomy";
+import { TFunction } from 'i18next';
+import { SubcategoryGroup } from '../../../hooks/useToolSections';
+
+// Helper function to render tool buttons for a subcategory
+export const renderToolButtons = (
+  t: TFunction,
+  subcategory: SubcategoryGroup,
+  selectedToolKey: string | null,
+  onSelect: (id: string) => void,
+  showSubcategoryHeader: boolean = true
+) => (
+  <Box key={subcategory.subcategoryId} w="100%">
+    {showSubcategoryHeader && (
+      <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
+    )}
+    <Stack gap="xs">
+      {subcategory.tools.map(({ id, tool }) => (
+        <ToolButton
+          key={id}
+          id={id}
+          tool={tool}
+          isSelected={selectedToolKey === id}
+          onSelect={onSelect}
+        />
+      ))}
+    </Stack>
+  </Box>
+);
diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx
index af668a1fa..66bd9489e 100644
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -14,9 +14,9 @@ interface ToolButtonProps {
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
   const handleClick = (id: string) => {
     if (tool.link) {
-      // Open external link in new tab 
+      // Open external link in new tab
       window.open(tool.link, '_blank', 'noopener,noreferrer');
-      return; 
+      return;
     }
     // Normal tool selection
     onSelect(id);
@@ -47,4 +47,4 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
   );
 };
 
-export default ToolButton; 
\ No newline at end of file
+export default ToolButton;
diff --git a/frontend/src/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
index f01a9f87d..774126aa2 100644
--- a/frontend/src/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import { Stack, Button, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import LocalIcon from '../../shared/LocalIcon';
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { TextInput } from "../../shared/TextInput";
 import './ToolPicker.css';
@@ -12,19 +13,26 @@ interface ToolSearchProps {
   onToolSelect?: (toolId: string) => void;
   mode: 'filter' | 'dropdown';
   selectedToolKey?: string | null;
+  placeholder?: string;
+  hideIcon?: boolean;
+  onFocus?: () => void;
 }
 
-const ToolSearch = ({ 
-  value, 
-  onChange, 
-  toolRegistry, 
-  onToolSelect, 
+const ToolSearch = ({
+  value,
+  onChange,
+  toolRegistry,
+  onToolSelect,
   mode = 'filter',
-  selectedToolKey 
+  selectedToolKey,
+  placeholder,
+  hideIcon = false,
+  onFocus
 }: ToolSearchProps) => {
   const { t } = useTranslation();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const filteredTools = useMemo(() => {
     if (!value.trim()) return [];
@@ -47,7 +55,12 @@ const ToolSearch = ({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+      if (
+        searchRef.current &&
+        dropdownRef.current &&
+        !searchRef.current.contains(event.target as Node) &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setDropdownOpen(false);
       }
     };
@@ -61,9 +74,10 @@ const ToolSearch = ({
         ref={searchRef}
         value={value}
         onChange={handleSearchChange}
-        placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
-        icon={<span className="material-symbols-rounded">search</span>}
+        placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
+        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
         autoComplete="off"
+
       />
     </div>
   );
@@ -77,19 +91,19 @@ const ToolSearch = ({
       {searchInput}
       {dropdownOpen && filteredTools.length > 0 && (
         <div
+          ref={dropdownRef}
           style={{
             position: 'absolute',
             top: '100%',
             left: 0,
             right: 0,
             zIndex: 1000,
-            backgroundColor: 'var(--bg-toolbar)',
-            border: '1px solid var(--border-default)',
-            borderRadius: '8px',
-            marginTop: '4px',
+            backgroundColor: 'var(--mantine-color-body)',
+            border: '1px solid var(--mantine-color-gray-3)',
+            borderRadius: '6px',
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
             maxHeight: '300px',
-            overflowY: 'auto',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+            overflowY: 'auto'
           }}
         >
           <Stack gap="xs" style={{ padding: '8px' }}>
@@ -97,7 +111,10 @@ const ToolSearch = ({
               <Button
                 key={id}
                 variant="subtle"
-                onClick={() => onToolSelect && onToolSelect(id)}
+                onClick={() => {
+                  onToolSelect && onToolSelect(id);
+                  setDropdownOpen(false);
+                }}
                 leftSection={
                   <div style={{ color: 'var(--tools-text-and-icon-color)' }}>
                     {tool.icon}
@@ -126,4 +143,4 @@ const ToolSearch = ({
   );
 };
 
-export default ToolSearch; 
\ No newline at end of file
+export default ToolSearch;
diff --git a/frontend/src/constants/automation.ts b/frontend/src/constants/automation.ts
new file mode 100644
index 000000000..c1aeaeff0
--- /dev/null
+++ b/frontend/src/constants/automation.ts
@@ -0,0 +1,42 @@
+/**
+ * Constants for automation functionality
+ */
+
+export const AUTOMATION_CONSTANTS = {
+  // Timeouts
+  OPERATION_TIMEOUT: 300000, // 5 minutes in milliseconds
+  
+  // Default values
+  DEFAULT_TOOL_COUNT: 2,
+  MIN_TOOL_COUNT: 2,
+  
+  // File prefixes
+  FILE_PREFIX: 'automated_',
+  RESPONSE_ZIP_PREFIX: 'response_',
+  RESULT_FILE_PREFIX: 'result_',
+  PROCESSED_FILE_PREFIX: 'processed_',
+  
+  // Operation types
+  CONVERT_OPERATION_TYPE: 'convert',
+  
+  // Storage keys
+  DB_NAME: 'StirlingPDF_Automations',
+  DB_VERSION: 1,
+  STORE_NAME: 'automations',
+  
+  // UI delays
+  SPINNER_ANIMATION_DURATION: '1s'
+} as const;
+
+export const AUTOMATION_STEPS = {
+  SELECTION: 'selection',
+  CREATION: 'creation',
+  RUN: 'run'
+} as const;
+
+export const EXECUTION_STATUS = {
+  PENDING: 'pending',
+  RUNNING: 'running',
+  COMPLETED: 'completed',
+  ERROR: 'error'
+} as const;
\ No newline at end of file
diff --git a/frontend/src/contexts/NavigationContext.tsx b/frontend/src/contexts/NavigationContext.tsx
index c85eef158..532eb20bb 100644
--- a/frontend/src/contexts/NavigationContext.tsx
+++ b/frontend/src/contexts/NavigationContext.tsx
@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useReducer, useCallback } from 'react';
 import { useNavigationUrlSync } from '../hooks/useUrlSync';
+import { ModeType, isValidMode, getDefaultMode } from '../types/navigation';
 
 /**
  * NavigationContext - Complete navigation management system
@@ -9,32 +10,13 @@ import { useNavigationUrlSync } from '../hooks/useUrlSync';
  * maintain clear separation of concerns.
  */
 
-// Navigation mode types - complete list to match fileContext.ts
-export type ModeType =
-  | 'viewer'
-  | 'pageEditor'
-  | 'fileEditor'
-  | 'merge'
-  | 'split'
-  | 'compress'
-  | 'ocr'
-  | 'convert'
-  | 'sanitize'
-  | 'addPassword'
-  | 'changePermissions'
-  | 'addWatermark'
-  | 'removePassword'
-  | 'single-large-page'
-  | 'repair'
-  | 'unlockPdfForms'
-  | 'removeCertificateSign';
-
 // Navigation state
 interface NavigationState {
   currentMode: ModeType;
   hasUnsavedChanges: boolean;
   pendingNavigation: (() => void) | null;
   showNavigationWarning: boolean;
+  selectedToolKey: string | null; // Add tool selection to navigation state
 }
 
 // Navigation actions
@@ -42,7 +24,8 @@ type NavigationAction =
   | { type: 'SET_MODE'; payload: { mode: ModeType } }
   | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
   | { type: 'SET_PENDING_NAVIGATION'; payload: { navigationFn: (() => void) | null } }
-  | { type: 'SHOW_NAVIGATION_WARNING'; payload: { show: boolean } };
+  | { type: 'SHOW_NAVIGATION_WARNING'; payload: { show: boolean } }
+  | { type: 'SET_SELECTED_TOOL'; payload: { toolKey: string | null } };
 
 // Navigation reducer
 const navigationReducer = (state: NavigationState, action: NavigationAction): NavigationState => {
@@ -59,6 +42,9 @@ const navigationReducer = (state: NavigationState, action: NavigationAction): Na
     case 'SHOW_NAVIGATION_WARNING':
       return { ...state, showNavigationWarning: action.payload.show };
     
+    case 'SET_SELECTED_TOOL':
+      return { ...state, selectedToolKey: action.payload.toolKey };
+    
     default:
       return state;
   }
@@ -66,10 +52,11 @@ const navigationReducer = (state: NavigationState, action: NavigationAction): Na
 
 // Initial state
 const initialState: NavigationState = {
-  currentMode: 'pageEditor',
+  currentMode: getDefaultMode(),
   hasUnsavedChanges: false,
   pendingNavigation: null,
-  showNavigationWarning: false
+  showNavigationWarning: false,
+  selectedToolKey: null
 };
 
 // Navigation context actions interface
@@ -80,6 +67,9 @@ export interface NavigationContextActions {
   requestNavigation: (navigationFn: () => void) => void;
   confirmNavigation: () => void;
   cancelNavigation: () => void;
+  selectTool: (toolKey: string) => void;
+  clearToolSelection: () => void;
+  handleToolSelect: (toolId: string) => void;
 }
 
 // Split context values
@@ -88,6 +78,7 @@ export interface NavigationContextStateValue {
   hasUnsavedChanges: boolean;
   pendingNavigation: (() => void) | null;
   showNavigationWarning: boolean;
+  selectedToolKey: string | null;
 }
 
 export interface NavigationContextActionsValue {
@@ -145,6 +136,31 @@ export const NavigationProvider: React.FC<{
       // Clear navigation without executing
       dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
       dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
+    }, []),
+
+    selectTool: useCallback((toolKey: string) => {
+      dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolKey } });
+    }, []),
+
+    clearToolSelection: useCallback(() => {
+      dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolKey: null } });
+    }, []),
+
+    handleToolSelect: useCallback((toolId: string) => {
+      // Handle special cases
+      if (toolId === 'allTools') {
+        dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolKey: null } });
+        return;
+      }
+
+      // Special-case: if tool is a dedicated reader tool, enter reader mode
+      if (toolId === 'read' || toolId === 'view-pdf') {
+        dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolKey: null } });
+        return;
+      }
+
+      dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolKey: toolId } });
+      dispatch({ type: 'SET_MODE', payload: { mode: 'fileEditor' as ModeType } });
     }, [])
   };
 
@@ -152,7 +168,8 @@ export const NavigationProvider: React.FC<{
     currentMode: state.currentMode,
     hasUnsavedChanges: state.hasUnsavedChanges,
     pendingNavigation: state.pendingNavigation,
-    showNavigationWarning: state.showNavigationWarning
+    showNavigationWarning: state.showNavigationWarning,
+    selectedToolKey: state.selectedToolKey
   };
 
   const actionsValue: NavigationContextActionsValue = {
@@ -212,16 +229,8 @@ export const useNavigationGuard = () => {
   };
 };
 
-// Utility functions for mode handling
-export const isValidMode = (mode: string): mode is ModeType => {
-  const validModes: ModeType[] = [
-    'viewer', 'pageEditor', 'fileEditor', 'merge', 'split', 
-    'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 'sanitize'
-  ];
-  return validModes.includes(mode as ModeType);
-};
-
-export const getDefaultMode = (): ModeType => 'pageEditor';
+// Re-export utility functions from types for backward compatibility
+export { isValidMode, getDefaultMode, type ModeType } from '../types/navigation';
 
 // TODO: This will be expanded for URL-based routing system
 // - URL parsing utilities
diff --git a/frontend/src/contexts/RightRailContext.tsx b/frontend/src/contexts/RightRailContext.tsx
new file mode 100644
index 000000000..be3b7276c
--- /dev/null
+++ b/frontend/src/contexts/RightRailContext.tsx
@@ -0,0 +1,64 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { RightRailAction, RightRailButtonConfig } from '../types/rightRail';
+
+interface RightRailContextValue {
+	buttons: RightRailButtonConfig[];
+	actions: Record<string, RightRailAction>;
+	registerButtons: (buttons: RightRailButtonConfig[]) => void;
+	unregisterButtons: (ids: string[]) => void;
+	setAction: (id: string, action: RightRailAction) => void;
+	clear: () => void;
+}
+
+const RightRailContext = createContext<RightRailContextValue | undefined>(undefined);
+
+export function RightRailProvider({ children }: { children: React.ReactNode }) {
+	const [buttons, setButtons] = useState<RightRailButtonConfig[]>([]);
+	const [actions, setActions] = useState<Record<string, RightRailAction>>({});
+
+	const registerButtons = useCallback((newButtons: RightRailButtonConfig[]) => {
+		setButtons(prev => {
+			const byId = new Map(prev.map(b => [b.id, b] as const));
+			newButtons.forEach(nb => {
+				const existing = byId.get(nb.id) || ({} as RightRailButtonConfig);
+				byId.set(nb.id, { ...existing, ...nb });
+			});
+			const merged = Array.from(byId.values());
+			merged.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.id.localeCompare(b.id));
+			if (process.env.NODE_ENV === 'development') {
+				const ids = newButtons.map(b => b.id);
+				const dupes = ids.filter((id, idx) => ids.indexOf(id) !== idx);
+				if (dupes.length) console.warn('[RightRail] Duplicate ids in registerButtons:', dupes);
+			}
+			return merged;
+		});
+	}, []);
+
+	const unregisterButtons = useCallback((ids: string[]) => {
+		setButtons(prev => prev.filter(b => !ids.includes(b.id)));
+		setActions(prev => Object.fromEntries(Object.entries(prev).filter(([id]) => !ids.includes(id))));
+	}, []);
+
+	const setAction = useCallback((id: string, action: RightRailAction) => {
+		setActions(prev => ({ ...prev, [id]: action }));
+	}, []);
+
+	const clear = useCallback(() => {
+		setButtons([]);
+		setActions({});
+	}, []);
+
+	const value = useMemo<RightRailContextValue>(() => ({ buttons, actions, registerButtons, unregisterButtons, setAction, clear }), [buttons, actions, registerButtons, unregisterButtons, setAction, clear]);
+
+	return (
+		<RightRailContext.Provider value={value}>
+			{children}
+		</RightRailContext.Provider>
+	);
+}
+
+export function useRightRail() {
+	const ctx = useContext(RightRailContext);
+	if (!ctx) throw new Error('useRightRail must be used within RightRailProvider');
+	return ctx;
+}
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 4ca66e61c..f784dd49a 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -8,6 +8,7 @@ import { useToolManagement } from '../hooks/useToolManagement';
 import { PageEditorFunctions } from '../types/pageEditor';
 import { ToolRegistryEntry } from '../data/toolsTaxonomy';
 import { useToolWorkflowUrlSync } from '../hooks/useUrlSync';
+import { useNavigationActions, useNavigationState } from './NavigationContext';
 
 // State interface
 interface ToolWorkflowState {
@@ -72,7 +73,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   selectedToolKey: string | null;
   selectedTool: ToolRegistryEntry | null;
   toolRegistry: any; // From useToolManagement
-  
+
   // UI Actions
   setSidebarsVisible: (visible: boolean) => void;
   setLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
@@ -100,23 +101,23 @@ const ToolWorkflowContext = createContext<ToolWorkflowContextValue | undefined>(
 // Provider component
 interface ToolWorkflowProviderProps {
   children: React.ReactNode;
-  /** Handler for view changes (passed from parent) */
-  onViewChange?: (view: string) => void;
-  /** Enable URL synchronization for tool selection */
-  enableUrlSync?: boolean;
 }
 
-export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = true }: ToolWorkflowProviderProps) {
+export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
 
+  // Navigation actions and state are available since we're inside NavigationProvider
+  const { actions } = useNavigationActions();
+  const navigationState = useNavigationState();
+  
   // Tool management hook
   const {
-    selectedToolKey,
-    selectedTool,
     toolRegistry,
-    selectTool,
-    clearToolSelection,
+    getSelectedTool,
   } = useToolManagement();
+  
+  // Get selected tool from navigation context
+  const selectedTool = getSelectedTool(navigationState.selectedToolKey);
 
   // UI Action creators
   const setSidebarsVisible = useCallback((visible: boolean) => {
@@ -145,28 +146,30 @@ export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = t
 
   // Workflow actions (compound actions that coordinate multiple state changes)
   const handleToolSelect = useCallback((toolId: string) => {
-    // Special-case: if tool is a dedicated reader tool, enter reader mode and do not go to toolContent
-    if (toolId === 'read' || toolId === 'view-pdf') {
-      setReaderMode(true);
-      setLeftPanelView('toolPicker');
-      clearToolSelection();
-      setSearchQuery('');
-      return;
-    }
-
-    selectTool(toolId);
-    onViewChange?.('fileEditor');
-    setLeftPanelView('toolContent');
-    setReaderMode(false);
-    // Clear search so the tool content becomes visible immediately
+    actions.handleToolSelect(toolId);
+    
+    // Clear search query when selecting a tool
     setSearchQuery('');
-  }, [selectTool, onViewChange, setLeftPanelView, setReaderMode, setSearchQuery, clearToolSelection]);
+    
+    // Handle view switching logic
+    if (toolId === 'allTools' || toolId === 'read' || toolId === 'view-pdf') {
+      setLeftPanelView('toolPicker');
+      if (toolId === 'read' || toolId === 'view-pdf') {
+        setReaderMode(true);
+      } else {
+        setReaderMode(false);
+      }
+    } else {
+      setLeftPanelView('toolContent');
+      setReaderMode(false); // Disable read mode when selecting tools
+    }
+  }, [actions, setLeftPanelView, setReaderMode, setSearchQuery]);
 
   const handleBackToTools = useCallback(() => {
     setLeftPanelView('toolPicker');
     setReaderMode(false);
-    clearToolSelection();
-  }, [setLeftPanelView, setReaderMode, clearToolSelection]);
+    actions.clearToolSelection();
+  }, [setLeftPanelView, setReaderMode, actions]);
 
   const handleReaderToggle = useCallback(() => {
     setReaderMode(true);
@@ -186,13 +189,13 @@ export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = t
   );
 
   // Enable URL synchronization for tool selection
-  useToolWorkflowUrlSync(selectedToolKey, selectTool, clearToolSelection, enableUrlSync);
+  useToolWorkflowUrlSync(navigationState.selectedToolKey, actions.selectTool, actions.clearToolSelection, true);
 
-  // Simple context value with basic memoization
+  // Properly memoized context value
   const contextValue = useMemo((): ToolWorkflowContextValue => ({
     // State
     ...state,
-    selectedToolKey,
+    selectedToolKey: navigationState.selectedToolKey,
     selectedTool,
     toolRegistry,
 
@@ -203,8 +206,8 @@ export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = t
     setPreviewFile,
     setPageEditorFunctions,
     setSearchQuery,
-    selectTool,
-    clearToolSelection,
+    selectTool: actions.selectTool,
+    clearToolSelection: actions.clearToolSelection,
 
     // Workflow Actions
     handleToolSelect,
@@ -214,7 +217,25 @@ export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = t
     // Computed
     filteredTools,
     isPanelVisible,
-  }), [state, selectedToolKey, selectedTool, toolRegistry, filteredTools, isPanelVisible]);
+  }), [
+    state,
+    navigationState.selectedToolKey,
+    selectedTool,
+    toolRegistry,
+    setSidebarsVisible,
+    setLeftPanelView,
+    setReaderMode,
+    setPreviewFile,
+    setPageEditorFunctions,
+    setSearchQuery,
+    actions.selectTool,
+    actions.clearToolSelection,
+    handleToolSelect,
+    handleBackToTools,
+    handleReaderToggle,
+    filteredTools,
+    isPanelVisible,
+  ]);
 
   return (
     <ToolWorkflowContext.Provider value={contextValue}>
@@ -227,7 +248,39 @@ export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = t
 export function useToolWorkflow(): ToolWorkflowContextValue {
   const context = useContext(ToolWorkflowContext);
   if (!context) {
+    // During development hot reload, temporarily return a safe fallback
+    if (false && process.env.NODE_ENV === 'development') {
+      console.warn('ToolWorkflowContext temporarily unavailable during hot reload, using fallback');
+
+      // Return minimal safe fallback to prevent crashes
+      return {
+        sidebarsVisible: true,
+        leftPanelView: 'toolPicker',
+        readerMode: false,
+        previewFile: null,
+        pageEditorFunctions: null,
+        searchQuery: '',
+        selectedToolKey: null,
+        selectedTool: null,
+        toolRegistry: {},
+        filteredTools: [],
+        isPanelVisible: true,
+        setSidebarsVisible: () => {},
+        setLeftPanelView: () => {},
+        setReaderMode: () => {},
+        setPreviewFile: () => {},
+        setPageEditorFunctions: () => {},
+        setSearchQuery: () => {},
+        selectTool: () => {},
+        clearToolSelection: () => {},
+        handleToolSelect: () => {},
+        handleBackToTools: () => {},
+        handleReaderToggle: () => {}
+      } as ToolWorkflowContextValue;
+    }
+
+    console.error('ToolWorkflowContext not found. Current stack:', new Error().stack);
     throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
   }
   return context;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/data/toolsTaxonomy.ts b/frontend/src/data/toolsTaxonomy.ts
index a76752b87..0892b8b6c 100644
--- a/frontend/src/data/toolsTaxonomy.ts
+++ b/frontend/src/data/toolsTaxonomy.ts
@@ -1,25 +1,27 @@
 import { type TFunction } from 'i18next';
 import React from 'react';
+import { ToolOperationHook, ToolOperationConfig } from '../hooks/tools/shared/useToolOperation';
 import { BaseToolProps } from '../types/tool';
+import { BaseParameters } from '../types/parameters';
 
 export enum SubcategoryId {
-	SIGNING = 'signing',
-	DOCUMENT_SECURITY = 'documentSecurity',
-	VERIFICATION = 'verification',
-	DOCUMENT_REVIEW = 'documentReview',
-	PAGE_FORMATTING = 'pageFormatting',
-	EXTRACTION = 'extraction',
-	REMOVAL = 'removal',
-	AUTOMATION = 'automation',
-	GENERAL = 'general',
-	ADVANCED_FORMATTING = 'advancedFormatting',
-	DEVELOPER_TOOLS = 'developerTools'
+  SIGNING = 'signing',
+  DOCUMENT_SECURITY = 'documentSecurity',
+  VERIFICATION = 'verification',
+  DOCUMENT_REVIEW = 'documentReview',
+  PAGE_FORMATTING = 'pageFormatting',
+  EXTRACTION = 'extraction',
+  REMOVAL = 'removal',
+  AUTOMATION = 'automation',
+  GENERAL = 'general',
+  ADVANCED_FORMATTING = 'advancedFormatting',
+  DEVELOPER_TOOLS = 'developerTools'
 }
 
-export enum ToolCategory {
-	STANDARD_TOOLS = 'Standard Tools',
-	ADVANCED_TOOLS = 'Advanced Tools',
-	RECOMMENDED_TOOLS = 'Recommended Tools'
+export enum ToolCategoryId {
+  STANDARD_TOOLS = 'standardTools',
+  ADVANCED_TOOLS = 'advancedTools',
+  RECOMMENDED_TOOLS = 'recommendedTools'
 }
 
 export type ToolRegistryEntry = {
@@ -28,76 +30,80 @@ export type ToolRegistryEntry = {
 	component: React.ComponentType<BaseToolProps> | null;
 	view: 'sign' | 'security' | 'format' | 'extract' | 'view' | 'merge' | 'pageEditor' | 'convert' | 'redact' | 'split' | 'convert' | 'remove' | 'compress' | 'external';
 	description: string;
-	category: ToolCategory;
-	subcategory: SubcategoryId;
+	categoryId: ToolCategoryId;
+	subcategoryId: SubcategoryId;
 	maxFiles?: number;
 	supportedFormats?: string[];
 	endpoints?: string[];
 	link?: string;
 	type?: string;
+	// Operation configuration for automation
+	operationConfig?: ToolOperationConfig<any>;
+	// Settings component for automation configuration
+	settingsComponent?: React.ComponentType<any>;
 }
 
-export type ToolRegistry = Record<string, ToolRegistryEntry>;
+export type ToolRegistry = Record<string /* FIX ME: Should be ToolId */, ToolRegistryEntry>;
 
 export const SUBCATEGORY_ORDER: SubcategoryId[] = [
-	SubcategoryId.SIGNING,
-	SubcategoryId.DOCUMENT_SECURITY,
-	SubcategoryId.VERIFICATION,
-	SubcategoryId.DOCUMENT_REVIEW,
-	SubcategoryId.PAGE_FORMATTING,
-	SubcategoryId.EXTRACTION,
-	SubcategoryId.REMOVAL,
-	SubcategoryId.AUTOMATION,
-	SubcategoryId.GENERAL,
-	SubcategoryId.ADVANCED_FORMATTING,
-	SubcategoryId.DEVELOPER_TOOLS,
+  SubcategoryId.SIGNING,
+  SubcategoryId.DOCUMENT_SECURITY,
+  SubcategoryId.VERIFICATION,
+  SubcategoryId.DOCUMENT_REVIEW,
+  SubcategoryId.PAGE_FORMATTING,
+  SubcategoryId.EXTRACTION,
+  SubcategoryId.REMOVAL,
+  SubcategoryId.AUTOMATION,
+  SubcategoryId.GENERAL,
+  SubcategoryId.ADVANCED_FORMATTING,
+  SubcategoryId.DEVELOPER_TOOLS,
 ];
 
 export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
-	[SubcategoryId.SIGNING]: '#FF7892',
-	[SubcategoryId.DOCUMENT_SECURITY]: '#FF7892',
-	[SubcategoryId.VERIFICATION]: '#1BB1D4',
-	[SubcategoryId.DOCUMENT_REVIEW]: '#48BD54',
-	[SubcategoryId.PAGE_FORMATTING]: '#7882FF',
-	[SubcategoryId.EXTRACTION]: '#1BB1D4',
-	[SubcategoryId.REMOVAL]: '#7882FF',
-	[SubcategoryId.AUTOMATION]: '#69DC95',
-	[SubcategoryId.GENERAL]: '#69DC95',
-	[SubcategoryId.ADVANCED_FORMATTING]: '#F55454',
-	[SubcategoryId.DEVELOPER_TOOLS]: '#F55454',
+  [SubcategoryId.SIGNING]: '#FF7892',
+  [SubcategoryId.DOCUMENT_SECURITY]: '#FF7892',
+  [SubcategoryId.VERIFICATION]: '#1BB1D4',
+  [SubcategoryId.DOCUMENT_REVIEW]: '#48BD54',
+  [SubcategoryId.PAGE_FORMATTING]: '#7882FF',
+  [SubcategoryId.EXTRACTION]: '#1BB1D4',
+  [SubcategoryId.REMOVAL]: '#7882FF',
+  [SubcategoryId.AUTOMATION]: '#69DC95',
+  [SubcategoryId.GENERAL]: '#69DC95',
+  [SubcategoryId.ADVANCED_FORMATTING]: '#F55454',
+  [SubcategoryId.DEVELOPER_TOOLS]: '#F55454',
 };
 
-export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || '#7882FF';
-
+export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);
 export const getSubcategoryLabel = (t: TFunction, id: SubcategoryId): string => t(`toolPicker.subcategories.${id}`, id);
+export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || '#7882FF';
 
 
 
 export const getAllEndpoints = (registry: ToolRegistry): string[] => {
-	const lists: string[][] = [];
-	Object.values(registry).forEach(entry => {
-		if (entry.endpoints && entry.endpoints.length > 0) {
-			lists.push(entry.endpoints);
-		}
-	});
-	return Array.from(new Set(lists.flat()));
+  const lists: string[][] = [];
+  Object.values(registry).forEach(entry => {
+    if (entry.endpoints && entry.endpoints.length > 0) {
+      lists.push(entry.endpoints);
+    }
+  });
+  return Array.from(new Set(lists.flat()));
 };
 
 export const getConversionEndpoints = (extensionToEndpoint: Record<string, Record<string, string>>): string[] => {
-	const endpoints = new Set<string>();
-	Object.values(extensionToEndpoint).forEach(toEndpoints => {
-		Object.values(toEndpoints).forEach(endpoint => {
-			endpoints.add(endpoint);
-		});
-	});
-	return Array.from(endpoints);
+  const endpoints = new Set<string>();
+  Object.values(extensionToEndpoint).forEach(toEndpoints => {
+    Object.values(toEndpoints).forEach(endpoint => {
+      endpoints.add(endpoint);
+    });
+  });
+  return Array.from(endpoints);
 };
 
 export const getAllApplicationEndpoints = (
-	registry: ToolRegistry,
-	extensionToEndpoint?: Record<string, Record<string, string>>
+  registry: ToolRegistry,
+  extensionToEndpoint?: Record<string, Record<string, string>>
 ): string[] => {
-	const toolEp = getAllEndpoints(registry);
-	const convEp = extensionToEndpoint ? getConversionEndpoints(extensionToEndpoint) : [];
-	return Array.from(new Set([...toolEp, ...convEp]));
+  const toolEp = getAllEndpoints(registry);
+  const convEp = extensionToEndpoint ? getConversionEndpoints(extensionToEndpoint) : [];
+  return Array.from(new Set([...toolEp, ...convEp]));
 };
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index f27fbd5c7..db8b2cf23 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import LocalIcon from '../components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import SplitPdfPanel from "../tools/Split";
 import CompressPdfPanel from "../tools/Compress";
@@ -8,12 +9,36 @@ import Sanitize from '../tools/Sanitize';
 import AddPassword from '../tools/AddPassword';
 import ChangePermissions from '../tools/ChangePermissions';
 import RemovePassword from '../tools/RemovePassword';
-import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
+import { SubcategoryId, ToolCategoryId, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
 import SingleLargePage from '../tools/SingleLargePage';
 import UnlockPdfForms from '../tools/UnlockPdfForms';
 import RemoveCertificateSign from '../tools/RemoveCertificateSign';
+import { compressOperationConfig } from '../hooks/tools/compress/useCompressOperation';
+import { splitOperationConfig } from '../hooks/tools/split/useSplitOperation';
+import { addPasswordOperationConfig } from '../hooks/tools/addPassword/useAddPasswordOperation';
+import { removePasswordOperationConfig } from '../hooks/tools/removePassword/useRemovePasswordOperation';
+import { sanitizeOperationConfig } from '../hooks/tools/sanitize/useSanitizeOperation';
+import { repairOperationConfig } from '../hooks/tools/repair/useRepairOperation';
+import { addWatermarkOperationConfig } from '../hooks/tools/addWatermark/useAddWatermarkOperation';
+import { unlockPdfFormsOperationConfig } from '../hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation';
+import { singleLargePageOperationConfig } from '../hooks/tools/singleLargePage/useSingleLargePageOperation';
+import { ocrOperationConfig } from '../hooks/tools/ocr/useOCROperation';
+import { convertOperationConfig } from '../hooks/tools/convert/useConvertOperation';
+import { removeCertificateSignOperationConfig } from '../hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation';
+import { changePermissionsOperationConfig } from '../hooks/tools/changePermissions/useChangePermissionsOperation';
+import CompressSettings from '../components/tools/compress/CompressSettings';
+import SplitSettings from '../components/tools/split/SplitSettings';
+import AddPasswordSettings from '../components/tools/addPassword/AddPasswordSettings';
+import RemovePasswordSettings from '../components/tools/removePassword/RemovePasswordSettings';
+import SanitizeSettings from '../components/tools/sanitize/SanitizeSettings';
+import RepairSettings from '../components/tools/repair/RepairSettings';
+import UnlockPdfFormsSettings from '../components/tools/unlockPdfForms/UnlockPdfFormsSettings';
+import AddWatermarkSingleStepSettings from '../components/tools/addWatermark/AddWatermarkSingleStepSettings';
+import OCRSettings from '../components/tools/ocr/OCRSettings';
+import ConvertSettings from '../components/tools/convert/ConvertSettings';
+import ChangePermissionsSettings from '../components/tools/changePermissions/ChangePermissionsSettings';
 
 const showPlaceholderTools = false; // For development purposes. Allows seeing the full list of tools, even if they're unimplemented
 
@@ -21,526 +46,548 @@ const showPlaceholderTools = false; // For development purposes. Allows seeing t
 export function useFlatToolRegistry(): ToolRegistry {
   const { t } = useTranslation();
 
-  const allTools: ToolRegistry = {
+  return useMemo(() => {
+    const allTools: ToolRegistry = {
     // Signing
 
     "certSign": {
-        icon: <span className="material-symbols-rounded">workspace_premium</span>,
+        icon: <LocalIcon icon="workspace-premium-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.certSign.title", "Sign with Certificate"),
         component: null,
         view: "sign",
         description: t("home.certSign.desc", "Signs a PDF with a Certificate/Key (PEM/P12)"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.SIGNING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.SIGNING
     },
     "sign": {
-        icon: <span className="material-symbols-rounded">signature</span>,
+        icon: <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.sign.title", "Sign"),
         component: null,
         view: "sign",
         description: t("home.sign.desc", "Adds signature to PDF by drawing, text or image"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.SIGNING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.SIGNING
     },
 
 
     // Document Security
 
     "addPassword": {
-        icon: <span className="material-symbols-rounded">password</span>,
+        icon: <LocalIcon icon="password-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addPassword.title", "Add Password"),
         component: AddPassword,
         view: "security",
         description: t("home.addPassword.desc", "Add password protection and restrictions to PDF files"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
-        endpoints: ["add-password"]
+        endpoints: ["add-password"],
+        operationConfig: addPasswordOperationConfig,
+        settingsComponent: AddPasswordSettings
     },
     "watermark": {
-        icon: <span className="material-symbols-rounded">branding_watermark</span>,
+        icon: <LocalIcon icon="branding-watermark-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.watermark.title", "Add Watermark"),
         component: AddWatermark,
         view: "format",
         maxFiles: -1,
         description: t("home.watermark.desc", "Add a custom watermark to your PDF document."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
-        endpoints: ["add-watermark"]
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
+        endpoints: ["add-watermark"],
+        operationConfig: addWatermarkOperationConfig,
+        settingsComponent: AddWatermarkSingleStepSettings
     },
     "add-stamp": {
-        icon: <span className="material-symbols-rounded">approval</span>,
+        icon: <LocalIcon icon="approval-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.AddStampRequest.title", "Add Stamp to PDF"),
         component: null,
         view: "format",
         description: t("home.AddStampRequest.desc", "Add text or add image stamps at set locations"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "sanitize": {
-        icon: <span className="material-symbols-rounded">cleaning_services</span>,
+        icon: <LocalIcon icon="cleaning-services-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.sanitize.title", "Sanitize"),
         component: Sanitize,
         view: "security",
         maxFiles: -1,
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         description: t("home.sanitize.desc", "Remove potentially harmful elements from PDF files"),
-        endpoints: ["sanitize-pdf"]
+        endpoints: ["sanitize-pdf"],
+        operationConfig: sanitizeOperationConfig,
+        settingsComponent: SanitizeSettings
     },
     "flatten": {
-        icon: <span className="material-symbols-rounded">layers_clear</span>,
+        icon: <LocalIcon icon="layers-clear-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.flatten.title", "Flatten"),
         component: null,
         view: "format",
         description: t("home.flatten.desc", "Remove all interactive elements and forms from a PDF"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "unlock-pdf-forms": {
-        icon: <span className="material-symbols-rounded">preview_off</span>,
+        icon: <LocalIcon icon="preview-off-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.unlockPDFForms.title", "Unlock PDF Forms"),
         component: UnlockPdfForms,
         view: "security",
         description: t("home.unlockPDFForms.desc", "Remove read-only property of form fields in a PDF document."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
-        endpoints: ["unlock-pdf-forms"]
+        endpoints: ["unlock-pdf-forms"],
+        operationConfig: unlockPdfFormsOperationConfig,
+        settingsComponent: UnlockPdfFormsSettings
     },
     "manage-certificates": {
-        icon: <span className="material-symbols-rounded">license</span>,
+        icon: <LocalIcon icon="license-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.manageCertificates.title", "Manage Certificates"),
         component: null,
         view: "security",
         description: t("home.manageCertificates.desc", "Import, export, or delete digital certificate files used for signing PDFs."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "change-permissions": {
-        icon: <span className="material-symbols-rounded">lock</span>,
+        icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
         name: t("home.changePermissions.title", "Change Permissions"),
         component: ChangePermissions,
         view: "security",
         description: t("home.changePermissions.desc", "Change document restrictions and permissions"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
-        endpoints: ["add-password"]
+        endpoints: ["add-password"],
+        operationConfig: changePermissionsOperationConfig,
+        settingsComponent: ChangePermissionsSettings
     },
     // Verification
 
     "get-all-info-on-pdf": {
-        icon: <span className="material-symbols-rounded">fact_check</span>,
+        icon: <LocalIcon icon="fact-check-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.getPdfInfo.title", "Get ALL Info on PDF"),
         component: null,
         view: "extract",
         description: t("home.getPdfInfo.desc", "Grabs any and all information possible on PDFs"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.VERIFICATION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.VERIFICATION
     },
     "validate-pdf-signature": {
-        icon: <span className="material-symbols-rounded">verified</span>,
+        icon: <LocalIcon icon="verified-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.validateSignature.title", "Validate PDF Signature"),
         component: null,
         view: "security",
         description: t("home.validateSignature.desc", "Verify digital signatures and certificates in PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.VERIFICATION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.VERIFICATION
     },
 
 
     // Document Review
 
     "read": {
-        icon: <span className="material-symbols-rounded">article</span>,
+        icon: <LocalIcon icon="article-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.read.title", "Read"),
         component: null,
         view: "view",
         description: t("home.read.desc", "View and annotate PDFs. Highlight text, draw, or insert comments for review and collaboration."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_REVIEW
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_REVIEW
     },
     "change-metadata": {
-        icon: <span className="material-symbols-rounded">assignment</span>,
+        icon: <LocalIcon icon="assignment-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.changeMetadata.title", "Change Metadata"),
         component: null,
         view: "format",
         description: t("home.changeMetadata.desc", "Change/Remove/Add metadata from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_REVIEW
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_REVIEW
     },
     // Page Formatting
 
     "cropPdf": {
-        icon: <span className="material-symbols-rounded">crop</span>,
+        icon: <LocalIcon icon="crop-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.crop.title", "Crop PDF"),
         component: null,
         view: "format",
         description: t("home.crop.desc", "Crop a PDF to reduce its size (maintains text!)"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "rotate": {
-        icon: <span className="material-symbols-rounded">rotate_right</span>,
+        icon: <LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.rotate.title", "Rotate"),
         component: null,
         view: "format",
         description: t("home.rotate.desc", "Easily rotate your PDFs."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "splitPdf": {
-        icon: <span className="material-symbols-rounded">content_cut</span>,
+        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.split.title", "Split"),
         component: SplitPdfPanel,
         view: "split",
         description: t("home.split.desc", "Split PDFs into multiple documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING,
+        operationConfig: splitOperationConfig,
+        settingsComponent: SplitSettings
     },
     "reorganize-pages": {
-        icon: <span className="material-symbols-rounded">move_down</span>,
+        icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.reorganizePages.title", "Reorganize Pages"),
         component: null,
         view: "pageEditor",
         description: t("home.reorganizePages.desc", "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "adjust-page-size-scale": {
-        icon: <span className="material-symbols-rounded">crop_free</span>,
+        icon: <LocalIcon icon="crop-free-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.scalePages.title", "Adjust page size/scale"),
         component: null,
         view: "format",
         description: t("home.scalePages.desc", "Change the size/scale of a page and/or its contents."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "addPageNumbers": {
-        icon: <span className="material-symbols-rounded">123</span>,
+        icon: <LocalIcon icon="123-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addPageNumbers.title", "Add Page Numbers"),
         component: null,
         view: "format",
         description: t("home.addPageNumbers.desc", "Add Page numbers throughout a document in a set location"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "multi-page-layout": {
-        icon: <span className="material-symbols-rounded">dashboard</span>,
+        icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pageLayout.title", "Multi-Page Layout"),
         component: null,
         view: "format",
         description: t("home.pageLayout.desc", "Merge multiple pages of a PDF document into a single page"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "single-large-page": {
-        icon: <span className="material-symbols-rounded">looks_one</span>,
+        icon: <LocalIcon icon="looks-one-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
         component: SingleLargePage,
         view: "format",
         description: t("home.pdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING,
         maxFiles: -1,
-        endpoints: ["pdf-to-single-page"]
+        endpoints: ["pdf-to-single-page"],
+        operationConfig: singleLargePageOperationConfig
     },
     "add-attachments": {
-        icon: <span className="material-symbols-rounded">attachment</span>,
+        icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.attachments.title", "Add Attachments"),
         component: null,
         view: "format",
         description: t("home.attachments.desc", "Add or remove embedded files (attachments) to/from a PDF"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING,
     },
 
 
     // Extraction
 
     "extractPages": {
-        icon: <span className="material-symbols-rounded">upload</span>,
+        icon: <LocalIcon icon="upload-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.extractPages.title", "Extract Pages"),
         component: null,
         view: "extract",
         description: t("home.extractPages.desc", "Extract specific pages from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.EXTRACTION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.EXTRACTION
     },
     "extract-images": {
-        icon: <span className="material-symbols-rounded">filter</span>,
+        icon: <LocalIcon icon="filter-alt" width="1.5rem" height="1.5rem" />,
         name: t("home.extractImages.title", "Extract Images"),
         component: null,
         view: "extract",
         description: t("home.extractImages.desc", "Extract images from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.EXTRACTION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.EXTRACTION
     },
 
 
     // Removal
 
     "removePages": {
-        icon: <span className="material-symbols-rounded">delete</span>,
+        icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removePages.title", "Remove Pages"),
         component: null,
         view: "remove",
         description: t("home.removePages.desc", "Remove specific pages from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-blank-pages": {
-        icon: <span className="material-symbols-rounded">scan_delete</span>,
+        icon: <LocalIcon icon="scan-delete-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeBlanks.title", "Remove Blank Pages"),
         component: null,
         view: "remove",
         description: t("home.removeBlanks.desc", "Remove blank pages from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-annotations": {
-        icon: <span className="material-symbols-rounded">thread_unread</span>,
+        icon: <LocalIcon icon="thread-unread-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeAnnotations.title", "Remove Annotations"),
         component: null,
         view: "remove",
         description: t("home.removeAnnotations.desc", "Remove annotations and comments from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-image": {
-        icon: <span className="material-symbols-rounded">remove_selection</span>,
+        icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeImagePdf.title", "Remove Image"),
         component: null,
         view: "format",
         description: t("home.removeImagePdf.desc", "Remove images from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-password": {
-        icon: <span className="material-symbols-rounded">lock_open_right</span>,
+        icon: <LocalIcon icon="lock-open-right-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removePassword.title", "Remove Password"),
         component: RemovePassword,
         view: "security",
         description: t("home.removePassword.desc", "Remove password protection from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL,
         endpoints: ["remove-password"],
         maxFiles: -1,
-
+        operationConfig: removePasswordOperationConfig,
+        settingsComponent: RemovePasswordSettings
     },
     "remove-certificate-sign": {
-        icon: <span className="material-symbols-rounded">remove_moderator</span>,
+        icon: <LocalIcon icon="remove-moderator-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeCertSign.title", "Remove Certificate Sign"),
         component: RemoveCertificateSign,
         view: "security",
         description: t("home.removeCertSign.desc", "Remove digital signature from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL,
         maxFiles: -1,
-        endpoints: ["remove-certificate-sign"]
+        endpoints: ["remove-certificate-sign"],
+        operationConfig: removeCertificateSignOperationConfig
     },
 
 
     // Automation
 
     "automate": {
-        icon: <span className="material-symbols-rounded">automation</span>,
+        icon: <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />,
         name: t("home.automate.title", "Automate"),
-        component: null,
+        component: React.lazy(() => import('../tools/Automate')),
         view: "format",
         description: t("home.automate.desc", "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION,
+        maxFiles: -1,
+        endpoints: ["handleData"]
     },
     "auto-rename-pdf-file": {
-        icon: <span className="material-symbols-rounded">match_word</span>,
+        icon: <LocalIcon icon="match-word-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.auto-rename.title", "Auto Rename PDF File"),
         component: null,
         view: "format",
         description: t("home.auto-rename.desc", "Automatically rename PDF files based on their content"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-pages": {
-        icon: <span className="material-symbols-rounded">split_scene_right</span>,
+        icon: <LocalIcon icon="split-scene-right-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.autoSplitPDF.title", "Auto Split Pages"),
         component: null,
         view: "format",
         description: t("home.autoSplitPDF.desc", "Automatically split PDF pages based on content detection"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-by-size-count": {
-        icon: <span className="material-symbols-rounded">content_cut</span>,
+        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.autoSizeSplitPDF.title", "Auto Split by Size/Count"),
         component: null,
         view: "format",
         description: t("home.autoSizeSplitPDF.desc", "Automatically split PDFs by file size or page count"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
 
 
     // Advanced Formatting
 
     "adjustContrast": {
-        icon: <span className="material-symbols-rounded">palette</span>,
+        icon: <LocalIcon icon="palette" width="1.5rem" height="1.5rem" />,
         name: t("home.adjustContrast.title", "Adjust Colors/Contrast"),
         component: null,
         view: "format",
         description: t("home.adjustContrast.desc", "Adjust colors and contrast of PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "repair": {
-        icon: <span className="material-symbols-rounded">build</span>,
+        icon: <LocalIcon icon="build-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.repair.title", "Repair"),
         component: Repair,
         view: "format",
         description: t("home.repair.desc", "Repair corrupted or damaged PDF files"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
         maxFiles: -1,
-        endpoints: ["repair"]
+        endpoints: ["repair"],
+        operationConfig: repairOperationConfig,
+        settingsComponent: RepairSettings
     },
     "detect-split-scanned-photos": {
-        icon: <span className="material-symbols-rounded">scanner</span>,
+        icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.ScannerImageSplit.title", "Detect & Split Scanned Photos"),
         component: null,
         view: "format",
         description: t("home.ScannerImageSplit.desc", "Detect and split scanned photos into separate pages"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "overlay-pdfs": {
-        icon: <span className="material-symbols-rounded">layers</span>,
+        icon: <LocalIcon icon="layers-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.overlay-pdfs.title", "Overlay PDFs"),
         component: null,
         view: "format",
         description: t("home.overlay-pdfs.desc", "Overlay one PDF on top of another"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "replace-and-invert-color": {
-        icon: <span className="material-symbols-rounded">format_color_fill</span>,
+        icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.replaceColorPdf.title", "Replace & Invert Color"),
         component: null,
         view: "format",
         description: t("home.replaceColorPdf.desc", "Replace or invert colors in PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "add-image": {
-        icon: <span className="material-symbols-rounded">image</span>,
+        icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addImage.title", "Add Image"),
         component: null,
         view: "format",
         description: t("home.addImage.desc", "Add images to PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "edit-table-of-contents": {
-        icon: <span className="material-symbols-rounded">bookmark_add</span>,
+        icon: <LocalIcon icon="bookmark-add-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.editTableOfContents.title", "Edit Table of Contents"),
         component: null,
         view: "format",
         description: t("home.editTableOfContents.desc", "Add or edit bookmarks and table of contents in PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "scanner-effect": {
-        icon: <span className="material-symbols-rounded">scanner</span>,
+        icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.fakeScan.title", "Scanner Effect"),
         component: null,
         view: "format",
         description: t("home.fakeScan.desc", "Create a PDF that looks like it was scanned"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
 
 
     // Developer Tools
 
     "show-javascript": {
-        icon: <span className="material-symbols-rounded">javascript</span>,
+        icon: <LocalIcon icon="javascript-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.showJS.title", "Show JavaScript"),
         component: null,
         view: "extract",
         description: t("home.showJS.desc", "Extract and display JavaScript code from PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS
     },
     "dev-api": {
-        icon: <span className="material-symbols-rounded" style={{ color: '#2F7BF6' }}>open_in_new</span>,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devApi.title", "API"),
         component: null,
         view: "external",
         description: t("home.devApi.desc", "Link to API documentation"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html"
     },
     "dev-folder-scanning": {
-        icon: <span className="material-symbols-rounded" style={{ color: '#2F7BF6' }}>open_in_new</span>,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devFolderScanning.title", "Automated Folder Scanning"),
         component: null,
         view: "external",
         description: t("home.devFolderScanning.desc", "Link to automated folder scanning guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Folder%20Scanning/"
     },
     "dev-sso-guide": {
-        icon: <span className="material-symbols-rounded" style={{ color: '#2F7BF6' }}>open_in_new</span>,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devSsoGuide.title", "SSO Guide"),
         component: null,
         view: "external",
         description: t("home.devSsoGuide.desc", "Link to SSO guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Single%20Sign-On%20Configuration",
     },
     "dev-airgapped": {
-        icon: <span className="material-symbols-rounded" style={{ color: '#2F7BF6' }}>open_in_new</span>,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devAirgapped.title", "Air-gapped Setup"),
         component: null,
         view: "external",
         description: t("home.devAirgapped.desc", "Link to air-gapped setup guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Pro/#activation"
     },
 
 
     // Recommended Tools
     "compare": {
-        icon: <span className="material-symbols-rounded">compare</span>,
+        icon: <LocalIcon icon="compare-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.compare.title", "Compare"),
         component: null,
         view: "format",
         description: t("home.compare.desc", "Compare two PDF documents and highlight differences"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL
     },
     "compress": {
-        icon: <span className="material-symbols-rounded">zoom_in_map</span>,
+        icon: <LocalIcon icon="zoom-in-map-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.compress.title", "Compress"),
         component: CompressPdfPanel,
         view: "compress",
         description: t("home.compress.desc", "Compress PDFs to reduce their file size."),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
-        maxFiles: -1
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
+        maxFiles: -1,
+        operationConfig: compressOperationConfig,
+        settingsComponent: CompressSettings
     },
     "convert": {
-        icon: <span className="material-symbols-rounded">sync_alt</span>,
+        icon: <LocalIcon icon="sync-alt-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.convert.title", "Convert"),
         component: ConvertPanel,
         view: "convert",
         description: t("home.convert.desc", "Convert files to and from PDF format"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
         endpoints: [
             "pdf-to-img",
@@ -575,58 +622,63 @@ export function useFlatToolRegistry(): ToolRegistry {
             "zip",
             // Other
             "dbf", "fods", "vsd", "vor", "vor3", "vor4", "uop", "pct", "ps", "pdf"
-        ]
+        ],
+        operationConfig: convertOperationConfig,
+        settingsComponent: ConvertSettings
     },
     "mergePdfs": {
-        icon: <span className="material-symbols-rounded">library_add</span>,
+        icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.merge.title", "Merge"),
         component: null,
         view: "merge",
         description: t("home.merge.desc", "Merge multiple PDFs into a single document"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "multi-tool": {
-        icon: <span className="material-symbols-rounded">dashboard_customize</span>,
+        icon: <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.multiTool.title", "Multi-Tool"),
         component: null,
         view: "pageEditor",
         description: t("home.multiTool.desc", "Use multiple tools on a single PDF document"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "ocr": {
-        icon: <span className="material-symbols-rounded">quick_reference_all</span>,
+        icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.ocr.title", "OCR"),
         component: OCRPanel,
         view: "convert",
         description: t("home.ocr.desc", "Extract text from scanned PDFs using Optical Character Recognition"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
-        maxFiles: -1
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
+        maxFiles: -1,
+        operationConfig: ocrOperationConfig,
+        settingsComponent: OCRSettings
     },
     "redact": {
-        icon: <span className="material-symbols-rounded">visibility_off</span>,
+        icon: <LocalIcon icon="visibility-off-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.redact.title", "Redact"),
         component: null,
         view: "redact",
         description: t("home.redact.desc", "Permanently remove sensitive information from PDF documents"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL
     },
   };
 
-  if (showPlaceholderTools) {
-    return allTools;
-  } else {
-    const filteredTools = Object.keys(allTools)
-      .filter(key => allTools[key].component !== null || allTools[key].link)
-      .reduce((obj, key) => {
-        obj[key] = allTools[key];
-        return obj;
-      }, {} as ToolRegistry);
-    return filteredTools;
-  }
+    if (showPlaceholderTools) {
+      return allTools;
+    } else {
+      const filteredTools = Object.keys(allTools)
+        .filter(key => allTools[key].component !== null || allTools[key].link)
+        .reduce((obj, key) => {
+          obj[key] = allTools[key];
+          return obj;
+        }, {} as ToolRegistry);
+      return filteredTools;
+    }
+  }, [t]); // Only re-compute when translations change
 }
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index eb4b5d6c2..5511059a8 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -4,4 +4,15 @@ declare module "../components/PageEditor";
 declare module "../components/Viewer";
 declare module "*.js";
 declare module '*.module.css';
-declare module 'pdfjs-dist';
\ No newline at end of file
+declare module 'pdfjs-dist';
+
+// Auto-generated icon set JSON import
+declare module '../assets/material-symbols-icons.json' {
+  const value: {
+    prefix: string;
+    icons: Record<string, any>;
+    width?: number;
+    height?: number;
+  };
+  export default value;
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts b/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts
index 747cd67b7..7e6032214 100644
--- a/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts
+++ b/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.test.ts
@@ -26,7 +26,7 @@ import { ToolOperationConfig, ToolOperationHook, useToolOperation } from '../sha
 describe('useAddPasswordOperation', () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
-  const getToolConfig = (): ToolOperationConfig<AddPasswordFullParameters> => mockUseToolOperation.mock.calls[0][0];
+  const getToolConfig = (): ToolOperationConfig<AddPasswordFullParameters> => mockUseToolOperation.mock.calls[0][0] as ToolOperationConfig<AddPasswordFullParameters>;
 
   const mockToolOperationReturn: ToolOperationHook<unknown> = {
     files: [],
diff --git a/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.ts b/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.ts
index d94b9650e..bd2f2176c 100644
--- a/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.ts
+++ b/frontend/src/hooks/tools/addPassword/useAddPasswordOperation.ts
@@ -1,30 +1,45 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { AddPasswordFullParameters } from './useAddPasswordParameters';
+import { AddPasswordFullParameters, defaultParameters } from './useAddPasswordParameters';
+import { defaultParameters as permissionsDefaults } from '../changePermissions/useChangePermissionsParameters';
 import { getFormData } from '../changePermissions/useChangePermissionsOperation';
 
+// Static function that can be used by both the hook and automation executor
+export const buildAddPasswordFormData = (parameters: AddPasswordFullParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  formData.append("password", parameters.password);
+  formData.append("ownerPassword", parameters.ownerPassword);
+  formData.append("keyLength", parameters.keyLength.toString());
+  getFormData(parameters.permissions).forEach(([key, value]) => {
+    formData.append(key, value);
+  });
+  return formData;
+};
+
+// Full default parameters including permissions for automation
+const fullDefaultParameters: AddPasswordFullParameters = {
+  ...defaultParameters,
+  permissions: permissionsDefaults,
+};
+
+// Static configuration object
+export const addPasswordOperationConfig = {
+  operationType: 'addPassword',
+  endpoint: '/api/v1/security/add-password',
+  buildFormData: buildAddPasswordFormData,
+  filePrefix: 'encrypted_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters: fullDefaultParameters,
+} as const;
+
 export const useAddPasswordOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: AddPasswordFullParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    formData.append("password", parameters.password);
-    formData.append("ownerPassword", parameters.ownerPassword);
-    formData.append("keyLength", parameters.keyLength.toString());
-    getFormData(parameters.permissions).forEach(([key, value]) => {
-      formData.append(key, value);
-    });
-    return formData;
-  };
-
   return useToolOperation<AddPasswordFullParameters>({
-    operationType: 'addPassword',
-    endpoint: '/api/v1/security/add-password',
-    buildFormData,
+    ...addPasswordOperationConfig,
     filePrefix: t('addPassword.filenamePrefix', 'encrypted') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('addPassword.error.failed', 'An error occurred while encrypting the PDF.'))
   });
 };
diff --git a/frontend/src/hooks/tools/addWatermark/useAddWatermarkOperation.ts b/frontend/src/hooks/tools/addWatermark/useAddWatermarkOperation.ts
index a5f28bc06..5c07ee6e7 100644
--- a/frontend/src/hooks/tools/addWatermark/useAddWatermarkOperation.ts
+++ b/frontend/src/hooks/tools/addWatermark/useAddWatermarkOperation.ts
@@ -1,9 +1,10 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { AddWatermarkParameters } from './useAddWatermarkParameters';
+import { AddWatermarkParameters, defaultParameters } from './useAddWatermarkParameters';
 
-const buildFormData = (parameters: AddWatermarkParameters, file: File): FormData => {
+// Static function that can be used by both the hook and automation executor
+export const buildAddWatermarkFormData = (parameters: AddWatermarkParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append("fileInput", file);
 
@@ -32,15 +33,22 @@ const buildFormData = (parameters: AddWatermarkParameters, file: File): FormData
   return formData;
 };
 
+// Static configuration object
+export const addWatermarkOperationConfig = {
+  operationType: 'watermark',
+  endpoint: '/api/v1/security/add-watermark',
+  buildFormData: buildAddWatermarkFormData,
+  filePrefix: 'watermarked_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
+
 export const useAddWatermarkOperation = () => {
   const { t } = useTranslation();
 
   return useToolOperation<AddWatermarkParameters>({
-    operationType: 'watermark',
-    endpoint: '/api/v1/security/add-watermark',
-    buildFormData,
+    ...addWatermarkOperationConfig,
     filePrefix: t('watermark.filenamePrefix', 'watermarked') + '_',
-    multiFileEndpoint: false, // Individual API calls per file
     getErrorMessage: createStandardErrorHandler(t('watermark.error.failed', 'An error occurred while adding watermark to the PDF.'))
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts b/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
index a7cb23430..5b9a25da6 100644
--- a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
+++ b/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
@@ -46,3 +46,4 @@ export const useAddWatermarkParameters = (): AddWatermarkParametersHook => {
     },
   });
 };
+
diff --git a/frontend/src/hooks/tools/automate/useAutomateOperation.ts b/frontend/src/hooks/tools/automate/useAutomateOperation.ts
new file mode 100644
index 000000000..f1aeaf900
--- /dev/null
+++ b/frontend/src/hooks/tools/automate/useAutomateOperation.ts
@@ -0,0 +1,49 @@
+import { useToolOperation } from '../shared/useToolOperation';
+import { useCallback } from 'react';
+import { executeAutomationSequence } from '../../../utils/automationExecutor';
+import { useFlatToolRegistry } from '../../../data/useTranslatedToolRegistry';
+import { AutomateParameters } from '../../../types/automation';
+import { AUTOMATION_CONSTANTS } from '../../../constants/automation';
+
+export function useAutomateOperation() {
+  const toolRegistry = useFlatToolRegistry();
+
+  const customProcessor = useCallback(async (params: AutomateParameters, files: File[]) => {
+    console.log('🚀 Starting automation execution via customProcessor', { params, files });
+    
+    if (!params.automationConfig) {
+      throw new Error('No automation configuration provided');
+    }
+
+    // Execute the automation sequence and return the final results
+    const finalResults = await executeAutomationSequence(
+      params.automationConfig!,
+      files,
+      toolRegistry,
+      (stepIndex: number, operationName: string) => {
+        console.log(`Step ${stepIndex + 1} started: ${operationName}`);
+        params.onStepStart?.(stepIndex, operationName);
+      },
+      (stepIndex: number, resultFiles: File[]) => {
+        console.log(`Step ${stepIndex + 1} completed with ${resultFiles.length} files`);
+        params.onStepComplete?.(stepIndex, resultFiles);
+      },
+      (stepIndex: number, error: string) => {
+        console.error(`Step ${stepIndex + 1} failed:`, error);
+        params.onStepError?.(stepIndex, error);
+        throw new Error(`Automation step ${stepIndex + 1} failed: ${error}`);
+      }
+    );
+
+    console.log(`✅ Automation completed, returning ${finalResults.length} files`);
+    return finalResults;
+  }, [toolRegistry]);
+
+  return useToolOperation<AutomateParameters>({
+    operationType: 'automate',
+    endpoint: '/api/v1/pipeline/handleData', // Not used with customProcessor
+    buildFormData: () => new FormData(), // Not used with customProcessor
+    customProcessor,
+    filePrefix: AUTOMATION_CONSTANTS.FILE_PREFIX
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/automate/useAutomationForm.ts b/frontend/src/hooks/tools/automate/useAutomationForm.ts
new file mode 100644
index 000000000..11464a329
--- /dev/null
+++ b/frontend/src/hooks/tools/automate/useAutomationForm.ts
@@ -0,0 +1,114 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AutomationTool, AutomationConfig, AutomationMode } from '../../../types/automation';
+import { AUTOMATION_CONSTANTS } from '../../../constants/automation';
+import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
+
+interface UseAutomationFormProps {
+  mode: AutomationMode;
+  existingAutomation?: AutomationConfig;
+  toolRegistry: Record<string, ToolRegistryEntry>;
+}
+
+export function useAutomationForm({ mode, existingAutomation, toolRegistry }: UseAutomationFormProps) {
+  const { t } = useTranslation();
+  
+  const [automationName, setAutomationName] = useState('');
+  const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]);
+
+  const getToolName = (operation: string) => {
+    const tool = toolRegistry?.[operation] as any;
+    return tool?.name || t(`tools.${operation}.name`, operation);
+  };
+
+  const getToolDefaultParameters = (operation: string): Record<string, any> => {
+    const config = toolRegistry[operation]?.operationConfig;
+    if (config?.defaultParameters) {
+      return { ...config.defaultParameters };
+    }
+    return {};
+  };
+
+  // Initialize based on mode and existing automation
+  useEffect(() => {
+    if ((mode === AutomationMode.SUGGESTED || mode === AutomationMode.EDIT) && existingAutomation) {
+      setAutomationName(existingAutomation.name || '');
+
+      const operations = existingAutomation.operations || [];
+      const tools = operations.map((op, index) => {
+        const operation = typeof op === 'string' ? op : op.operation;
+        return {
+          id: `${operation}-${Date.now()}-${index}`,
+          operation: operation,
+          name: getToolName(operation),
+          configured: mode === AutomationMode.EDIT ? true : false,
+          parameters: typeof op === 'object' ? op.parameters || {} : {}
+        };
+      });
+
+      setSelectedTools(tools);
+    } else if (mode === AutomationMode.CREATE && selectedTools.length === 0) {
+      // Initialize with default empty tools for new automation
+      const defaultTools = Array.from({ length: AUTOMATION_CONSTANTS.DEFAULT_TOOL_COUNT }, (_, index) => ({
+        id: `tool-${index + 1}-${Date.now()}`,
+        operation: '',
+        name: t('automate.creation.tools.selectTool', 'Select a tool...'),
+        configured: false,
+        parameters: {}
+      }));
+      setSelectedTools(defaultTools);
+    }
+  }, [mode, existingAutomation, selectedTools.length, t, getToolName]);
+
+  const addTool = (operation: string) => {
+    const newTool: AutomationTool = {
+      id: `${operation}-${Date.now()}`,
+      operation,
+      name: getToolName(operation),
+      configured: false,
+      parameters: getToolDefaultParameters(operation)
+    };
+
+    setSelectedTools([...selectedTools, newTool]);
+  };
+
+  const removeTool = (index: number) => {
+    if (selectedTools.length <= AUTOMATION_CONSTANTS.MIN_TOOL_COUNT) return;
+    setSelectedTools(selectedTools.filter((_, i) => i !== index));
+  };
+
+  const updateTool = (index: number, updates: Partial<AutomationTool>) => {
+    const updatedTools = [...selectedTools];
+    updatedTools[index] = { ...updatedTools[index], ...updates };
+    setSelectedTools(updatedTools);
+  };
+
+  const hasUnsavedChanges = () => {
+    return (
+      automationName.trim() !== '' ||
+      selectedTools.some(tool => tool.operation !== '' || tool.configured)
+    );
+  };
+
+  const canSaveAutomation = () => {
+    return (
+      automationName.trim() !== '' &&
+      selectedTools.length > 0 &&
+      selectedTools.every(tool => tool.configured && tool.operation !== '')
+    );
+  };
+
+  return {
+    automationName,
+    setAutomationName,
+    selectedTools,
+    setSelectedTools,
+    addTool,
+    removeTool,
+    updateTool,
+    hasUnsavedChanges,
+    canSaveAutomation,
+    getToolName,
+    getToolDefaultParameters
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/automate/useSavedAutomations.ts b/frontend/src/hooks/tools/automate/useSavedAutomations.ts
new file mode 100644
index 000000000..c52e4c784
--- /dev/null
+++ b/frontend/src/hooks/tools/automate/useSavedAutomations.ts
@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback } from 'react';
+import { AutomationConfig } from '../../../services/automationStorage';
+
+export interface SavedAutomation extends AutomationConfig {}
+
+export function useSavedAutomations() {
+  const [savedAutomations, setSavedAutomations] = useState<SavedAutomation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadSavedAutomations = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const { automationStorage } = await import('../../../services/automationStorage');
+      const automations = await automationStorage.getAllAutomations();
+      setSavedAutomations(automations);
+    } catch (err) {
+      console.error('Error loading saved automations:', err);
+      setError(err as Error);
+      setSavedAutomations([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refreshAutomations = useCallback(() => {
+    loadSavedAutomations();
+  }, [loadSavedAutomations]);
+
+  const deleteAutomation = useCallback(async (id: string) => {
+    try {
+      const { automationStorage } = await import('../../../services/automationStorage');
+      await automationStorage.deleteAutomation(id);
+      // Refresh the list after deletion
+      refreshAutomations();
+    } catch (err) {
+      console.error('Error deleting automation:', err);
+      throw err;
+    }
+  }, [refreshAutomations]);
+
+  // Load automations on mount
+  useEffect(() => {
+    loadSavedAutomations();
+  }, [loadSavedAutomations]);
+
+  return {
+    savedAutomations,
+    loading,
+    error,
+    refreshAutomations,
+    deleteAutomation
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
new file mode 100644
index 000000000..006c9f179
--- /dev/null
+++ b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
@@ -0,0 +1,142 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+import LocalIcon from '../../../components/shared/LocalIcon';
+import { SuggestedAutomation } from '../../../types/automation';
+
+// Create icon components
+const CompressIcon = () => React.createElement(LocalIcon, { icon: 'compress', width: '1.5rem', height: '1.5rem' });
+const TextFieldsIcon = () => React.createElement(LocalIcon, { icon: 'text-fields', width: '1.5rem', height: '1.5rem' });
+const SecurityIcon = () => React.createElement(LocalIcon, { icon: 'security', width: '1.5rem', height: '1.5rem' });
+const StarIcon = () => React.createElement(LocalIcon, { icon: 'star', width: '1.5rem', height: '1.5rem' });
+
+export function useSuggestedAutomations(): SuggestedAutomation[] {
+  const { t } = useTranslation();
+
+  const suggestedAutomations = useMemo<SuggestedAutomation[]>(() => {
+    const now = new Date().toISOString();
+    return [
+      {
+        id: "compress-and-split",
+        name: t("automation.suggested.compressAndSplit", "Compress & Split"),
+        description: t("automation.suggested.compressAndSplitDesc", "Compress PDFs and split them by pages"),
+        operations: [
+          {
+            operation: "compress",
+            parameters: {
+              compressionLevel: 5,
+              grayscale: false,
+              expectedSize: '',
+              compressionMethod: 'quality',
+              fileSizeValue: '',
+              fileSizeUnit: 'MB',
+            }
+          },
+          {
+            operation: "splitPdf",
+            parameters: {
+              mode: 'bySizeOrCount',
+              pages: '1',
+              hDiv: '2',
+              vDiv: '2',
+              merge: false,
+              splitType: 'pages',
+              splitValue: '1',
+              bookmarkLevel: '1',
+              includeMetadata: false,
+              allowDuplicates: false,
+            }
+          }
+        ],
+        createdAt: now,
+        updatedAt: now,
+        icon: CompressIcon,
+      },
+      {
+        id: "ocr-workflow",
+        name: t("automation.suggested.ocrWorkflow", "OCR Processing"),
+        description: t("automation.suggested.ocrWorkflowDesc", "Extract text from PDFs using OCR technology"),
+        operations: [
+          {
+            operation: "ocr",
+            parameters: {
+              languages: ['eng'],
+              ocrType: 'skip-text',
+              ocrRenderType: 'hocr',
+              additionalOptions: [],
+            }
+          }
+        ],
+        createdAt: now,
+        updatedAt: now,
+        icon: TextFieldsIcon,
+      },
+      {
+        id: "secure-workflow",
+        name: t("automation.suggested.secureWorkflow", "Security Workflow"),
+        description: t("automation.suggested.secureWorkflowDesc", "Sanitize PDFs and add password protection"),
+        operations: [
+          {
+            operation: "sanitize",
+            parameters: {
+              removeJavaScript: true,
+              removeEmbeddedFiles: true,
+              removeXMPMetadata: false,
+              removeMetadata: false,
+              removeLinks: false,
+              removeFonts: false,
+            }
+          },
+          {
+            operation: "addPassword",
+            parameters: {
+              password: 'password',
+              ownerPassword: '',
+              keyLength: 128,
+              permissions: {
+                preventAssembly: false,
+                preventExtractContent: false,
+                preventExtractForAccessibility: false,
+                preventFillInForm: false,
+                preventModify: false,
+                preventModifyAnnotations: false,
+                preventPrinting: false,
+                preventPrintingFaithful: false,
+              }
+            }
+          }
+        ],
+        createdAt: now,
+        updatedAt: now,
+        icon: SecurityIcon,
+      },
+      {
+        id: "optimization-workflow",
+        name: t("automation.suggested.optimizationWorkflow", "Optimization Workflow"),
+        description: t("automation.suggested.optimizationWorkflowDesc", "Repair and compress PDFs for better performance"),
+        operations: [
+          {
+            operation: "repair",
+            parameters: {}
+          },
+          {
+            operation: "compress",
+            parameters: {
+              compressionLevel: 7,
+              grayscale: false,
+              expectedSize: '',
+              compressionMethod: 'quality',
+              fileSizeValue: '',
+              fileSizeUnit: 'MB',
+            }
+          }
+        ],
+        createdAt: now,
+        updatedAt: now,
+        icon: StarIcon,
+      },
+    ];
+  }, [t]);
+
+  return suggestedAutomations;
+}
diff --git a/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts b/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
index 845403841..4ffd9b45c 100644
--- a/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
+++ b/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
@@ -25,7 +25,7 @@ import { ToolOperationConfig, ToolOperationHook, useToolOperation } from '../sha
 describe('useChangePermissionsOperation', () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
-  const getToolConfig = (): ToolOperationConfig<ChangePermissionsParameters> => mockUseToolOperation.mock.calls[0][0];
+  const getToolConfig = (): ToolOperationConfig<ChangePermissionsParameters> => mockUseToolOperation.mock.calls[0][0] as ToolOperationConfig<ChangePermissionsParameters>;
 
   const mockToolOperationReturn: ToolOperationHook<unknown> = {
     files: [],
@@ -109,7 +109,7 @@ describe('useChangePermissionsOperation', () => {
     { property: 'multiFileEndpoint' as const, expectedValue: false },
     { property: 'endpoint' as const, expectedValue: '/api/v1/security/add-password' },
     { property: 'filePrefix' as const, expectedValue: 'permissions_' },
-    { property: 'operationType' as const, expectedValue: 'changePermissions' }
+    { property: 'operationType' as const, expectedValue: 'change-permissions' }
   ])('should configure $property correctly', ({ property, expectedValue }) => {
     renderHook(() => useChangePermissionsOperation());
 
diff --git a/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.ts b/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.ts
index 664a423ff..ee28d5381 100644
--- a/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.ts
+++ b/frontend/src/hooks/tools/changePermissions/useChangePermissionsOperation.ts
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import type { ChangePermissionsParameters } from './useChangePermissionsParameters';
+import { ChangePermissionsParameters, defaultParameters } from './useChangePermissionsParameters';
 
 export const getFormData = ((parameters: ChangePermissionsParameters) =>
   Object.entries(parameters).map(([key, value]) =>
@@ -9,27 +9,34 @@ export const getFormData = ((parameters: ChangePermissionsParameters) =>
   ) as string[][]
 );
 
+// Static function that can be used by both the hook and automation executor
+export const buildChangePermissionsFormData = (parameters: ChangePermissionsParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+
+  // Add all permission parameters
+  getFormData(parameters).forEach(([key, value]) => {
+    formData.append(key, value);
+  });
+
+  return formData;
+};
+
+// Static configuration object
+export const changePermissionsOperationConfig = {
+  operationType: 'change-permissions',
+  endpoint: '/api/v1/security/add-password', // Change Permissions is a fake endpoint for the Add Password tool
+  buildFormData: buildChangePermissionsFormData,
+  filePrefix: 'permissions_',
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
+
 export const useChangePermissionsOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: ChangePermissionsParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-
-    // Add all permission parameters
-    getFormData(parameters).forEach(([key, value]) => {
-      formData.append(key, value);
-    });
-
-    return formData;
-  };
-
   return useToolOperation({
-    operationType: 'changePermissions',
-    endpoint: '/api/v1/security/add-password', // Change Permissions is a fake endpoint for the Add Password tool
-    buildFormData,
-    filePrefix: 'permissions_',
-    multiFileEndpoint: false,
+    ...changePermissionsOperationConfig,
     getErrorMessage: createStandardErrorHandler(
       t('changePermissions.error.failed', 'An error occurred while changing PDF permissions.')
     )
diff --git a/frontend/src/hooks/tools/compress/useCompressOperation.ts b/frontend/src/hooks/tools/compress/useCompressOperation.ts
index c93d4b9e7..08d73859e 100644
--- a/frontend/src/hooks/tools/compress/useCompressOperation.ts
+++ b/frontend/src/hooks/tools/compress/useCompressOperation.ts
@@ -1,9 +1,10 @@
 import { useTranslation } from 'react-i18next';
-import { useToolOperation } from '../shared/useToolOperation';
+import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { CompressParameters } from './useCompressParameters';
+import { CompressParameters, defaultParameters } from './useCompressParameters';
 
-const buildFormData = (parameters: CompressParameters, file: File): FormData => {
+// Static configuration that can be used by both the hook and automation executor
+export const buildCompressFormData = (parameters: CompressParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append("fileInput", file);
 
@@ -21,15 +22,21 @@ const buildFormData = (parameters: CompressParameters, file: File): FormData =>
   return formData;
 };
 
+// Static configuration object
+export const compressOperationConfig = {
+  operationType: 'compress',
+  endpoint: '/api/v1/misc/compress-pdf',
+  buildFormData: buildCompressFormData,
+  filePrefix: 'compressed_',
+  multiFileEndpoint: false, // Individual API calls per file
+  defaultParameters,
+} as const;
+
 export const useCompressOperation = () => {
   const { t } = useTranslation();
 
   return useToolOperation<CompressParameters>({
-    operationType: 'compress',
-    endpoint: '/api/v1/misc/compress-pdf',
-    buildFormData,
-    filePrefix: 'compressed_',
-    multiFileEndpoint: false, // Individual API calls per file
+    ...compressOperationConfig,
     getErrorMessage: createStandardErrorHandler(t('compress.error.failed', 'An error occurred while compressing the PDF.'))
   });
 };
diff --git a/frontend/src/hooks/tools/compress/useCompressParameters.ts b/frontend/src/hooks/tools/compress/useCompressParameters.ts
index b423bdbec..d551dc292 100644
--- a/frontend/src/hooks/tools/compress/useCompressParameters.ts
+++ b/frontend/src/hooks/tools/compress/useCompressParameters.ts
@@ -10,7 +10,7 @@ export interface CompressParameters extends BaseParameters {
   fileSizeUnit: 'KB' | 'MB';
 }
 
-const defaultParameters: CompressParameters = {
+export const defaultParameters: CompressParameters = {
   compressionLevel: 5,
   grayscale: false,
   expectedSize: '',
diff --git a/frontend/src/hooks/tools/convert/useConvertOperation.ts b/frontend/src/hooks/tools/convert/useConvertOperation.ts
index f14302aaa..28b854d4b 100644
--- a/frontend/src/hooks/tools/convert/useConvertOperation.ts
+++ b/frontend/src/hooks/tools/convert/useConvertOperation.ts
@@ -1,13 +1,14 @@
 import { useCallback } from 'react';
 import axios from 'axios';
 import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from './useConvertParameters';
+import { ConvertParameters, defaultParameters } from './useConvertParameters';
 import { detectFileExtension } from '../../../utils/fileUtils';
 import { createFileFromApiResponse } from '../../../utils/fileResponseUtils';
 import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
 import { getEndpointUrl, isImageFormat, isWebFormat } from '../../../utils/convertUtils';
 
-const shouldProcessFilesSeparately = (
+// Static function that can be used by both the hook and automation executor
+export const shouldProcessFilesSeparately = (
   selectedFiles: File[],
   parameters: ConvertParameters
 ): boolean => {
@@ -29,7 +30,8 @@ const shouldProcessFilesSeparately = (
   );
 };
 
-const buildFormData = (parameters: ConvertParameters, selectedFiles: File[]): FormData => {
+// Static function that can be used by both the hook and automation executor
+export const buildConvertFormData = (parameters: ConvertParameters, selectedFiles: File[]): FormData => {
   const formData = new FormData();
 
   selectedFiles.forEach(file => {
@@ -69,7 +71,8 @@ const buildFormData = (parameters: ConvertParameters, selectedFiles: File[]): Fo
   return formData;
 };
 
-const createFileFromResponse = (
+// Static function that can be used by both the hook and automation executor
+export const createFileFromResponse = (
   responseData: any,
   headers: any,
   originalFileName: string,
@@ -81,6 +84,59 @@ const createFileFromResponse = (
   return createFileFromApiResponse(responseData, headers, fallbackFilename);
 };
 
+// Static processor that can be used by both the hook and automation executor
+export const convertProcessor = async (
+  parameters: ConvertParameters,
+  selectedFiles: File[]
+): Promise<File[]> => {
+  const processedFiles: File[] = [];
+  const endpoint = getEndpointUrl(parameters.fromExtension, parameters.toExtension);
+
+  if (!endpoint) {
+    throw new Error('Unsupported conversion format');
+  }
+
+  // Convert-specific routing logic: decide batch vs individual processing
+  if (shouldProcessFilesSeparately(selectedFiles, parameters)) {
+    // Individual processing for complex cases (PDF→image, smart detection, etc.)
+    for (const file of selectedFiles) {
+      try {
+        const formData = buildConvertFormData(parameters, [file]);
+        const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+
+        const convertedFile = createFileFromResponse(response.data, response.headers, file.name, parameters.toExtension);
+
+        processedFiles.push(convertedFile);
+      } catch (error) {
+        console.warn(`Failed to convert file ${file.name}:`, error);
+      }
+    }
+  } else {
+    // Batch processing for simple cases (image→PDF combine)
+    const formData = buildConvertFormData(parameters, selectedFiles);
+    const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+
+    const baseFilename = selectedFiles.length === 1
+      ? selectedFiles[0].name
+      : 'converted_files';
+
+    const convertedFile = createFileFromResponse(response.data, response.headers, baseFilename, parameters.toExtension);
+    processedFiles.push(convertedFile);
+  }
+
+  return processedFiles;
+};
+
+// Static configuration object
+export const convertOperationConfig = {
+  operationType: 'convert',
+  endpoint: '', // Not used with customProcessor but required
+  buildFormData: buildConvertFormData, // Not used with customProcessor but required
+  filePrefix: 'converted_',
+  customProcessor: convertProcessor,
+  defaultParameters,
+} as const;
+
 export const useConvertOperation = () => {
   const { t } = useTranslation();
 
@@ -88,52 +144,12 @@ export const useConvertOperation = () => {
     parameters: ConvertParameters,
     selectedFiles: File[]
   ): Promise<File[]> => {
-
-    const processedFiles: File[] = [];
-    const endpoint = getEndpointUrl(parameters.fromExtension, parameters.toExtension);
-
-    if (!endpoint) {
-      throw new Error(t('errorNotSupported', 'Unsupported conversion format'));
-    }
-
-    // Convert-specific routing logic: decide batch vs individual processing
-    if (shouldProcessFilesSeparately(selectedFiles, parameters)) {
-      // Individual processing for complex cases (PDF→image, smart detection, etc.)
-      for (const file of selectedFiles) {
-        try {
-          const formData = buildFormData(parameters, [file]);
-          const response = await axios.post(endpoint, formData, { responseType: 'blob' });
-
-          const convertedFile = createFileFromResponse(response.data, response.headers, file.name, parameters.toExtension);
-
-          processedFiles.push(convertedFile);
-        } catch (error) {
-          console.warn(`Failed to convert file ${file.name}:`, error);
-        }
-      }
-    } else {
-      // Batch processing for simple cases (image→PDF combine)
-      const formData = buildFormData(parameters, selectedFiles);
-      const response = await axios.post(endpoint, formData, { responseType: 'blob' });
-
-      const baseFilename = selectedFiles.length === 1
-        ? selectedFiles[0].name
-        : 'converted_files';
-
-      const convertedFile = createFileFromResponse(response.data, response.headers, baseFilename, parameters.toExtension);
-      processedFiles.push(convertedFile);
-
-    }
-
-    return processedFiles;
-  }, [t]);
+    return convertProcessor(parameters, selectedFiles);
+  }, []);
 
   return useToolOperation<ConvertParameters>({
-    operationType: 'convert',
-    endpoint: '', // Not used with customProcessor but required
-    buildFormData, // Not used with customProcessor but required
-    filePrefix: 'converted_',
-    customProcessor: customConvertProcessor, // Convert handles its own routing
+    ...convertOperationConfig,
+    customProcessor: customConvertProcessor, // Use instance-specific processor for translation support
     getErrorMessage: (error) => {
       if (error.response?.data && typeof error.response.data === 'string') {
         return error.response.data;
diff --git a/frontend/src/hooks/tools/convert/useConvertParameters.ts b/frontend/src/hooks/tools/convert/useConvertParameters.ts
index 4d04dd8f0..2a7b7d523 100644
--- a/frontend/src/hooks/tools/convert/useConvertParameters.ts
+++ b/frontend/src/hooks/tools/convert/useConvertParameters.ts
@@ -8,7 +8,7 @@ import {
   type OutputOption,
   type FitOption
 } from '../../../constants/convertConstants';
-import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat, isWebFormat } from '../../../utils/convertUtils';
+import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat, isWebFormat, getAvailableToExtensions as getAvailableToExtensionsUtil } from '../../../utils/convertUtils';
 import { detectFileExtension as detectFileExtensionUtil } from '../../../utils/fileUtils';
 import { BaseParameters } from '../../../types/parameters';
 import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
@@ -47,7 +47,7 @@ export interface ConvertParametersHook extends BaseParametersHook<ConvertParamet
   analyzeFileTypes: (files: Array<{name: string}>) => void;
 }
 
-const defaultParameters: ConvertParameters = {
+export const defaultParameters: ConvertParameters = {
   fromExtension: '',
   toExtension: '',
   imageOptions: {
@@ -155,30 +155,7 @@ export const useConvertParameters = (): ConvertParametersHook => {
     return getEndpointUrl(fromExtension, toExtension);
   };
 
-  const getAvailableToExtensions = (fromExtension: string) => {
-    if (!fromExtension) return [];
-
-    // Handle dynamic format identifiers (file-<extension>)
-    if (fromExtension.startsWith('file-')) {
-      // Dynamic format - use 'any' conversion options (file-to-pdf)
-      const supportedExtensions = CONVERSION_MATRIX['any'] || [];
-      return TO_FORMAT_OPTIONS.filter(option =>
-        supportedExtensions.includes(option.value)
-      );
-    }
-
-    let supportedExtensions = CONVERSION_MATRIX[fromExtension] || [];
-
-    // If no explicit conversion exists, but file-to-pdf might be available,
-    // fall back to 'any' conversion (which converts unknown files to PDF via file-to-pdf)
-    if (supportedExtensions.length === 0 && fromExtension !== 'any') {
-      supportedExtensions = CONVERSION_MATRIX['any'] || [];
-    }
-
-    return TO_FORMAT_OPTIONS.filter(option =>
-      supportedExtensions.includes(option.value)
-    );
-  };
+  const getAvailableToExtensions = getAvailableToExtensionsUtil;
 
 
   const analyzeFileTypes = useCallback((files: Array<{name: string}>) => {
diff --git a/frontend/src/hooks/tools/ocr/useOCROperation.ts b/frontend/src/hooks/tools/ocr/useOCROperation.ts
index 8beeff950..b816b3773 100644
--- a/frontend/src/hooks/tools/ocr/useOCROperation.ts
+++ b/frontend/src/hooks/tools/ocr/useOCROperation.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OCRParameters } from './useOCRParameters';
+import { OCRParameters, defaultParameters } from './useOCRParameters';
 import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
 import { useToolResources } from '../shared/useToolResources';
@@ -37,7 +37,8 @@ function stripExt(name: string): string {
   return i > 0 ? name.slice(0, i) : name;
 }
 
-const buildFormData = (parameters: OCRParameters, file: File): FormData => {
+// Static function that can be used by both the hook and automation executor
+export const buildOCRFormData = (parameters: OCRParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append('fileInput', file);
   parameters.languages.forEach((lang) => formData.append('languages', lang));
@@ -51,57 +52,70 @@ const buildFormData = (parameters: OCRParameters, file: File): FormData => {
   return formData;
 };
 
+// Static response handler for OCR - can be used by automation executor  
+export const ocrResponseHandler = async (blob: Blob, originalFiles: File[], extractZipFiles: (blob: Blob) => Promise<File[]>): Promise<File[]> => {
+  const headBuf = await blob.slice(0, 8).arrayBuffer();
+  const head = new TextDecoder().decode(new Uint8Array(headBuf));
+
+  // ZIP: sidecar or multi-asset output
+  if (head.startsWith('PK')) {
+    const base = stripExt(originalFiles[0].name);
+    try {
+      const extractedFiles = await extractZipFiles(blob);
+      if (extractedFiles.length > 0) return extractedFiles;
+    } catch { /* ignore and try local extractor */ }
+    try {
+      const local = await extractZipFile(blob); // local fallback
+      if (local.length > 0) return local;
+    } catch { /* fall through */ }
+    return [new File([blob], `ocr_${base}.zip`, { type: 'application/zip' })];
+  }
+
+  // Not a PDF: surface error details if present
+  if (!head.startsWith('%PDF')) {
+    const textBuf = await blob.slice(0, 1024).arrayBuffer();
+    const text = new TextDecoder().decode(new Uint8Array(textBuf));
+    if (/error|exception|html/i.test(text)) {
+      if (text.includes('OCR tools') && text.includes('not installed')) {
+        throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
+      }
+      const title =
+        text.match(/<title[^>]*>([^<]+)<\/title>/i)?.[1] ||
+        text.match(/<h1[^>]*>([^<]+)<\/h1>/i)?.[1] ||
+        'Unknown error';
+      throw new Error(`OCR service error: ${title}`);
+    }
+    throw new Error(`Response is not a valid PDF. Header: "${head}"`);
+  }
+
+  const base = stripExt(originalFiles[0].name);
+  return [new File([blob], `ocr_${base}.pdf`, { type: 'application/pdf' })];
+};
+
+// Static configuration object (without t function dependencies)
+export const ocrOperationConfig = {
+  operationType: 'ocr',
+  endpoint: '/api/v1/misc/ocr-pdf',
+  buildFormData: buildOCRFormData,
+  filePrefix: 'ocr_',
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
+
 export const useOCROperation = () => {
   const { t } = useTranslation();
   const { extractZipFiles } = useToolResources();
 
   // OCR-specific parsing: ZIP (sidecar) vs PDF vs HTML error
   const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
-    const headBuf = await blob.slice(0, 8).arrayBuffer();
-    const head = new TextDecoder().decode(new Uint8Array(headBuf));
-
-    // ZIP: sidecar or multi-asset output
-    if (head.startsWith('PK')) {
-      const base = stripExt(originalFiles[0].name);
-      try {
-        const extracted = await extractZipFiles(blob);
-        if (extracted.length > 0) return extracted;
-      } catch { /* ignore and try local extractor */ }
-      try {
-        const local = await extractZipFile(blob); // local fallback
-        if (local.length > 0) return local;
-      } catch { /* fall through */ }
-      return [new File([blob], `ocr_${base}.zip`, { type: 'application/zip' })];
-    }
-
-    // Not a PDF: surface error details if present
-    if (!head.startsWith('%PDF')) {
-      const textBuf = await blob.slice(0, 1024).arrayBuffer();
-      const text = new TextDecoder().decode(new Uint8Array(textBuf));
-      if (/error|exception|html/i.test(text)) {
-        if (text.includes('OCR tools') && text.includes('not installed')) {
-          throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
-        }
-        const title =
-          text.match(/<title[^>]*>([^<]+)<\/title>/i)?.[1] ||
-          text.match(/<h1[^>]*>([^<]+)<\/h1>/i)?.[1] ||
-          t('ocr.error.unknown', 'Unknown error');
-        throw new Error(`OCR service error: ${title}`);
-      }
-      throw new Error(`Response is not a valid PDF. Header: "${head}"`);
-    }
-
-    const base = stripExt(originalFiles[0].name);
-    return [new File([blob], `ocr_${base}.pdf`, { type: 'application/pdf' })];
-  }, [t, extractZipFiles]);
+    // extractZipFiles from useToolResources already returns File[] directly
+    const simpleExtractZipFiles = extractZipFiles;
+    return ocrResponseHandler(blob, originalFiles, simpleExtractZipFiles);
+  }, [extractZipFiles]);
 
   const ocrConfig: ToolOperationConfig<OCRParameters> = {
-    operationType: 'ocr',
-    endpoint: '/api/v1/misc/ocr-pdf',
-    buildFormData,
-    filePrefix: 'ocr_',
-    multiFileEndpoint: false, // Process files individually
-    responseHandler, // use shared flow
+    ...ocrOperationConfig,
+    responseHandler,
     getErrorMessage: (error) =>
       error.message?.includes('OCR tools') && error.message?.includes('not installed')
         ? 'OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.'
diff --git a/frontend/src/hooks/tools/ocr/useOCRParameters.ts b/frontend/src/hooks/tools/ocr/useOCRParameters.ts
index 0fbda4a33..a3fd546d2 100644
--- a/frontend/src/hooks/tools/ocr/useOCRParameters.ts
+++ b/frontend/src/hooks/tools/ocr/useOCRParameters.ts
@@ -10,7 +10,7 @@ export interface OCRParameters extends BaseParameters {
 
 export type OCRParametersHook = BaseParametersHook<OCRParameters>;
 
-const defaultParameters: OCRParameters = {
+export const defaultParameters: OCRParameters = {
   languages: [],
   ocrType: 'skip-text',
   ocrRenderType: 'hocr',
diff --git a/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
index 5987944ec..c466606bc 100644
--- a/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
+++ b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
@@ -1,23 +1,31 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { RemoveCertificateSignParameters } from './useRemoveCertificateSignParameters';
+import { RemoveCertificateSignParameters, defaultParameters } from './useRemoveCertificateSignParameters';
+
+// Static function that can be used by both the hook and automation executor
+export const buildRemoveCertificateSignFormData = (parameters: RemoveCertificateSignParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  return formData;
+};
+
+// Static configuration object
+export const removeCertificateSignOperationConfig = {
+  operationType: 'remove-certificate-sign',
+  endpoint: '/api/v1/security/remove-cert-sign',
+  buildFormData: buildRemoveCertificateSignFormData,
+  filePrefix: 'unsigned_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
 
 export const useRemoveCertificateSignOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: RemoveCertificateSignParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    return formData;
-  };
-
   return useToolOperation<RemoveCertificateSignParameters>({
-    operationType: 'removeCertificateSign',
-    endpoint: '/api/v1/security/remove-cert-sign',
-    buildFormData,
+    ...removeCertificateSignOperationConfig,
     filePrefix: t('removeCertSign.filenamePrefix', 'unsigned') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('removeCertSign.error.failed', 'An error occurred while removing certificate signatures.'))
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts b/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
index 66cd240fc..61faef9a4 100644
--- a/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
+++ b/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
@@ -25,7 +25,7 @@ import { ToolOperationConfig, ToolOperationHook, useToolOperation } from '../sha
 describe('useRemovePasswordOperation', () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
-  const getToolConfig = (): ToolOperationConfig<RemovePasswordParameters> => mockUseToolOperation.mock.calls[0][0];
+  const getToolConfig = (): ToolOperationConfig<RemovePasswordParameters> => mockUseToolOperation.mock.calls[0][0] as ToolOperationConfig<RemovePasswordParameters>;
 
   const mockToolOperationReturn: ToolOperationHook<unknown> = {
     files: [],
diff --git a/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.ts b/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.ts
index 37f8fa0db..9d61d3c59 100644
--- a/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.ts
+++ b/frontend/src/hooks/tools/removePassword/useRemovePasswordOperation.ts
@@ -1,24 +1,32 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { RemovePasswordParameters } from './useRemovePasswordParameters';
+import { RemovePasswordParameters, defaultParameters } from './useRemovePasswordParameters';
+
+// Static function that can be used by both the hook and automation executor
+export const buildRemovePasswordFormData = (parameters: RemovePasswordParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  formData.append("password", parameters.password);
+  return formData;
+};
+
+// Static configuration object
+export const removePasswordOperationConfig = {
+  operationType: 'removePassword',
+  endpoint: '/api/v1/security/remove-password',
+  buildFormData: buildRemovePasswordFormData,
+  filePrefix: 'decrypted_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
 
 export const useRemovePasswordOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: RemovePasswordParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    formData.append("password", parameters.password);
-    return formData;
-  };
-
   return useToolOperation<RemovePasswordParameters>({
-    operationType: 'removePassword',
-    endpoint: '/api/v1/security/remove-password',
-    buildFormData,
+    ...removePasswordOperationConfig,
     filePrefix: t('removePassword.filenamePrefix', 'decrypted') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('removePassword.error.failed', 'An error occurred while removing the password from the PDF.'))
   });
 };
diff --git a/frontend/src/hooks/tools/repair/useRepairOperation.ts b/frontend/src/hooks/tools/repair/useRepairOperation.ts
index b547bbd8f..8be4fb13f 100644
--- a/frontend/src/hooks/tools/repair/useRepairOperation.ts
+++ b/frontend/src/hooks/tools/repair/useRepairOperation.ts
@@ -1,23 +1,31 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { RepairParameters } from './useRepairParameters';
+import { RepairParameters, defaultParameters } from './useRepairParameters';
+
+// Static function that can be used by both the hook and automation executor
+export const buildRepairFormData = (parameters: RepairParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  return formData;
+};
+
+// Static configuration object
+export const repairOperationConfig = {
+  operationType: 'repair',
+  endpoint: '/api/v1/misc/repair',
+  buildFormData: buildRepairFormData,
+  filePrefix: 'repaired_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
 
 export const useRepairOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: RepairParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    return formData;
-  };
-
   return useToolOperation<RepairParameters>({
-    operationType: 'repair',
-    endpoint: '/api/v1/misc/repair',
-    buildFormData,
+    ...repairOperationConfig,
     filePrefix: t('repair.filenamePrefix', 'repaired') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('repair.error.failed', 'An error occurred while repairing the PDF.'))
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/sanitize/useSanitizeOperation.ts b/frontend/src/hooks/tools/sanitize/useSanitizeOperation.ts
index c83086121..284b715f8 100644
--- a/frontend/src/hooks/tools/sanitize/useSanitizeOperation.ts
+++ b/frontend/src/hooks/tools/sanitize/useSanitizeOperation.ts
@@ -1,9 +1,10 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { SanitizeParameters } from './useSanitizeParameters';
+import { SanitizeParameters, defaultParameters } from './useSanitizeParameters';
 
-const buildFormData = (parameters: SanitizeParameters, file: File): FormData => {
+// Static function that can be used by both the hook and automation executor
+export const buildSanitizeFormData = (parameters: SanitizeParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append('fileInput', file);
 
@@ -18,15 +19,22 @@ const buildFormData = (parameters: SanitizeParameters, file: File): FormData =>
   return formData;
 };
 
+// Static configuration object
+export const sanitizeOperationConfig = {
+  operationType: 'sanitize',
+  endpoint: '/api/v1/security/sanitize-pdf',
+  buildFormData: buildSanitizeFormData,
+  filePrefix: 'sanitized_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
+
 export const useSanitizeOperation = () => {
   const { t } = useTranslation();
 
   return useToolOperation<SanitizeParameters>({
-    operationType: 'sanitize',
-    endpoint: '/api/v1/security/sanitize-pdf',
-    buildFormData,
+    ...sanitizeOperationConfig,
     filePrefix: t('sanitize.filenamePrefix', 'sanitized') + '_',
-    multiFileEndpoint: false, // Individual API calls per file
     getErrorMessage: createStandardErrorHandler(t('sanitize.error.failed', 'An error occurred while sanitising the PDF.'))
   });
 };
diff --git a/frontend/src/hooks/tools/shared/useToolOperation.ts b/frontend/src/hooks/tools/shared/useToolOperation.ts
index 4e76e6e7d..299568afd 100644
--- a/frontend/src/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@@ -61,6 +61,9 @@ export interface ToolOperationConfig<TParams = void> {
 
   /** Extract user-friendly error messages from API errors */
   getErrorMessage?: (error: any) => string;
+
+  /** Default parameter values for automation */
+  defaultParameters?: TParams;
 }
 
 /**
diff --git a/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
index e73944864..41cbb6dd3 100644
--- a/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
+++ b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
@@ -1,23 +1,31 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { SingleLargePageParameters } from './useSingleLargePageParameters';
+import { SingleLargePageParameters, defaultParameters } from './useSingleLargePageParameters';
+
+// Static function that can be used by both the hook and automation executor
+export const buildSingleLargePageFormData = (parameters: SingleLargePageParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  return formData;
+};
+
+// Static configuration object
+export const singleLargePageOperationConfig = {
+  operationType: 'single-large-page',
+  endpoint: '/api/v1/general/pdf-to-single-page',
+  buildFormData: buildSingleLargePageFormData,
+  filePrefix: 'single_page_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
 
 export const useSingleLargePageOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: SingleLargePageParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    return formData;
-  };
-
   return useToolOperation<SingleLargePageParameters>({
-    operationType: 'singleLargePage',
-    endpoint: '/api/v1/general/pdf-to-single-page',
-    buildFormData,
+    ...singleLargePageOperationConfig,
     filePrefix: t('pdfToSinglePage.filenamePrefix', 'single_page') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('pdfToSinglePage.error.failed', 'An error occurred while converting to single page.'))
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/split/useSplitOperation.ts b/frontend/src/hooks/tools/split/useSplitOperation.ts
index 7702bffad..cc1c6a5d9 100644
--- a/frontend/src/hooks/tools/split/useSplitOperation.ts
+++ b/frontend/src/hooks/tools/split/useSplitOperation.ts
@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { SplitParameters } from './useSplitParameters';
+import { SplitParameters, defaultParameters } from './useSplitParameters';
 import { SPLIT_MODES } from '../../../constants/splitConstants';
 
-
-const buildFormData = (parameters: SplitParameters, selectedFiles: File[]): FormData => {
+// Static functions that can be used by both the hook and automation executor
+export const buildSplitFormData = (parameters: SplitParameters, selectedFiles: File[]): FormData => {
   const formData = new FormData();
 
   selectedFiles.forEach(file => {
@@ -40,7 +40,7 @@ const buildFormData = (parameters: SplitParameters, selectedFiles: File[]): Form
   return formData;
 };
 
-const getEndpoint = (parameters: SplitParameters): string => {
+export const getSplitEndpoint = (parameters: SplitParameters): string => {
   switch (parameters.mode) {
     case SPLIT_MODES.BY_PAGES:
       return "/api/v1/general/split-pages";
@@ -55,15 +55,21 @@ const getEndpoint = (parameters: SplitParameters): string => {
   }
 };
 
+// Static configuration object
+export const splitOperationConfig = {
+  operationType: 'splitPdf',
+  endpoint: getSplitEndpoint,
+  buildFormData: buildSplitFormData,
+  filePrefix: 'split_',
+  multiFileEndpoint: true, // Single API call with all files
+  defaultParameters,
+} as const;
+
 export const useSplitOperation = () => {
   const { t } = useTranslation();
 
   return useToolOperation<SplitParameters>({
-    operationType: 'split',
-    endpoint: (params) => getEndpoint(params),
-    buildFormData: buildFormData, // Multi-file signature: (params, selectedFiles) => FormData
-    filePrefix: 'split_',
-    multiFileEndpoint: true, // Single API call with all files
+    ...splitOperationConfig,
     getErrorMessage: createStandardErrorHandler(t('split.error.failed', 'An error occurred while splitting the PDF.'))
   });
 };
diff --git a/frontend/src/hooks/tools/split/useSplitParameters.ts b/frontend/src/hooks/tools/split/useSplitParameters.ts
index b31ddbae6..e48504304 100644
--- a/frontend/src/hooks/tools/split/useSplitParameters.ts
+++ b/frontend/src/hooks/tools/split/useSplitParameters.ts
@@ -17,7 +17,7 @@ export interface SplitParameters extends BaseParameters {
 
 export type SplitParametersHook = BaseParametersHook<SplitParameters>;
 
-const defaultParameters: SplitParameters = {
+export const defaultParameters: SplitParameters = {
   mode: '',
   pages: '',
   hDiv: '2',
diff --git a/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
index 3b648762b..d6081452f 100644
--- a/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
+++ b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
@@ -1,23 +1,31 @@
 import { useTranslation } from 'react-i18next';
 import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-import { UnlockPdfFormsParameters } from './useUnlockPdfFormsParameters';
+import { UnlockPdfFormsParameters, defaultParameters } from './useUnlockPdfFormsParameters';
+
+// Static function that can be used by both the hook and automation executor
+export const buildUnlockPdfFormsFormData = (parameters: UnlockPdfFormsParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  return formData;
+};
+
+// Static configuration object
+export const unlockPdfFormsOperationConfig = {
+  operationType: 'unlock-pdf-forms',
+  endpoint: '/api/v1/misc/unlock-pdf-forms',
+  buildFormData: buildUnlockPdfFormsFormData,
+  filePrefix: 'unlocked_forms_', // Will be overridden in hook with translation
+  multiFileEndpoint: false,
+  defaultParameters,
+} as const;
 
 export const useUnlockPdfFormsOperation = () => {
   const { t } = useTranslation();
 
-  const buildFormData = (parameters: UnlockPdfFormsParameters, file: File): FormData => {
-    const formData = new FormData();
-    formData.append("fileInput", file);
-    return formData;
-  };
-
   return useToolOperation<UnlockPdfFormsParameters>({
-    operationType: 'unlockPdfForms',
-    endpoint: '/api/v1/misc/unlock-pdf-forms',
-    buildFormData,
+    ...unlockPdfFormsOperationConfig,
     filePrefix: t('unlockPDFForms.filenamePrefix', 'unlocked_forms') + '_',
-    multiFileEndpoint: false,
     getErrorMessage: createStandardErrorHandler(t('unlockPDFForms.error.failed', 'An error occurred while unlocking PDF forms.'))
   });
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/useRightRailButtons.ts b/frontend/src/hooks/useRightRailButtons.ts
new file mode 100644
index 000000000..82a4e8cd5
--- /dev/null
+++ b/frontend/src/hooks/useRightRailButtons.ts
@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from 'react';
+import { useRightRail } from '../contexts/RightRailContext';
+import { RightRailAction, RightRailButtonConfig } from '../types/rightRail';
+
+export interface RightRailButtonWithAction extends RightRailButtonConfig {
+  onClick: RightRailAction;
+}
+
+/**
+ * Registers one or more RightRail buttons and their actions.
+ * - Automatically registers on mount and unregisters on unmount
+ * - Updates registration when the input array reference changes
+ */
+export function useRightRailButtons(buttons: readonly RightRailButtonWithAction[]) {
+  const { registerButtons, unregisterButtons, setAction } = useRightRail();
+
+  // Memoize configs and ids to reduce churn
+  const configs: RightRailButtonConfig[] = useMemo(
+    () => buttons.map(({ onClick, ...cfg }) => cfg),
+    [buttons]
+  );
+  const ids: string[] = useMemo(() => buttons.map(b => b.id), [buttons]);
+
+  useEffect(() => {
+    if (!buttons || buttons.length === 0) return;
+
+    // DEV warnings for duplicate ids or missing handlers
+    if (process.env.NODE_ENV === 'development') {
+      const idSet = new Set<string>();
+      buttons.forEach(b => {
+        if (!b.onClick) console.warn('[RightRail] Missing onClick for id:', b.id);
+        if (idSet.has(b.id)) console.warn('[RightRail] Duplicate id in buttons array:', b.id);
+        idSet.add(b.id);
+      });
+    }
+
+    // Register visual button configs (idempotent merge by id)
+    registerButtons(configs);
+
+    // Bind/update actions independent of registration
+    buttons.forEach(({ id, onClick }) => setAction(id, onClick));
+
+    // Cleanup unregisters by ids present in this call
+    return () => unregisterButtons(ids);
+  }, [registerButtons, unregisterButtons, setAction, configs, ids, buttons]);
+}
diff --git a/frontend/src/hooks/useSuggestedTools.ts b/frontend/src/hooks/useSuggestedTools.ts
index ae6d77035..f179a744f 100644
--- a/frontend/src/hooks/useSuggestedTools.ts
+++ b/frontend/src/hooks/useSuggestedTools.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
+import { useNavigationActions, useNavigationState } from '../contexts/NavigationContext';
 
 // Material UI Icons
 import CompressIcon from '@mui/icons-material/Compress';
@@ -9,7 +9,7 @@ import CropIcon from '@mui/icons-material/Crop';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 
 export interface SuggestedTool {
-  name: string;
+  id: string /* FIX ME: Should be ToolId */;
   title: string;
   icon: React.ComponentType<any>;
   navigate: () => void;
@@ -17,43 +17,44 @@ export interface SuggestedTool {
 
 const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
   {
-    name: 'compress',
+    id: 'compress',
     title: 'Compress',
     icon: CompressIcon
   },
   {
-    name: 'convert',
+    id: 'convert',
     title: 'Convert',
     icon: SwapHorizIcon
   },
   {
-    name: 'sanitize',
+    id: 'sanitize',
     title: 'Sanitize',
     icon: CleaningServicesIcon
   },
   {
-    name: 'split',
+    id: 'split',
     title: 'Split',
     icon: CropIcon
   },
   {
-    name: 'ocr',
+    id: 'ocr',
     title: 'OCR',
     icon: TextFieldsIcon
   }
 ];
 
 export function useSuggestedTools(): SuggestedTool[] {
-  const { handleToolSelect, selectedToolKey } = useToolWorkflow();
+  const { actions } = useNavigationActions();
+  const { selectedToolKey } = useNavigationState();
 
   return useMemo(() => {
     // Filter out the current tool
-    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.name !== selectedToolKey);
-    
+    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.id !== selectedToolKey);
+
     // Add navigation function to each tool
     return filteredTools.map(tool => ({
       ...tool,
-      navigate: () => handleToolSelect(tool.name)
+      navigate: () => actions.handleToolSelect(tool.id)
     }));
-  }, [selectedToolKey, handleToolSelect]);
-}
\ No newline at end of file
+  }, [selectedToolKey, actions]);
+}
diff --git a/frontend/src/hooks/useToolManagement.tsx b/frontend/src/hooks/useToolManagement.tsx
index e991677a9..9ea048f65 100644
--- a/frontend/src/hooks/useToolManagement.tsx
+++ b/frontend/src/hooks/useToolManagement.tsx
@@ -5,19 +5,16 @@ import { getAllEndpoints, type ToolRegistryEntry } from "../data/toolsTaxonomy";
 import { useMultipleEndpointsEnabled } from "./useEndpointConfig";
 
 interface ToolManagementResult {
-  selectedToolKey: string | null;
   selectedTool: ToolRegistryEntry | null;
   toolSelectedFileIds: string[];
   toolRegistry: Record<string, ToolRegistryEntry>;
-  selectTool: (toolKey: string) => void;
-  clearToolSelection: () => void;
   setToolSelectedFileIds: (fileIds: string[]) => void;
+  getSelectedTool: (toolKey: string | null) => ToolRegistryEntry | null;
 }
 
 export const useToolManagement = (): ToolManagementResult => {
   const { t } = useTranslation();
 
-  const [selectedToolKey, setSelectedToolKey] = useState<string | null>(null);
   const [toolSelectedFileIds, setToolSelectedFileIds] = useState<string[]>([]);
 
   // Build endpoints list from registry entries with fallback to legacy mapping
@@ -56,35 +53,15 @@ export const useToolManagement = (): ToolManagementResult => {
     return availableToolRegistry;
   }, [isToolAvailable, t, baseRegistry]);
 
-  useEffect(() => {
-    if (!endpointsLoading && selectedToolKey && !toolRegistry[selectedToolKey]) {
-      const firstAvailableTool = Object.keys(toolRegistry)[0];
-      if (firstAvailableTool) {
-        setSelectedToolKey(firstAvailableTool);
-      } else {
-        setSelectedToolKey(null);
-      }
-    }
-  }, [endpointsLoading, selectedToolKey, toolRegistry]);
-
-  const selectTool = useCallback((toolKey: string) => {
-    setSelectedToolKey(toolKey);
-  }, []);
-
-  const clearToolSelection = useCallback(() => {
-    setSelectedToolKey(null);
-  }, []);
-
-  const selectedTool = selectedToolKey ? toolRegistry[selectedToolKey] : null;
+  const getSelectedTool = useCallback((toolKey: string | null): ToolRegistryEntry | null => {
+    return toolKey ? toolRegistry[toolKey] || null : null;
+  }, [toolRegistry]);
 
   return {
-    selectedToolKey,
-    selectedTool,
+    selectedTool: getSelectedTool(null), // This will be unused, kept for compatibility
     toolSelectedFileIds,
     toolRegistry,
-    selectTool,
-    clearToolSelection,
     setToolSelectedFileIds,
-
+    getSelectedTool,
   };
 };
diff --git a/frontend/src/hooks/useToolSections.ts b/frontend/src/hooks/useToolSections.ts
index 4c1a0c05d..41762a8e1 100644
--- a/frontend/src/hooks/useToolSections.ts
+++ b/frontend/src/hooks/useToolSections.ts
@@ -1,65 +1,87 @@
 import { useMemo } from 'react';
 
-import { SUBCATEGORY_ORDER, ToolCategory, ToolRegistryEntry } from '../data/toolsTaxonomy';
+import { SUBCATEGORY_ORDER, SubcategoryId, ToolCategoryId, ToolRegistryEntry } from '../data/toolsTaxonomy';
 import { useTranslation } from 'react-i18next';
 
+type SubcategoryIdMap = {
+  [subcategoryId in SubcategoryId]: Array<{ id: string /* FIX ME: Should be ToolId */; tool: ToolRegistryEntry }>;
+}
+
 type GroupedTools = {
-  [category: string]: {
-    [subcategory: string]: Array<{ id: string; tool: ToolRegistryEntry }>;
-  };
+  [categoryId in ToolCategoryId]: SubcategoryIdMap;
 };
 
-export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
+export interface SubcategoryGroup {
+  subcategoryId: SubcategoryId;
+  tools: {
+    id: string /* FIX ME: Should be ToolId */;
+    tool: ToolRegistryEntry;
+  }[];
+};
+
+export type ToolSectionKey = 'quick' | 'all';
+
+export interface ToolSection {
+  key: ToolSectionKey;
+  title: string;
+  subcategories: SubcategoryGroup[];
+};
+
+export function useToolSections(filteredTools: [string /* FIX ME: Should be ToolId */, ToolRegistryEntry][]) {
   const { t } = useTranslation();
 
   const groupedTools = useMemo(() => {
-    const grouped: GroupedTools = {};
+    const grouped = {} as GroupedTools;
     filteredTools.forEach(([id, tool]) => {
-      const category = tool.category;
-      const subcategory = tool.subcategory;
-      if (!grouped[category]) grouped[category] = {};
-      if (!grouped[category][subcategory]) grouped[category][subcategory] = [];
-      grouped[category][subcategory].push({ id, tool });
+      const categoryId = tool.categoryId;
+      const subcategoryId = tool.subcategoryId;
+      if (!grouped[categoryId]) grouped[categoryId] = {} as SubcategoryIdMap;
+      if (!grouped[categoryId][subcategoryId]) grouped[categoryId][subcategoryId] = [];
+      grouped[categoryId][subcategoryId].push({ id, tool });
     });
     return grouped;
   }, [filteredTools]);
 
-  const sections = useMemo(() => {
-    const getOrderIndex = (name: string) => {
-      const idx = SUBCATEGORY_ORDER.indexOf(name as any);
+  const sections: ToolSection[] = useMemo(() => {
+    const getOrderIndex = (id: SubcategoryId) => {
+      const idx = SUBCATEGORY_ORDER.indexOf(id);
       return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
     };
 
-    const quick: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
-    const all: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
+    const quick = {} as SubcategoryIdMap;
+    const all = {} as SubcategoryIdMap;
 
-    Object.entries(groupedTools).forEach(([origCat, subs]) => {
-      const upperCat = origCat.toUpperCase();
+    Object.entries(groupedTools).forEach(([c, subs]) => {
+      const categoryId = c as ToolCategoryId;
 
-      Object.entries(subs).forEach(([sub, tools]) => {
-        if (!all[sub]) all[sub] = [];
-        all[sub].push(...tools);
+      Object.entries(subs).forEach(([s, tools]) => {
+        const subcategoryId = s as SubcategoryId;
+        if (!all[subcategoryId]) all[subcategoryId] = [];
+        all[subcategoryId].push(...tools);
       });
 
-      if (upperCat === ToolCategory.RECOMMENDED_TOOLS.toUpperCase()) {
-        Object.entries(subs).forEach(([sub, tools]) => {
-          if (!quick[sub]) quick[sub] = [];
-          quick[sub].push(...tools);
+      if (categoryId === ToolCategoryId.RECOMMENDED_TOOLS) {
+        Object.entries(subs).forEach(([s, tools]) => {
+          const subcategoryId = s as SubcategoryId;
+          if (!quick[subcategoryId]) quick[subcategoryId] = [];
+          quick[subcategoryId].push(...tools);
         });
       }
     });
 
-    const sortSubs = (obj: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>>) =>
+    const sortSubs = (obj: SubcategoryIdMap) =>
       Object.entries(obj)
         .sort(([a], [b]) => {
-          const ai = getOrderIndex(a);
-          const bi = getOrderIndex(b);
+          const aId = a as SubcategoryId;
+          const bId = b as SubcategoryId;
+          const ai = getOrderIndex(aId);
+          const bi = getOrderIndex(bId);
           if (ai !== bi) return ai - bi;
-          return a.localeCompare(b);
+          return aId.localeCompare(bId);
         })
-        .map(([subcategory, tools]) => ({ subcategory, tools }));
+        .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
 
-    const built = [
+    const built: ToolSection[] = [
       { key: 'quick', title: t('toolPicker.quickAccess', 'QUICK ACCESS'), subcategories: sortSubs(quick) },
       { key: 'all', title: t('toolPicker.allTools', 'ALL TOOLS'), subcategories: sortSubs(all) }
     ];
@@ -67,19 +89,20 @@ export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
     return built.filter(section => section.subcategories.some(sc => sc.tools.length > 0));
   }, [groupedTools]);
 
-  const searchGroups = useMemo(() => {
-    const subMap: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
-    const seen = new Set<string>();
+  const searchGroups: SubcategoryGroup[] = useMemo(() => {
+    const subMap = {} as SubcategoryIdMap;
+    const seen = new Set<string /* FIX ME: Should be ToolId */>();
     filteredTools.forEach(([id, tool]) => {
-      if (seen.has(id)) return;
-      seen.add(id);
-      const sub = tool.subcategory;
+      const toolId = id as string /* FIX ME: Should be ToolId */;
+      if (seen.has(toolId)) return;
+      seen.add(toolId);
+      const sub = tool.subcategoryId;
       if (!subMap[sub]) subMap[sub] = [];
-      subMap[sub].push({ id, tool });
+      subMap[sub].push({ id: toolId, tool });
     });
     return Object.entries(subMap)
       .sort(([a], [b]) => a.localeCompare(b))
-      .map(([subcategory, tools]) => ({ subcategory, tools }));
+      .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
   }, [filteredTools]);
 
   return { sections, searchGroups };
diff --git a/frontend/src/hooks/useUrlSync.ts b/frontend/src/hooks/useUrlSync.ts
index ef181c04b..4a50a36ba 100644
--- a/frontend/src/hooks/useUrlSync.ts
+++ b/frontend/src/hooks/useUrlSync.ts
@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useCallback } from 'react';
-import { ModeType } from '../contexts/NavigationContext';
+import { ModeType } from '../types/navigation';
 import { parseToolRoute, updateToolRoute, clearToolRoute } from '../utils/urlRouting';
 
 /**
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f7e5e0865..ec2585e8c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,9 +1,3 @@
-@import 'material-symbols/rounded.css'; 
-
-.material-symbols-rounded {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 022789f6c..12c1f4d7f 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,20 +1,19 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useFileActions, useFileSelection } from "../contexts/FileContext";
-import { useNavigationActions } from "../contexts/NavigationContext";
-import { ToolWorkflowProvider, useToolWorkflow } from "../contexts/ToolWorkflowContext";
+import { useToolWorkflow } from "../contexts/ToolWorkflowContext";
 import { Group } from "@mantine/core";
-import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
+import { useSidebarContext } from "../contexts/SidebarContext";
 import { useDocumentMeta } from "../hooks/useDocumentMeta";
 import { getBaseUrl } from "../constants/app";
 
 import ToolPanel from "../components/tools/ToolPanel";
 import Workbench from "../components/layout/Workbench";
 import QuickAccessBar from "../components/shared/QuickAccessBar";
+import RightRail from "../components/shared/RightRail";
 import FileManager from "../components/FileManager";
 
 
-function HomePageContent() {
+export default function HomePage() {
   const { t } = useTranslation();
   const {
     sidebarRefs,
@@ -22,8 +21,6 @@ function HomePageContent() {
 
   const { quickAccessRef } = sidebarRefs;
 
-  const { setSelectedFiles } = useFileSelection();
-
   const { selectedTool, selectedToolKey } = useToolWorkflow();
 
   const baseUrl = getBaseUrl();
@@ -50,28 +47,8 @@ function HomePageContent() {
         ref={quickAccessRef} />
       <ToolPanel />
       <Workbench />
+      <RightRail />
       <FileManager selectedTool={selectedTool as any /* FIX ME */} />
     </Group>
   );
-}
-
-function HomePageWithProviders() {
-  const { actions } = useNavigationActions();
-  
-  // Wrapper to convert string to ModeType
-  const handleViewChange = (view: string) => {
-    actions.setMode(view as any); // ToolWorkflowContext should validate this
-  };
-  
-  return (
-    <ToolWorkflowProvider onViewChange={handleViewChange}>
-      <SidebarProvider>
-        <HomePageContent />
-      </SidebarProvider>
-    </ToolWorkflowProvider>
-  );
-}
-
-export default function HomePage() {
-  return <HomePageWithProviders />;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/services/automationStorage.ts b/frontend/src/services/automationStorage.ts
new file mode 100644
index 000000000..990e95a7f
--- /dev/null
+++ b/frontend/src/services/automationStorage.ts
@@ -0,0 +1,183 @@
+/**
+ * Service for managing automation configurations in IndexedDB
+ */
+
+export interface AutomationConfig {
+  id: string;
+  name: string;
+  description?: string;
+  operations: Array<{
+    operation: string;
+    parameters: any;
+  }>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+class AutomationStorage {
+  private dbName = 'StirlingPDF_Automations';
+  private dbVersion = 1;
+  private storeName = 'automations';
+  private db: IDBDatabase | null = null;
+
+  async init(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.dbVersion);
+
+      request.onerror = () => {
+        reject(new Error('Failed to open automation storage database'));
+      };
+
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+        
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
+          store.createIndex('name', 'name', { unique: false });
+          store.createIndex('createdAt', 'createdAt', { unique: false });
+        }
+      };
+    });
+  }
+
+  async ensureDB(): Promise<IDBDatabase> {
+    if (!this.db) {
+      await this.init();
+    }
+    
+    if (!this.db) {
+      throw new Error('Database not initialized');
+    }
+    
+    return this.db;
+  }
+
+  async saveAutomation(automation: Omit<AutomationConfig, 'id' | 'createdAt' | 'updatedAt'>): Promise<AutomationConfig> {
+    const db = await this.ensureDB();
+    const timestamp = new Date().toISOString();
+    
+    const automationWithMeta: AutomationConfig = {
+      id: `automation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      ...automation,
+      createdAt: timestamp,
+      updatedAt: timestamp
+    };
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.add(automationWithMeta);
+
+      request.onsuccess = () => {
+        resolve(automationWithMeta);
+      };
+
+      request.onerror = () => {
+        reject(new Error('Failed to save automation'));
+      };
+    });
+  }
+
+  async updateAutomation(automation: AutomationConfig): Promise<AutomationConfig> {
+    const db = await this.ensureDB();
+    
+    const updatedAutomation: AutomationConfig = {
+      ...automation,
+      updatedAt: new Date().toISOString()
+    };
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.put(updatedAutomation);
+
+      request.onsuccess = () => {
+        resolve(updatedAutomation);
+      };
+
+      request.onerror = () => {
+        reject(new Error('Failed to update automation'));
+      };
+    });
+  }
+
+  async getAutomation(id: string): Promise<AutomationConfig | null> {
+    const db = await this.ensureDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readonly');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.get(id);
+
+      request.onsuccess = () => {
+        resolve(request.result || null);
+      };
+
+      request.onerror = () => {
+        reject(new Error('Failed to get automation'));
+      };
+    });
+  }
+
+  async getAllAutomations(): Promise<AutomationConfig[]> {
+    const db = await this.ensureDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readonly');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.getAll();
+
+      request.onsuccess = () => {
+        const automations = request.result || [];
+        // Sort by creation date, newest first
+        automations.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        resolve(automations);
+      };
+
+      request.onerror = () => {
+        reject(new Error('Failed to get automations'));
+      };
+    });
+  }
+
+  async deleteAutomation(id: string): Promise<void> {
+    const db = await this.ensureDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.delete(id);
+
+      request.onsuccess = () => {
+        resolve();
+      };
+
+      request.onerror = () => {
+        reject(new Error('Failed to delete automation'));
+      };
+    });
+  }
+
+  async searchAutomations(query: string): Promise<AutomationConfig[]> {
+    const automations = await this.getAllAutomations();
+    
+    if (!query.trim()) {
+      return automations;
+    }
+
+    const lowerQuery = query.toLowerCase();
+    return automations.filter(automation => 
+      automation.name.toLowerCase().includes(lowerQuery) ||
+      (automation.description && automation.description.toLowerCase().includes(lowerQuery)) ||
+      automation.operations.some(op => op.operation.toLowerCase().includes(lowerQuery))
+    );
+  }
+}
+
+// Export singleton instance
+export const automationStorage = new AutomationStorage();
\ No newline at end of file
diff --git a/frontend/src/services/pdfExportService.ts b/frontend/src/services/pdfExportService.ts
index 9c7720104..0a71cb4b2 100644
--- a/frontend/src/services/pdfExportService.ts
+++ b/frontend/src/services/pdfExportService.ts
@@ -32,7 +32,7 @@ export class PDFExportService {
       const sourceDoc = await PDFLibDocument.load(originalPDFBytes);
       const blob = await this.createSingleDocument(sourceDoc, pagesToExport);
       const exportFilename = this.generateFilename(filename || pdfDocument.name, selectedOnly);
-      
+
       return { blob, filename: exportFilename };
     } catch (error) {
       console.error('PDF export error:', error);
@@ -63,7 +63,7 @@ export class PDFExportService {
 
       const blob = await this.createMultiSourceDocument(sourceFiles, pagesToExport);
       const exportFilename = this.generateFilename(filename || pdfDocument.name, selectedOnly);
-      
+
       return { blob, filename: exportFilename };
     } catch (error) {
       console.error('Multi-file PDF export error:', error);
@@ -79,10 +79,10 @@ export class PDFExportService {
     pages: PDFPage[]
   ): Promise<Blob> {
     const newDoc = await PDFLibDocument.create();
-    
+
     // Load all source documents once and cache them
     const loadedDocs = new Map<string, PDFLibDocument>();
-    
+
     for (const [fileId, file] of sourceFiles) {
       try {
         const arrayBuffer = await file.arrayBuffer();
@@ -97,7 +97,7 @@ export class PDFExportService {
       if (page.isBlankPage || page.originalPageNumber === -1) {
         // Create a blank page
         const blankPage = newDoc.addPage(PageSizes.A4);
-        
+
         // Apply rotation if needed
         if (page.rotation !== 0) {
           blankPage.setRotation(degrees(page.rotation));
@@ -146,7 +146,7 @@ export class PDFExportService {
       if (page.isBlankPage || page.originalPageNumber === -1) {
         // Create a blank page
         const blankPage = newDoc.addPage(PageSizes.A4);
-        
+
         // Apply rotation if needed
         if (page.rotation !== 0) {
           blankPage.setRotation(degrees(page.rotation));
@@ -183,7 +183,7 @@ export class PDFExportService {
   /**
    * Generate appropriate filename for export
    */
-  private generateFilename(originalName: string, selectedOnly: boolean): string {
+  private generateFilename(originalName: string, selectedOnly: boolean, appendSuffix: boolean): string {
     const baseName = originalName.replace(/\.pdf$/i, '');
     return `${baseName}.pdf`;
   }
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 634cae91c..a8efa179e 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -106,6 +106,12 @@
   --icon-config-bg: #9CA3AF;
   --icon-config-color: #FFFFFF;
 
+  /* RightRail (light) */
+  --right-rail-bg: #F5F6F8;           /* light background */
+  --right-rail-foreground: #CDD4E1;   /* panel behind custom tool icons */
+  --right-rail-icon: #4B5563;         /* icon color */
+  --right-rail-icon-disabled: #CECECE;/* disabled icon */
+
   /* Colors for tooltips */
   --tooltip-title-bg: #DBEFFF;
   --tooltip-title-color: #31528E;
@@ -234,6 +240,12 @@
   --icon-inactive-bg: #2A2F36;
   --icon-inactive-color: #6E7581;
 
+  /* RightRail (dark) */
+  --right-rail-bg: #1F2329;           /* dark background */
+  --right-rail-foreground: #2A2F36;   /* panel behind custom tool icons */
+  --right-rail-icon: #BCBEBF;         /* icon color */
+  --right-rail-icon-disabled: #43464B;/* disabled icon */
+
   /* Dark mode tooltip colors */
   --tooltip-title-bg: #4B525A;
   --tooltip-title-color: #fff;
diff --git a/frontend/src/tests/convert/ConvertIntegration.test.tsx b/frontend/src/tests/convert/ConvertIntegration.test.tsx
index c966615f4..41a768838 100644
--- a/frontend/src/tests/convert/ConvertIntegration.test.tsx
+++ b/frontend/src/tests/convert/ConvertIntegration.test.tsx
@@ -409,7 +409,7 @@ describe('Convert Tool Integration Tests', () => {
 
       // Verify integration: utils validation prevents API call, hook shows error
       expect(mockedAxios.post).not.toHaveBeenCalled();
-      expect(result.current.errorMessage).toContain('errorNotSupported');
+      expect(result.current.errorMessage).toContain('Unsupported conversion format');
       expect(result.current.isLoading).toBe(false);
       expect(result.current.downloadUrl).toBe(null);
     });
diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx
index 5b8b33adc..b12598e26 100644
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@@ -9,11 +9,11 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
 import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
 
-import { useAddPasswordParameters } from "../hooks/tools/addPassword/useAddPasswordParameters";
+import { useAddPasswordParameters, defaultParameters } from "../hooks/tools/addPassword/useAddPasswordParameters";
 import { useAddPasswordOperation } from "../hooks/tools/addPassword/useAddPasswordOperation";
 import { useAddPasswordTips } from "../components/tooltips/useAddPasswordTips";
 import { useAddPasswordPermissionsTips } from "../components/tooltips/useAddPasswordPermissionsTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -114,4 +114,4 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default AddPassword;
+export default AddPassword as ToolComponent;
diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx
index 1e36a3820..1638ceb1c 100644
--- a/frontend/src/tools/AddWatermark.tsx
+++ b/frontend/src/tools/AddWatermark.tsx
@@ -21,7 +21,7 @@ import {
   useWatermarkFileTips,
   useWatermarkFormattingTips,
 } from "../components/tooltips/useWatermarkTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -208,4 +208,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   });
 };
 
-export default AddWatermark;
+// Static method to get the operation hook for automation
+AddWatermark.tool = () => useAddWatermarkOperation;
+
+export default AddWatermark as ToolComponent;
diff --git a/frontend/src/tools/Automate.tsx b/frontend/src/tools/Automate.tsx
new file mode 100644
index 000000000..af6b3d411
--- /dev/null
+++ b/frontend/src/tools/Automate.tsx
@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useFileContext } from "../contexts/FileContext";
+import { useFileSelection } from "../contexts/FileContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+import { createFilesToolStep } from "../components/tools/shared/FilesToolStep";
+import AutomationSelection from "../components/tools/automate/AutomationSelection";
+import AutomationCreation from "../components/tools/automate/AutomationCreation";
+import AutomationRun from "../components/tools/automate/AutomationRun";
+
+import { useAutomateOperation } from "../hooks/tools/automate/useAutomateOperation";
+import { BaseToolProps } from "../types/tool";
+import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry";
+import { useSavedAutomations } from "../hooks/tools/automate/useSavedAutomations";
+import { AutomationConfig, AutomationStepData, AutomationMode } from "../types/automation";
+import { AUTOMATION_STEPS } from "../constants/automation";
+
+const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { selectedFiles } = useFileSelection();
+
+  const [currentStep, setCurrentStep] = useState<'selection' | 'creation' | 'run'>(AUTOMATION_STEPS.SELECTION);
+  const [stepData, setStepData] = useState<AutomationStepData>({ step: AUTOMATION_STEPS.SELECTION });
+
+  const automateOperation = useAutomateOperation();
+  const toolRegistry = useFlatToolRegistry();
+  const hasResults = automateOperation.files.length > 0 || automateOperation.downloadUrl !== null;
+  const { savedAutomations, deleteAutomation, refreshAutomations } = useSavedAutomations();
+
+  const handleStepChange = (data: AutomationStepData) => {
+    // If navigating away from run step, reset automation results
+    if (currentStep === AUTOMATION_STEPS.RUN && data.step !== AUTOMATION_STEPS.RUN) {
+      automateOperation.resetResults();
+    }
+
+    // If navigating to selection step, always clear results
+    if (data.step === AUTOMATION_STEPS.SELECTION) {
+      automateOperation.resetResults();
+      automateOperation.clearError();
+    }
+
+    // If navigating to run step with a different automation, reset results
+    if (data.step === AUTOMATION_STEPS.RUN && data.automation &&
+        stepData.automation && data.automation.id !== stepData.automation.id) {
+      automateOperation.resetResults();
+    }
+
+    setStepData(data);
+    setCurrentStep(data.step);
+  };
+
+  const handleComplete = () => {
+    // Reset automation results when completing
+    automateOperation.resetResults();
+
+    // Reset to selection step
+    setCurrentStep(AUTOMATION_STEPS.SELECTION);
+    setStepData({ step: AUTOMATION_STEPS.SELECTION });
+    onComplete?.([]); // Pass empty array since automation creation doesn't produce files
+  };
+
+  const renderCurrentStep = () => {
+    switch (currentStep) {
+      case 'selection':
+        return (
+          <AutomationSelection
+            savedAutomations={savedAutomations}
+            onCreateNew={() => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.CREATE })}
+            onRun={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.RUN, automation })}
+            onEdit={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.EDIT, automation })}
+            onDelete={async (automation: AutomationConfig) => {
+              try {
+                await deleteAutomation(automation.id);
+              } catch (error) {
+                console.error('Failed to delete automation:', error);
+                onError?.(`Failed to delete automation: ${automation.name}`);
+              }
+            }}
+          />
+        );
+
+      case 'creation':
+        if (!stepData.mode) {
+          console.error('Creation mode is undefined');
+          return null;
+        }
+        return (
+          <AutomationCreation
+            mode={stepData.mode}
+            existingAutomation={stepData.automation}
+            onBack={() => handleStepChange({ step: AUTOMATION_STEPS.SELECTION })}
+            onComplete={() => {
+              refreshAutomations();
+              handleStepChange({ step: AUTOMATION_STEPS.SELECTION });
+            }}
+            toolRegistry={toolRegistry}
+          />
+        );
+
+      case 'run':
+        if (!stepData.automation) {
+          console.error('Automation config is undefined');
+          return null;
+        }
+        return (
+          <AutomationRun
+            automation={stepData.automation}
+            onComplete={handleComplete}
+            automateOperation={automateOperation}
+          />
+        );
+
+      default:
+        return <div>{t('automate.invalidStep', 'Invalid step')}</div>;
+    }
+  };
+
+  const createStep = (title: string, props: any, content?: React.ReactNode) => ({
+    title,
+    ...props,
+    content
+  });
+
+  // Always create files step to avoid conditional hook calls
+  const filesStep = createFilesToolStep(createStep, {
+    selectedFiles,
+    isCollapsed: hasResults,
+    placeholder: t('automate.files.placeholder', 'Select files to process with this automation')
+  });
+
+  const automationSteps = [
+    createStep(t('automate.selection.title', 'Automation Selection'), {
+      isVisible: true,
+      isCollapsed: currentStep !== AUTOMATION_STEPS.SELECTION,
+      onCollapsedClick: () => {
+        // Clear results when clicking back to selection
+        automateOperation.resetResults();
+        setCurrentStep(AUTOMATION_STEPS.SELECTION);
+        setStepData({ step: AUTOMATION_STEPS.SELECTION });
+      }
+    }, currentStep === AUTOMATION_STEPS.SELECTION ? renderCurrentStep() : null),
+
+    createStep(stepData.mode === AutomationMode.EDIT
+      ? t('automate.creation.editTitle', 'Edit Automation')
+      : t('automate.creation.createTitle', 'Create Automation'), {
+      isVisible: currentStep === AUTOMATION_STEPS.CREATION,
+      isCollapsed: false
+    }, currentStep === AUTOMATION_STEPS.CREATION ? renderCurrentStep() : null),
+
+    // Files step - only visible during run mode
+    {
+      ...filesStep,
+      isVisible: currentStep === AUTOMATION_STEPS.RUN
+    },
+
+    // Run step
+    createStep(t('automate.run.title', 'Run Automation'), {
+      isVisible: currentStep === AUTOMATION_STEPS.RUN,
+      isCollapsed: hasResults,
+    }, currentStep === AUTOMATION_STEPS.RUN ? renderCurrentStep() : null)
+  ];
+
+  return createToolFlow({
+    files: {
+      selectedFiles: currentStep === AUTOMATION_STEPS.RUN ? selectedFiles : [],
+      isCollapsed: currentStep !== AUTOMATION_STEPS.RUN || hasResults,
+      isVisible: false, // Hide the default files step since we add our own
+    },
+    steps: automationSteps,
+    review: {
+      isVisible: hasResults && currentStep === AUTOMATION_STEPS.RUN,
+      operation: automateOperation,
+      title: t('automate.reviewTitle', 'Automation Results')
+    }
+  });
+};
+
+export default Automate;
diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx
index 254dd4d2f..e9a4eaa80 100644
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@@ -11,7 +11,7 @@ import ChangePermissionsSettings from "../components/tools/changePermissions/Cha
 import { useChangePermissionsParameters } from "../hooks/tools/changePermissions/useChangePermissionsParameters";
 import { useChangePermissionsOperation } from "../hooks/tools/changePermissions/useChangePermissionsOperation";
 import { useChangePermissionsTips } from "../components/tooltips/useChangePermissionsTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -95,4 +95,7 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   });
 };
 
-export default ChangePermissions;
+// Static method to get the operation hook for automation
+ChangePermissions.tool = () => useChangePermissionsOperation;
+
+export default ChangePermissions as ToolComponent;
diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx
index ea3fdf977..4dbd3d985 100644
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { use, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileSelection } from "../contexts/FileContext";
@@ -10,7 +10,7 @@ import CompressSettings from "../components/tools/compress/CompressSettings";
 
 import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
 import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useCompressTips } from "../components/tooltips/useCompressTips";
 
 const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
@@ -94,4 +94,5 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Compress;
+
+export default Compress as ToolComponent;
diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx
index e2220f9ce..f0612ea83 100644
--- a/frontend/src/tools/Convert.tsx
+++ b/frontend/src/tools/Convert.tsx
@@ -10,7 +10,7 @@ import ConvertSettings from "../components/tools/convert/ConvertSettings";
 
 import { useConvertParameters } from "../hooks/tools/convert/useConvertParameters";
 import { useConvertOperation } from "../hooks/tools/convert/useConvertOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -133,4 +133,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Convert;
+// Static method to get the operation hook for automation
+Convert.tool = () => useConvertOperation;
+
+export default Convert as ToolComponent;
diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx
index 7f918759e..52db3b0de 100644
--- a/frontend/src/tools/OCR.tsx
+++ b/frontend/src/tools/OCR.tsx
@@ -11,7 +11,7 @@ import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
 
 import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
 import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useOCRTips } from "../components/tooltips/useOCRTips";
 
 const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
@@ -134,4 +134,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default OCR;
+// Static method to get the operation hook for automation
+OCR.tool = () => useOCROperation;
+
+export default OCR as ToolComponent;
diff --git a/frontend/src/tools/RemoveCertificateSign.tsx b/frontend/src/tools/RemoveCertificateSign.tsx
index 0e08e117c..c9a3f4b82 100644
--- a/frontend/src/tools/RemoveCertificateSign.tsx
+++ b/frontend/src/tools/RemoveCertificateSign.tsx
@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useRemoveCertificateSignParameters } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters";
 import { useRemoveCertificateSignOperation } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolP
   });
 };
 
-export default RemoveCertificateSign;
\ No newline at end of file
+// Static method to get the operation hook for automation
+RemoveCertificateSign.tool = () => useRemoveCertificateSignOperation;
+
+export default RemoveCertificateSign as ToolComponent;
\ No newline at end of file
diff --git a/frontend/src/tools/RemovePassword.tsx b/frontend/src/tools/RemovePassword.tsx
index 4b4d1f8d6..e84cf6e6c 100644
--- a/frontend/src/tools/RemovePassword.tsx
+++ b/frontend/src/tools/RemovePassword.tsx
@@ -11,7 +11,7 @@ import RemovePasswordSettings from "../components/tools/removePassword/RemovePas
 import { useRemovePasswordParameters } from "../hooks/tools/removePassword/useRemovePasswordParameters";
 import { useRemovePasswordOperation } from "../hooks/tools/removePassword/useRemovePasswordOperation";
 import { useRemovePasswordTips } from "../components/tooltips/useRemovePasswordTips";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -94,4 +94,7 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   });
 };
 
-export default RemovePassword;
+// Static method to get the operation hook for automation
+RemovePassword.tool = () => useRemovePasswordOperation;
+
+export default RemovePassword as ToolComponent;
diff --git a/frontend/src/tools/Repair.tsx b/frontend/src/tools/Repair.tsx
index 8cb061085..f5f09017a 100644
--- a/frontend/src/tools/Repair.tsx
+++ b/frontend/src/tools/Repair.tsx
@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useRepairParameters } from "../hooks/tools/repair/useRepairParameters";
 import { useRepairOperation } from "../hooks/tools/repair/useRepairOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Repair;
+// Static method to get the operation hook for automation
+Repair.tool = () => useRepairOperation;
+
+export default Repair as ToolComponent;
diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx
index 1d12d1bee..274331fd6 100644
--- a/frontend/src/tools/Sanitize.tsx
+++ b/frontend/src/tools/Sanitize.tsx
@@ -2,20 +2,18 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileSelection } from "../contexts/FileContext";
-import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
 
 import { useSanitizeParameters } from "../hooks/tools/sanitize/useSanitizeParameters";
 import { useSanitizeOperation } from "../hooks/tools/sanitize/useSanitizeOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
 
   const { selectedFiles } = useFileSelection();
-  const { actions } = useNavigationActions();
 
   const sanitizeParams = useSanitizeParameters();
   const sanitizeOperation = useSanitizeOperation();
@@ -91,4 +89,7 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Sanitize;
+// Static method to get the operation hook for automation
+Sanitize.tool = () => useSanitizeOperation;
+
+export default Sanitize as ToolComponent;
diff --git a/frontend/src/tools/SingleLargePage.tsx b/frontend/src/tools/SingleLargePage.tsx
index 7d268d11c..d071c2b99 100644
--- a/frontend/src/tools/SingleLargePage.tsx
+++ b/frontend/src/tools/SingleLargePage.tsx
@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useSingleLargePageParameters } from "../hooks/tools/singleLargePage/useSingleLargePageParameters";
 import { useSingleLargePageOperation } from "../hooks/tools/singleLargePage/useSingleLargePageOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
   });
 };
 
-export default SingleLargePage;
\ No newline at end of file
+// Static method to get the operation hook for automation
+SingleLargePage.tool = () => useSingleLargePageOperation;
+
+export default SingleLargePage as ToolComponent;
\ No newline at end of file
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index 18997e6a6..580b27c63 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -9,7 +9,7 @@ import SplitSettings from "../components/tools/split/SplitSettings";
 
 import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
 import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -90,4 +90,4 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Split;
+export default Split as ToolComponent;
diff --git a/frontend/src/tools/UnlockPdfForms.tsx b/frontend/src/tools/UnlockPdfForms.tsx
index a169c8e58..6c5bd4cb5 100644
--- a/frontend/src/tools/UnlockPdfForms.tsx
+++ b/frontend/src/tools/UnlockPdfForms.tsx
@@ -9,7 +9,7 @@ import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
 import { useUnlockPdfFormsParameters } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters";
 import { useUnlockPdfFormsOperation } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation";
-import { BaseToolProps } from "../types/tool";
+import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -77,4 +77,7 @@ const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   });
 };
 
-export default UnlockPdfForms;
\ No newline at end of file
+// Static method to get the operation hook for automation
+UnlockPdfForms.tool = () => useUnlockPdfFormsOperation;
+
+export default UnlockPdfForms as ToolComponent;
\ No newline at end of file
diff --git a/frontend/src/types/automation.ts b/frontend/src/types/automation.ts
new file mode 100644
index 000000000..ffbfe36b2
--- /dev/null
+++ b/frontend/src/types/automation.ts
@@ -0,0 +1,70 @@
+/**
+ * Types for automation functionality
+ */
+
+export interface AutomationOperation {
+  operation: string;
+  parameters: Record<string, any>;
+}
+
+export interface AutomationConfig {
+  id: string;
+  name: string;
+  description?: string;
+  operations: AutomationOperation[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AutomationTool {
+  id: string;
+  operation: string;
+  name: string;
+  configured: boolean;
+  parameters?: Record<string, any>;
+}
+
+export interface AutomationStepData {
+  step: 'selection' | 'creation' | 'run';
+  mode?: AutomationMode;
+  automation?: AutomationConfig;
+}
+
+export interface ExecutionStep {
+  id: string;
+  operation: string;
+  name: string;
+  status: 'pending' | 'running' | 'completed' | 'error';
+  error?: string;
+}
+
+export interface AutomationExecutionCallbacks {
+  onStepStart?: (stepIndex: number, operationName: string) => void;
+  onStepComplete?: (stepIndex: number, resultFiles: File[]) => void;
+  onStepError?: (stepIndex: number, error: string) => void;
+}
+
+export interface AutomateParameters extends AutomationExecutionCallbacks {
+  automationConfig?: AutomationConfig;
+}
+
+export enum AutomationMode {
+  CREATE = 'create',
+  EDIT = 'edit',
+  SUGGESTED = 'suggested'
+}
+
+export interface SuggestedAutomation {
+  id: string;
+  name: string;
+  description?: string;
+  operations: AutomationOperation[];
+  createdAt: string;
+  updatedAt: string;
+  icon: any; // MUI Icon component
+}
+
+// Export the AutomateParameters interface that was previously defined inline
+export interface AutomateParameters extends AutomationExecutionCallbacks {
+  automationConfig?: AutomationConfig;
+}
\ No newline at end of file
diff --git a/frontend/src/types/navigation.ts b/frontend/src/types/navigation.ts
new file mode 100644
index 000000000..61aa24cc3
--- /dev/null
+++ b/frontend/src/types/navigation.ts
@@ -0,0 +1,42 @@
+/**
+ * Shared navigation types to avoid circular dependencies
+ */
+
+// Navigation mode types - complete list to match contexts
+export type ModeType =
+  | 'viewer'
+  | 'pageEditor'
+  | 'fileEditor'
+  | 'merge'
+  | 'split'
+  | 'compress'
+  | 'ocr'
+  | 'convert'
+  | 'sanitize'
+  | 'addPassword'
+  | 'changePermissions'
+  | 'addWatermark'
+  | 'removePassword'
+  | 'single-large-page'
+  | 'repair'
+  | 'unlockPdfForms'
+  | 'removeCertificateSign';
+
+// Utility functions for mode handling
+export const isValidMode = (mode: string): mode is ModeType => {
+  const validModes: ModeType[] = [
+    'viewer', 'pageEditor', 'fileEditor', 'merge', 'split', 
+    'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 
+    'sanitize', 'addWatermark', 'removePassword', 'single-large-page',
+    'repair', 'unlockPdfForms', 'removeCertificateSign'
+  ];
+  return validModes.includes(mode as ModeType);
+};
+
+export const getDefaultMode = (): ModeType => 'pageEditor';
+
+// Route parsing result
+export interface ToolRoute {
+  mode: ModeType;
+  toolKey: string | null;
+}
\ No newline at end of file
diff --git a/frontend/src/types/navigationActions.ts b/frontend/src/types/navigationActions.ts
new file mode 100644
index 000000000..b227dac9d
--- /dev/null
+++ b/frontend/src/types/navigationActions.ts
@@ -0,0 +1,21 @@
+/**
+ * Navigation action interfaces to break circular dependencies
+ */
+
+import { ModeType } from './navigation';
+
+export interface NavigationActions {
+  setMode: (mode: ModeType) => void;
+  setHasUnsavedChanges: (hasChanges: boolean) => void;
+  showNavigationWarning: (show: boolean) => void;
+  requestNavigation: (navigationFn: () => void) => void;
+  confirmNavigation: () => void;
+  cancelNavigation: () => void;
+}
+
+export interface NavigationState {
+  currentMode: ModeType;
+  hasUnsavedChanges: boolean;
+  pendingNavigation: (() => void) | null;
+  showNavigationWarning: boolean;
+}
\ No newline at end of file
diff --git a/frontend/src/types/rightRail.ts b/frontend/src/types/rightRail.ts
new file mode 100644
index 000000000..1897a7170
--- /dev/null
+++ b/frontend/src/types/rightRail.ts
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export type RightRailSection = 'top' | 'middle' | 'bottom';
+
+export interface RightRailButtonConfig {
+	/** Unique id for the button, also used to bind action callbacks */
+	id: string;
+	/** Icon element to render */
+	icon: React.ReactNode;
+	/** Tooltip content (can be localized node) */
+	tooltip: React.ReactNode;
+	/** Optional ARIA label for a11y (separate from visual tooltip) */
+	ariaLabel?: string;
+	/** Optional i18n key carried by config */
+	templateKey?: string;
+	/** Visual grouping lane */
+	section?: RightRailSection;
+	/** Sorting within a section (lower first); ties broken by id */
+	order?: number;
+	/** Initial disabled state */
+	disabled?: boolean;
+	/** Initial visibility */
+	visible?: boolean;
+}
+
+export type RightRailAction = () => void;
diff --git a/frontend/src/types/tool.ts b/frontend/src/types/tool.ts
index 463b6a63e..0e1d48992 100644
--- a/frontend/src/types/tool.ts
+++ b/frontend/src/types/tool.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ToolOperationHook } from '../hooks/tools/shared/useToolOperation';
 
 export type MaxFiles = number; // 1=single, >1=limited, -1=unlimited
 export type ToolCategory = 'manipulation' | 'conversion' | 'analysis' | 'utility' | 'optimization' | 'security';
@@ -11,6 +12,29 @@ export interface BaseToolProps {
   onPreviewFile?: (file: File | null) => void;
 }
 
+/**
+ * Interface for tool components that support automation.
+ * Tools implementing this interface can be used in automation workflows.
+ */
+export interface AutomationCapableTool {
+  /**
+   * Static method that returns the operation hook for this tool.
+   * This enables automation to execute the tool programmatically.
+   */
+  tool: () => () => ToolOperationHook<any>;
+
+  /**
+   * Static method that returns the default parameters for this tool.
+   * This enables automation creation to initialize tools with proper defaults.
+   */
+  getDefaultParameters: () => any;
+}
+
+/**
+ * Type for tool components that can be used in automation
+ */
+export type ToolComponent = React.ComponentType<BaseToolProps> & AutomationCapableTool;
+
 export interface ToolStepConfig {
   type: ToolStepType;
   title: string;
diff --git a/frontend/src/utils/automationExecutor.ts b/frontend/src/utils/automationExecutor.ts
new file mode 100644
index 000000000..9ef1f6e2f
--- /dev/null
+++ b/frontend/src/utils/automationExecutor.ts
@@ -0,0 +1,157 @@
+import axios from 'axios';
+import { ToolRegistry } from '../data/toolsTaxonomy';
+import { AutomationConfig, AutomationExecutionCallbacks } from '../types/automation';
+import { AUTOMATION_CONSTANTS } from '../constants/automation';
+import { AutomationFileProcessor } from './automationFileProcessor';
+import { ResourceManager } from './resourceManager';
+
+
+/**
+ * Execute a tool operation directly without using React hooks
+ */
+export const executeToolOperation = async (
+  operationName: string, 
+  parameters: any, 
+  files: File[],
+  toolRegistry: ToolRegistry
+): Promise<File[]> => {
+  console.log(`🔧 Executing tool: ${operationName}`, { parameters, fileCount: files.length });
+  
+  const config = toolRegistry[operationName]?.operationConfig;
+  if (!config) {
+    console.error(`❌ Tool operation not supported: ${operationName}`);
+    throw new Error(`Tool operation not supported: ${operationName}`);
+  }
+
+  console.log(`📋 Using config:`, config);
+
+  try {
+    // Check if tool uses custom processor (like Convert tool)
+    if (config.customProcessor) {
+      console.log(`🎯 Using custom processor for ${config.operationType}`);
+      const resultFiles = await config.customProcessor(parameters, files);
+      console.log(`✅ Custom processor returned ${resultFiles.length} files`);
+      return resultFiles;
+    }
+
+    if (config.multiFileEndpoint) {
+      // Multi-file processing - single API call with all files
+      const endpoint = typeof config.endpoint === 'function' 
+        ? config.endpoint(parameters) 
+        : config.endpoint;
+      
+      console.log(`🌐 Making multi-file request to: ${endpoint}`);
+      const formData = (config.buildFormData as (params: any, files: File[]) => FormData)(parameters, files);
+      console.log(`📤 FormData entries:`, Array.from(formData.entries()));
+      
+      const response = await axios.post(endpoint, formData, { 
+        responseType: 'blob',
+        timeout: AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+      });
+
+      console.log(`📥 Response status: ${response.status}, size: ${response.data.size} bytes`);
+
+      // Multi-file responses are typically ZIP files, but may be single files
+      const result = await AutomationFileProcessor.extractAutomationZipFiles(response.data);
+      
+      if (result.errors.length > 0) {
+        console.warn(`⚠️ File processing warnings:`, result.errors);
+      }
+      
+      console.log(`📁 Processed ${result.files.length} files from response`);
+      return result.files;
+
+    } else {
+      // Single-file processing - separate API call per file
+      console.log(`🔄 Processing ${files.length} files individually`);
+      const resultFiles: File[] = [];
+      
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const endpoint = typeof config.endpoint === 'function' 
+          ? config.endpoint(parameters) 
+          : config.endpoint;
+        
+        console.log(`🌐 Making single-file request ${i+1}/${files.length} to: ${endpoint} for file: ${file.name}`);
+        const formData = (config.buildFormData as (params: any, file: File) => FormData)(parameters, file);
+        console.log(`📤 FormData entries:`, Array.from(formData.entries()));
+        
+        const response = await axios.post(endpoint, formData, { 
+          responseType: 'blob',
+          timeout: AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+        });
+
+        console.log(`📥 Response ${i+1} status: ${response.status}, size: ${response.data.size} bytes`);
+
+        // Create result file
+        const resultFile = ResourceManager.createResultFile(
+          response.data, 
+          file.name,
+          AUTOMATION_CONSTANTS.FILE_PREFIX
+        );
+        resultFiles.push(resultFile);
+        console.log(`✅ Created result file: ${resultFile.name}`);
+      }
+
+      console.log(`🎉 Single-file processing complete: ${resultFiles.length} files`);
+      return resultFiles;
+    }
+
+  } catch (error: any) {
+    console.error(`Tool operation ${operationName} failed:`, error);
+    throw new Error(`${operationName} operation failed: ${error.response?.data || error.message}`);
+  }
+};
+
+/**
+ * Execute an entire automation sequence
+ */
+export const executeAutomationSequence = async (
+  automation: any, 
+  initialFiles: File[],
+  toolRegistry: ToolRegistry,
+  onStepStart?: (stepIndex: number, operationName: string) => void,
+  onStepComplete?: (stepIndex: number, resultFiles: File[]) => void,
+  onStepError?: (stepIndex: number, error: string) => void
+): Promise<File[]> => {
+  console.log(`🚀 Starting automation sequence: ${automation.name || 'Unnamed'}`);
+  console.log(`📁 Initial files: ${initialFiles.length}`);
+  console.log(`🔧 Operations: ${automation.operations?.length || 0}`);
+  
+  if (!automation?.operations || automation.operations.length === 0) {
+    throw new Error('No operations in automation');
+  }
+
+  let currentFiles = [...initialFiles];
+
+  for (let i = 0; i < automation.operations.length; i++) {
+    const operation = automation.operations[i];
+    
+    console.log(`📋 Step ${i + 1}/${automation.operations.length}: ${operation.operation}`);
+    console.log(`📄 Input files: ${currentFiles.length}`);
+    console.log(`⚙️ Parameters:`, operation.parameters || {});
+    
+    try {
+      onStepStart?.(i, operation.operation);
+      
+      const resultFiles = await executeToolOperation(
+        operation.operation, 
+        operation.parameters || {}, 
+        currentFiles,
+        toolRegistry
+      );
+      
+      console.log(`✅ Step ${i + 1} completed: ${resultFiles.length} result files`);
+      currentFiles = resultFiles;
+      onStepComplete?.(i, resultFiles);
+      
+    } catch (error: any) {
+      console.error(`❌ Step ${i + 1} failed:`, error);
+      onStepError?.(i, error.message);
+      throw error;
+    }
+  }
+
+  console.log(`🎉 Automation sequence completed: ${currentFiles.length} final files`);
+  return currentFiles;
+};
\ No newline at end of file
diff --git a/frontend/src/utils/automationFileProcessor.ts b/frontend/src/utils/automationFileProcessor.ts
new file mode 100644
index 000000000..45abbaafc
--- /dev/null
+++ b/frontend/src/utils/automationFileProcessor.ts
@@ -0,0 +1,186 @@
+/**
+ * File processing utilities specifically for automation workflows
+ */
+
+import axios, { AxiosResponse } from 'axios';
+import { zipFileService } from '../services/zipFileService';
+import { ResourceManager } from './resourceManager';
+import { AUTOMATION_CONSTANTS } from '../constants/automation';
+
+export interface AutomationProcessingOptions {
+  timeout?: number;
+  responseType?: 'blob' | 'json';
+}
+
+export interface AutomationProcessingResult {
+  success: boolean;
+  files: File[];
+  errors: string[];
+}
+
+export class AutomationFileProcessor {
+  /**
+   * Check if a blob is a ZIP file by examining its header
+   */
+  static isZipFile(blob: Blob): boolean {
+    // This is a simple check - in a real implementation you might want to read the first few bytes
+    // For now, we'll rely on the extraction attempt and fallback
+    return blob.type === 'application/zip' || blob.type === 'application/x-zip-compressed';
+  }
+
+  /**
+   * Extract files from a ZIP blob during automation execution, with fallback for non-ZIP files
+   */
+  static async extractAutomationZipFiles(blob: Blob): Promise<AutomationProcessingResult> {
+    try {
+      const zipFile = ResourceManager.createTimestampedFile(
+        blob,
+        AUTOMATION_CONSTANTS.RESPONSE_ZIP_PREFIX,
+        '.zip',
+        'application/zip'
+      );
+
+      const result = await zipFileService.extractPdfFiles(zipFile);
+
+      if (!result.success || result.extractedFiles.length === 0) {
+        // Fallback: treat as single PDF file
+        const fallbackFile = ResourceManager.createTimestampedFile(
+          blob,
+          AUTOMATION_CONSTANTS.RESULT_FILE_PREFIX,
+          '.pdf'
+        );
+
+        return {
+          success: true,
+          files: [fallbackFile],
+          errors: [`ZIP extraction failed, treated as single file: ${result.errors?.join(', ') || 'Unknown error'}`]
+        };
+      }
+
+      return {
+        success: true,
+        files: result.extractedFiles,
+        errors: []
+      };
+    } catch (error) {
+      console.warn('Failed to extract automation ZIP files, falling back to single file:', error);
+      // Fallback: treat as single PDF file
+      const fallbackFile = ResourceManager.createTimestampedFile(
+        blob,
+        AUTOMATION_CONSTANTS.RESULT_FILE_PREFIX,
+        '.pdf'
+      );
+
+      return {
+        success: true,
+        files: [fallbackFile],
+        errors: [`ZIP extraction failed, treated as single file: ${error}`]
+      };
+    }
+  }
+
+  /**
+   * Process a single file through an automation step
+   */
+  static async processAutomationSingleFile(
+    endpoint: string,
+    formData: FormData,
+    originalFileName: string,
+    options: AutomationProcessingOptions = {}
+  ): Promise<AutomationProcessingResult> {
+    try {
+      const response = await axios.post(endpoint, formData, {
+        responseType: options.responseType || 'blob',
+        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+      });
+
+      if (response.status !== 200) {
+        return {
+          success: false,
+          files: [],
+          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`]
+        };
+      }
+
+      const resultFile = ResourceManager.createResultFile(
+        response.data,
+        originalFileName,
+        AUTOMATION_CONSTANTS.FILE_PREFIX
+      );
+
+      return {
+        success: true,
+        files: [resultFile],
+        errors: []
+      };
+    } catch (error: any) {
+      return {
+        success: false,
+        files: [],
+        errors: [`Automation step failed: ${error.response?.data || error.message}`]
+      };
+    }
+  }
+
+  /**
+   * Process multiple files through an automation step
+   */
+  static async processAutomationMultipleFiles(
+    endpoint: string,
+    formData: FormData,
+    options: AutomationProcessingOptions = {}
+  ): Promise<AutomationProcessingResult> {
+    try {
+      const response = await axios.post(endpoint, formData, {
+        responseType: options.responseType || 'blob',
+        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+      });
+
+      if (response.status !== 200) {
+        return {
+          success: false,
+          files: [],
+          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`]
+        };
+      }
+
+      // Multi-file responses are typically ZIP files
+      return await this.extractAutomationZipFiles(response.data);
+    } catch (error: any) {
+      return {
+        success: false,
+        files: [],
+        errors: [`Automation step failed: ${error.response?.data || error.message}`]
+      };
+    }
+  }
+
+  /**
+   * Build form data for automation tool operations
+   */
+  static buildAutomationFormData(
+    parameters: Record<string, any>,
+    files: File | File[],
+    fileFieldName: string = 'fileInput'
+  ): FormData {
+    const formData = new FormData();
+
+    // Add files
+    if (Array.isArray(files)) {
+      files.forEach(file => formData.append(fileFieldName, file));
+    } else {
+      formData.append(fileFieldName, files);
+    }
+
+    // Add parameters
+    Object.entries(parameters).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach(item => formData.append(key, item));
+      } else if (value !== undefined && value !== null) {
+        formData.append(key, value);
+      }
+    });
+
+    return formData;
+  }
+}
diff --git a/frontend/src/utils/convertUtils.ts b/frontend/src/utils/convertUtils.ts
index 9c058c5ce..63e00da46 100644
--- a/frontend/src/utils/convertUtils.ts
+++ b/frontend/src/utils/convertUtils.ts
@@ -1,7 +1,9 @@
 import { 
   CONVERSION_ENDPOINTS,
   ENDPOINT_NAMES,
-  EXTENSION_TO_ENDPOINT
+  EXTENSION_TO_ENDPOINT,
+  CONVERSION_MATRIX,
+  TO_FORMAT_OPTIONS
 } from '../constants/convertConstants';
 
 /**
@@ -56,4 +58,33 @@ export const isImageFormat = (extension: string): boolean => {
  */
 export const isWebFormat = (extension: string): boolean => {
   return ['html', 'zip'].includes(extension.toLowerCase());
+};
+
+/**
+ * Gets available target extensions for a given source extension
+ * Extracted from useConvertParameters to be reusable in automation settings
+ */
+export const getAvailableToExtensions = (fromExtension: string): Array<{value: string, label: string, group: string}> => {
+  if (!fromExtension) return [];
+
+  // Handle dynamic format identifiers (file-<extension>)
+  if (fromExtension.startsWith('file-')) {
+    // Dynamic format - use 'any' conversion options (file-to-pdf)
+    const supportedExtensions = CONVERSION_MATRIX['any'] || [];
+    return TO_FORMAT_OPTIONS.filter(option =>
+      supportedExtensions.includes(option.value)
+    );
+  }
+
+  let supportedExtensions = CONVERSION_MATRIX[fromExtension] || [];
+
+  // If no explicit conversion exists, but file-to-pdf might be available,
+  // fall back to 'any' conversion (which converts unknown files to PDF via file-to-pdf)
+  if (supportedExtensions.length === 0 && fromExtension !== 'any') {
+    supportedExtensions = CONVERSION_MATRIX['any'] || [];
+  }
+
+  return TO_FORMAT_OPTIONS.filter(option =>
+    supportedExtensions.includes(option.value)
+  );
 };
\ No newline at end of file
diff --git a/frontend/src/utils/resourceManager.ts b/frontend/src/utils/resourceManager.ts
new file mode 100644
index 000000000..4dae97e01
--- /dev/null
+++ b/frontend/src/utils/resourceManager.ts
@@ -0,0 +1,71 @@
+/**
+ * Utilities for managing file resources and blob URLs
+ */
+
+import { useCallback } from 'react';
+import { AUTOMATION_CONSTANTS } from '../constants/automation';
+
+export class ResourceManager {
+  private static blobUrls = new Set<string>();
+
+  /**
+   * Create a blob URL and track it for cleanup
+   */
+  static createBlobUrl(blob: Blob): string {
+    const url = URL.createObjectURL(blob);
+    this.blobUrls.add(url);
+    return url;
+  }
+
+  /**
+   * Revoke a specific blob URL
+   */
+  static revokeBlobUrl(url: string): void {
+    if (this.blobUrls.has(url)) {
+      URL.revokeObjectURL(url);
+      this.blobUrls.delete(url);
+    }
+  }
+
+  /**
+   * Revoke all tracked blob URLs
+   */
+  static revokeAllBlobUrls(): void {
+    this.blobUrls.forEach(url => URL.revokeObjectURL(url));
+    this.blobUrls.clear();
+  }
+
+  /**
+   * Create a File with proper naming convention
+   */
+  static createResultFile(
+    data: BlobPart, 
+    originalName: string, 
+    prefix: string = AUTOMATION_CONSTANTS.PROCESSED_FILE_PREFIX,
+    type: string = 'application/pdf'
+  ): File {
+    return new File([data], `${prefix}${originalName}`, { type });
+  }
+
+  /**
+   * Create a timestamped file for responses
+   */
+  static createTimestampedFile(
+    data: BlobPart,
+    prefix: string,
+    extension: string = '.pdf',
+    type: string = 'application/pdf'
+  ): File {
+    const timestamp = Date.now();
+    return new File([data], `${prefix}${timestamp}${extension}`, { type });
+  }
+}
+
+/**
+ * Hook for automatic cleanup on component unmount
+ */
+export function useResourceCleanup(): () => void {
+  return useCallback(() => {
+    ResourceManager.revokeAllBlobUrls();
+  }, []);
+}
\ No newline at end of file
diff --git a/frontend/src/utils/urlRouting.ts b/frontend/src/utils/urlRouting.ts
index fbf6c1c3c..05493423a 100644
--- a/frontend/src/utils/urlRouting.ts
+++ b/frontend/src/utils/urlRouting.ts
@@ -3,12 +3,7 @@
  * Provides clean URL routing for the V2 tool system
  */
 
-import { ModeType } from '../contexts/NavigationContext';
-
-export interface ToolRoute {
-  mode: ModeType;
-  toolKey?: string;
-}
+import { ModeType, isValidMode as isValidModeType, getDefaultMode, ToolRoute } from '../types/navigation';
 
 /**
  * Parse the current URL to extract tool routing information
@@ -45,7 +40,7 @@ export function parseToolRoute(): ToolRoute {
   
   // Check for query parameter fallback (e.g., ?tool=split)
   const toolParam = searchParams.get('tool');
-  if (toolParam && isValidMode(toolParam)) {
+  if (toolParam && isValidModeType(toolParam)) {
     return {
       mode: toolParam as ModeType,
       toolKey: toolParam
@@ -54,7 +49,8 @@ export function parseToolRoute(): ToolRoute {
   
   // Default to page editor for home page
   return {
-    mode: 'pageEditor'
+    mode: getDefaultMode(),
+    toolKey: null
   };
 }
 
@@ -137,16 +133,7 @@ export function getToolDisplayName(toolKey: string): string {
   return displayNames[toolKey] || toolKey;
 }
 
-/**
- * Check if a mode is valid
- */
-function isValidMode(mode: string): mode is ModeType {
-  const validModes: ModeType[] = [
-    'viewer', 'pageEditor', 'fileEditor', 'merge', 'split', 
-    'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 'sanitize'
-  ];
-  return validModes.includes(mode as ModeType);
-}
+// Note: isValidMode is now imported from types/navigation.ts
 
 /**
  * Generate shareable URL for current tool state
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 215a9378b..6886183a1 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -42,7 +42,7 @@
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
     // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */