Restructure frontend code to allow for extensions (#4721)

# Description of Changes
Move frontend code into `core` folder and add infrastructure for
`proprietary` folder to include premium, non-OSS features

frontend/src/core/components/tools/FullscreenToolList.tsx

@@ -0,0 +1,253 @@
+import { useMemo } from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ToolRegistryEntry, getSubcategoryLabel, getSubcategoryColor, getSubcategoryIcon } from '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+import { useToolSections } from '@app/hooks/useToolSections';
+import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import StarRoundedIcon from '@mui/icons-material/StarRounded';
+import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
+import Badge from '@app/components/shared/Badge';
+import '@app/components/tools/ToolPanel.css';
+import DetailedToolItem from '@app/components/tools/fullscreen/DetailedToolItem';
+import CompactToolItem from '@app/components/tools/fullscreen/CompactToolItem';
+import { useFavoriteToolItems } from '@app/hooks/tools/useFavoriteToolItems';
+
+interface FullscreenToolListProps {
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  searchQuery: string;
+  showDescriptions: boolean;
+  selectedToolKey: string | null;
+  matchedTextMap: Map<string, string>;
+  onSelect: (id: ToolId) => void;
+}
+
+const FullscreenToolList = ({
+  filteredTools,
+  searchQuery,
+  showDescriptions,
+  selectedToolKey,
+  matchedTextMap: _matchedTextMap,
+  onSelect,
+}: FullscreenToolListProps) => {
+  const { t } = useTranslation();
+  const { toolRegistry, favoriteTools } = useToolWorkflow();
+
+  const { sections, searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  const tooltipPortalTarget = typeof document !== 'undefined' ? document.body : undefined;
+
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
+
+  const quickSection = useMemo(() => sections.find(section => section.key === 'quick'), [sections]);
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string, tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string, tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach(sc => sc.tools.forEach(t => items.push(t)));
+    return items;
+  }, [quickSection]);
+
+  // Show recommended/favorites section only when not searching
+  const showRecentFavorites = searchQuery.trim().length === 0 && ((recommendedItems.length > 0) || favoriteToolItems.length > 0);
+
+  const subcategoryGroups = useMemo(() => {
+    if (searchQuery.trim().length > 0) {
+      return searchGroups;
+    }
+    const allSection = sections.find(section => section.key === 'all');
+    return allSection ? allSection.subcategories : [];
+  }, [searchGroups, sections, searchQuery]);
+
+  if (subcategoryGroups.length === 0 && !showRecentFavorites) {
+    return (
+      <div className="tool-panel__fullscreen-empty">
+        <NoToolsFound />
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.fullscreen.noResults', 'Try adjusting your search or toggle descriptions to find what you need.')}
+        </Text>
+      </div>
+    );
+  }
+
+  const containerClass = showDescriptions
+    ? 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--detailed'
+    : 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--compact';
+
+  // Helper function to render a tool item
+  const renderToolItem = (id: ToolId, tool: ToolRegistryEntry) => {
+    const isSelected = selectedToolKey === id;
+
+    const handleClick = () => {
+      if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') return;
+      if (tool.link) {
+        window.open(tool.link, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      onSelect(id as ToolId);
+    };
+
+    if (showDescriptions) {
+      return (
+        <DetailedToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} />
+      );
+    }
+
+    return (
+      <CompactToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} tooltipPortalTarget={tooltipPortalTarget} />
+    );
+  };
+
+  return (
+    <div className={containerClass}>
+      {showRecentFavorites && (
+        <>
+          {favoriteToolItems.length > 0 && (
+            <section
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-favorites)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-favorites)',
+                    }}
+                    aria-hidden
+                  >
+                    <StarRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.favorites', 'Favourites')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-favorites)"
+                >
+                  {favoriteToolItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+
+          {recommendedItems.length > 0 && (
+            <section
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-recommended)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-recommended)',
+                    }}
+                    aria-hidden
+                  >
+                    <ThumbUpRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.recommended', 'Recommended')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-recommended)"
+                >
+                  {recommendedItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+        </>
+      )}
+
+      {subcategoryGroups.map(({ subcategoryId, tools }) => {
+        const categoryColor = getSubcategoryColor(subcategoryId);
+
+        return (
+          <section
+            key={subcategoryId}
+            className={`tool-panel__fullscreen-group ${showDescriptions ? 'tool-panel__fullscreen-group--detailed' : 'tool-panel__fullscreen-group--compact'}`}
+            style={{
+              borderColor: `color-mix(in srgb, ${categoryColor} 25%, var(--fullscreen-border-subtle-65))`,
+            }}
+          >
+            <header className="tool-panel__fullscreen-section-header">
+              <div className="tool-panel__fullscreen-section-title">
+                <span
+                  className="tool-panel__fullscreen-section-icon"
+                  style={{
+                    color: categoryColor,
+                  }}
+                  aria-hidden
+                >
+                  {getSubcategoryIcon(subcategoryId)}
+                </span>
+                <Text
+                  size="sm"
+                  fw={600}
+                  tt="uppercase"
+                  lts={0.5}
+                  style={{
+                    color: categoryColor,
+                  }}
+                >
+                  {getSubcategoryLabel(t, subcategoryId)}
+                </Text>
+              </div>
+              <Badge
+                size="sm"
+                variant="colored"
+                color={categoryColor}
+              >
+                {tools.length}
+              </Badge>
+            </header>
+
+            {showDescriptions ? (
+              <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            ) : (
+              <div className="tool-panel__fullscreen-list">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FullscreenToolList;
+
+

frontend/src/core/components/tools/FullscreenToolSurface.tsx

@@ -0,0 +1,160 @@
+import { useState, useRef } from 'react';
+import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
+import FullscreenToolList from '@app/components/tools/FullscreenToolList';
+import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+import { useFocusTrap } from '@app/hooks/useFocusTrap';
+import { BASE_PATH } from '@app/constants/app';
+import { Tooltip } from '@app/components/shared/Tooltip';
+import '@app/components/tools/ToolPanel.css';
+import { ToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+
+interface FullscreenToolSurfaceProps {
+  searchQuery: string;
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  selectedToolKey: string | null;
+  showDescriptions: boolean;
+  matchedTextMap: Map<string, string>;
+  onSearchChange: (value: string) => void;
+  onSelect: (id: ToolId) => void;
+  onToggleDescriptions: () => void;
+  onExitFullscreenMode: () => void;
+  toggleLabel: string;
+  geometry: ToolPanelGeometry | null;
+}
+
+const FullscreenToolSurface = ({
+  searchQuery,
+  toolRegistry,
+  filteredTools,
+  selectedToolKey,
+  showDescriptions,
+  matchedTextMap,
+  onSearchChange,
+  onSelect,
+  onToggleDescriptions,
+  onExitFullscreenMode,
+  toggleLabel,
+  geometry,
+}: FullscreenToolSurfaceProps) => {
+  const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const [isExiting, setIsExiting] = useState(false);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+
+  // Enable focus trap when surface is active
+  useFocusTrap(surfaceRef, !isExiting);
+
+  const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
+  const brandIconSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
+    colorScheme === "dark" ? "Dark" : "Light"
+  }.svg`;
+  const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
+    colorScheme === "dark" ? "White" : "Black"
+  }Text.svg`;
+
+  const handleExit = () => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      onExitFullscreenMode();
+      return;
+    }
+
+    setIsExiting(true);
+    const el = surfaceRef.current;
+    if (!el) {
+      onExitFullscreenMode();
+      return;
+    }
+    // Rely on CSS animation end rather than duplicating timing in JS
+    el.addEventListener('animationend', () => {
+      onExitFullscreenMode();
+    }, { once: true });
+};
+
+
+  const style = geometry
+    ? {
+        left: `${geometry.left}px`,
+        top: `${geometry.top}px`,
+        width: `${geometry.width}px`,
+        height: `${geometry.height}px`,
+      }
+    : undefined;
+
+  return (
+    <div
+      className="tool-panel__fullscreen-surface"
+      style={style}
+      role="region"
+      aria-label={t('toolPanel.fullscreen.heading', 'All tools (fullscreen view)')}
+      data-tour="tool-panel"
+    >
+      <div
+        ref={surfaceRef}
+        className={`tool-panel__fullscreen-surface-inner ${isExiting ? 'tool-panel__fullscreen-surface-inner--exiting' : ''}`}
+      >
+        <header className="tool-panel__fullscreen-header">
+          <div className="tool-panel__fullscreen-brand">
+            <img src={brandIconSrc} alt="" className="tool-panel__fullscreen-brand-icon" />
+            <img src={brandTextSrc} alt={brandAltText} className="tool-panel__fullscreen-brand-text" />
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <Tooltip content={toggleLabel} position="bottom" arrow={true} openOnFocus={false} containerStyle={{ zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE }}>
+              <ActionIcon
+                variant="subtle"
+                radius="xl"
+                size="md"
+                onClick={handleExit}
+                aria-label={toggleLabel}
+                style={{ color: 'var(--right-rail-icon)' }}
+              >
+                <DoubleArrowIcon fontSize="small" style={{ transform: 'rotate(180deg)' }} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+        </header>
+
+        <div className="tool-panel__fullscreen-controls">
+          <ToolSearch
+            value={searchQuery}
+            onChange={onSearchChange}
+            toolRegistry={toolRegistry}
+            mode="filter"
+            autoFocus
+          />
+          <Switch
+            checked={showDescriptions}
+            onChange={() => onToggleDescriptions()}
+            size="md"
+            labelPosition="left"
+            label={t('toolPanel.fullscreen.showDetails', 'Show Details')}
+          />
+        </div>
+
+        <div className="tool-panel__fullscreen-body">
+          <ScrollArea className="tool-panel__fullscreen-scroll" offsetScrollbars>
+            <FullscreenToolList
+              filteredTools={filteredTools}
+              searchQuery={searchQuery}
+              showDescriptions={showDescriptions}
+              selectedToolKey={selectedToolKey}
+              matchedTextMap={matchedTextMap}
+              onSelect={onSelect}
+            />
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FullscreenToolSurface;
+
+

frontend/src/core/components/tools/SearchResults.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Stack } from '@mantine/core';
+import { getSubcategoryLabel, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+import ToolButton from '@app/components/tools/toolPicker/ToolButton';
+import { useTranslation } from 'react-i18next';
+import { useToolSections } from '@app/hooks/useToolSections';
+import SubcategoryHeader from '@app/components/tools/shared/SubcategoryHeader';
+import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
+import "@app/components/tools/toolPicker/ToolPicker.css";
+
+interface SearchResultsProps {
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  onSelect: (id: string) => void;
+  searchQuery?: string;
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
+  const { t } = useTranslation();
+  const { searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (filteredTools && Array.isArray(filteredTools)) {
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
+
+  if (searchGroups.length === 0) {
+    return <NoToolsFound />;
+  }
+
+  return (
+    <Stack p="sm" gap="xs"
+        className="tool-picker-scrollable">
+      {searchGroups.map(group => (
+        <Box key={group.subcategoryId}  w="100%">
+          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
+          <Stack  gap="xs">
+            {group.tools.map(({ id, tool }) => {
+              const matchedText = matchedTextMap.get(id);
+              // Check if the match was from synonyms and show the actual synonym that matched
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym =>
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              );
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym =>
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              ) : undefined;
+
+              return (
+                <ToolButton
+                  key={id}
+                  id={id}
+                  tool={tool}
+                  isSelected={false}
+                  onSelect={onSelect}
+                  matchedSynonym={matchedSynonym}
+                />
+              );
+            })}
+          </Stack>
+        </Box>
+      ))}
+      {/* Global spacer to allow scrolling past last row in search mode */}
+      <div aria-hidden style={{ height: 200 }} />
+    </Stack>
+  );
+};
+
+export default SearchResults;

frontend/src/core/components/tools/ToolLoadingFallback.tsx

@@ -0,0 +1,14 @@
+import { Center, Stack, Loader, Text } from "@mantine/core";
+
+export default function ToolLoadingFallback({ toolName }: { toolName?: string }) {
+  return (
+    <Center h="100%" w="100%">
+      <Stack align="center" gap="md">
+        <Loader size="lg" />
+        <Text c="dimmed" size="sm">
+          {toolName ? `Loading ${toolName}...` : "Loading tool..."}
+        </Text>
+      </Stack>
+    </Center>
+  );
+}

frontend/src/core/components/tools/ToolPanel.css

@@ -0,0 +1,548 @@
+/* CSS Custom Properties for Fullscreen Mode */
+.tool-panel__fullscreen-surface-inner {
+  --fullscreen-bg-surface-1: color-mix(in srgb, var(--bg-toolbar) 96%, transparent);
+  --fullscreen-bg-surface-2: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  --fullscreen-bg-header: var(--bg-toolbar);
+  --fullscreen-bg-controls-1: var(--bg-toolbar);
+  --fullscreen-bg-controls-2: color-mix(in srgb, var(--bg-toolbar) 95%, var(--bg-background));
+  --fullscreen-bg-body-1: color-mix(in srgb, var(--bg-background) 86%, transparent);
+  --fullscreen-bg-body-2: color-mix(in srgb, var(--bg-toolbar) 78%, transparent);
+  --fullscreen-bg-group: color-mix(in srgb, var(--bg-toolbar) 82%, transparent);
+  --fullscreen-bg-item: color-mix(in srgb, var(--bg-toolbar) 88%, transparent);
+  --fullscreen-bg-list-item: color-mix(in srgb, var(--bg-toolbar) 86%, transparent);
+  --fullscreen-bg-icon-detailed: color-mix(in srgb, var(--bg-muted) 75%, transparent);
+  --fullscreen-bg-icon-compact: color-mix(in srgb, var(--bg-muted) 70%, transparent);
+  --fullscreen-border-subtle-75: color-mix(in srgb, var(--border-subtle) 75%, transparent);
+  --fullscreen-border-subtle-70: color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  --fullscreen-border-subtle-65: color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  --fullscreen-border-favorites: color-mix(in srgb, var(--special-color-favorites) 25%, var(--border-subtle));
+  --fullscreen-border-recommended: color-mix(in srgb, var(--special-color-recommended) 25%, var(--border-subtle));
+  --fullscreen-shadow-primary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%, transparent);
+  --fullscreen-shadow-secondary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%, transparent);
+  --fullscreen-shadow-group: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%, transparent);
+  --fullscreen-accent-hover: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-accent-selected: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle));
+  --fullscreen-accent-ring: color-mix(in srgb, var(--text-primary) 15%, transparent);
+  --fullscreen-accent-list-bg: color-mix(in srgb, var(--text-primary) 8%, var(--bg-toolbar));
+  --fullscreen-accent-list-border: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-text-icon: color-mix(in srgb, var(--text-primary) 90%, var(--text-muted));
+  --fullscreen-text-icon-compact: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted));
+}
+
+.tool-panel {
+  position: relative;
+  transition: width 0.3s ease, max-width 0.3s ease;
+}
+
+.tool-panel--fullscreen-active {
+  overflow: visible !important;
+}
+
+.tool-panel__search-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.tool-panel__search-row .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__mode-toggle {
+  transition: transform 0.2s ease;
+}
+
+.tool-panel__mode-toggle:hover {
+  transform: scale(1.04);
+}
+
+.tool-panel--fullscreen {
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.tool-panel__fullscreen-surface {
+  position: fixed;
+  display: flex;
+  pointer-events: none;
+  z-index: var(--z-fullscreen-surface);
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.tool-panel__fullscreen-surface-inner {
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+  background:
+    linear-gradient(
+      140deg,
+      var(--fullscreen-bg-surface-1),
+      var(--fullscreen-bg-surface-2)
+    )
+    padding-box;
+  border: 1px solid var(--fullscreen-border-subtle-75);
+  box-shadow: none;
+  backdrop-filter: blur(18px);
+  overflow: hidden;
+  /* Shared animation durations for JS + CSS (sourced from theme.css) */
+  --fullscreen-anim-in-duration: var(--fullscreen-anim-duration-in);
+  --fullscreen-anim-out-duration: var(--fullscreen-anim-duration-out);
+  animation: tool-panel-fullscreen-slide-in var(--fullscreen-anim-in-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-surface-inner--exiting {
+  animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__fullscreen-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.tool-panel__fullscreen-brand-icon {
+  height: 1.75rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-brand-text {
+  height: 1.25rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--tool-panel-search-border-bottom);
+  background: var(--tool-panel-search-bg);
+}
+
+.tool-panel__fullscreen-controls .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__fullscreen-body {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+}
+
+.tool-panel__fullscreen-scroll {
+  height: 100%;
+}
+
+/* fullscreen group layout */
+.tool-panel__fullscreen-groups {
+  padding: 1.5rem 1.75rem;
+  column-width: 18rem;
+  column-gap: 1.5rem;
+}
+
+.tool-panel__fullscreen-groups--compact {
+  column-width: 17rem;
+}
+
+.tool-panel__fullscreen-groups--detailed {
+  column-width: auto;
+}
+
+.tool-panel__fullscreen-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0 0 1.5rem;
+  padding: 0.65rem 0.75rem 1rem;
+  border-radius: 1rem;
+  background: var(--fullscreen-bg-group);
+  border: 1px solid var(--fullscreen-border-subtle-65);
+  box-shadow: 0 14px 32px var(--fullscreen-shadow-group);
+  break-inside: avoid;
+  backdrop-filter: blur(10px);
+}
+
+.tool-panel__fullscreen-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.1rem 0.15rem 0.35rem;
+}
+
+.tool-panel__fullscreen-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tool-panel__fullscreen-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+}
+
+.tool-panel__fullscreen-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.tool-panel__fullscreen-grid--detailed {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.tool-panel__fullscreen-item {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid var(--fullscreen-border-subtle-70);
+  border-radius: 0.95rem;
+  background: var(--fullscreen-bg-item);
+  backdrop-filter: blur(6px);
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  /* Allow flex children to shrink without forcing horizontal overflow */
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-item:focus-visible {
+  outline: 2px solid var(--fullscreen-accent-selected);
+  outline-offset: 3px;
+}
+
+.tool-panel__fullscreen-item[aria-disabled="true"],
+.tool-panel__fullscreen-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]):not(:disabled) {
+  transform: translateY(-2px);
+  border-color: var(--fullscreen-accent-hover);
+  box-shadow: var(--shadow-xl, 0 18px 34px rgba(15, 23, 42, 0.14));
+}
+
+.tool-panel__fullscreen-item--selected {
+  border-color: var(--fullscreen-accent-selected);
+  box-shadow: 0 0 0 2px var(--fullscreen-accent-ring);
+}
+
+.tool-panel__fullscreen-item--detailed {
+  min-height: 7.5rem;
+}
+
+.tool-panel__fullscreen-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-item:hover .tool-panel__fullscreen-star {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star-compact {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-list-item:hover .tool-panel__fullscreen-star-compact {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-group--special {
+  border-width: 1px;
+}
+
+.tool-panel__fullscreen-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: var(--fullscreen-bg-icon-detailed);
+  color: var(--fullscreen-text-icon);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 12%, transparent),
+    color-mix(in srgb, var(--text-primary) 4%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.75rem;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon {
+  transform: scale(1.08);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 15%, transparent);
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-icon svg {
+  font-size: 1.65rem;
+  position: relative;
+  z-index: var(--z-fullscreen-icon-svg);
+}
+
+.tool-panel__fullscreen-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  text-align: left;
+  /* Prevent long content (names, descriptions, shortcuts) from overflowing */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-name {
+  color: var(--text-primary);
+}
+
+.tool-panel__fullscreen-description {
+  line-height: 1.45;
+}
+
+/* Ensure long words or unbroken strings wrap instead of overflowing */
+.tool-panel__fullscreen-name,
+.tool-panel__fullscreen-description,
+.tool-panel__fullscreen-match {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.tool-panel__fullscreen-match {
+  font-style: italic;
+}
+
+.tool-panel__fullscreen-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+  /* Allow hotkey chips to wrap on small widths to avoid overflow */
+  flex-wrap: wrap;
+  row-gap: 0.25rem;
+}
+
+.tool-panel__fullscreen-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.tool-panel__fullscreen-list-item {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.5rem 0.55rem 0.65rem;
+  border-radius: 0.65rem;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease;
+  background: var(--fullscreen-bg-list-item);
+  border: 1px solid transparent;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.tool-panel__fullscreen-list-item[aria-disabled="true"],
+.tool-panel__fullscreen-list-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]):not(:disabled),
+.tool-panel__fullscreen-list-item--selected {
+  background: var(--fullscreen-accent-list-bg);
+  border-color: var(--fullscreen-accent-list-border);
+}
+
+.tool-panel__fullscreen-list-item--selected {
+  transform: translateX(2px);
+}
+
+.tool-panel__fullscreen-list-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 0.6rem;
+  background: var(--fullscreen-bg-icon-compact);
+  color: var(--fullscreen-text-icon-compact);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-list-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 10%, transparent),
+    color-mix(in srgb, var(--text-primary) 3%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.6rem;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon {
+  transform: scale(1.06);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 12%, transparent);
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-icon svg {
+  position: relative;
+  z-index: 1;
+}
+
+.tool-panel__fullscreen-list-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  text-align: left;
+}
+
+.tool-panel__fullscreen-empty {
+  padding: 2rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@keyframes tool-panel-fullscreen-slide-in {
+  from {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes tool-panel-fullscreen-slide-out {
+  from {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-panel__fullscreen-surface-inner {
+    animation: none !important;
+  }
+
+  .tool-panel__mode-toggle {
+    transition: none;
+  }
+
+  .tool-panel__fullscreen-item,
+  .tool-panel__fullscreen-list-item {
+    transition: none;
+  }
+}
+
+@media (max-width: 1440px) {
+  .tool-panel__fullscreen-content {
+    padding-inline: 1.5rem;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 15rem;
+  }
+}
+
+@media (max-width: 1280px) {
+  .tool-panel__fullscreen-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .tool-panel__fullscreen-controls .mantine-Switch-root {
+    justify-content: flex-end;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 14rem;
+  }
+}
+
+
+

frontend/src/core/components/tools/ToolPanel.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo } from 'react';
+import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import { usePreferences } from '@app/contexts/PreferencesContext';
+import ToolPicker from '@app/components/tools/ToolPicker';
+import SearchResults from '@app/components/tools/SearchResults';
+import ToolRenderer from '@app/components/tools/ToolRenderer';
+import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
+import { useSidebarContext } from "@app/contexts/SidebarContext";
+import rainbowStyles from '@app/styles/rainbow.module.css';
+import { ActionIcon, ScrollArea } from '@mantine/core';
+import { ToolId } from '@app/types/toolId';
+import { useMediaQuery } from '@mantine/hooks';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import FullscreenToolSurface from '@app/components/tools/FullscreenToolSurface';
+import { useToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
+import { useRightRail } from '@app/contexts/RightRailContext';
+import { Tooltip } from '@app/components/shared/Tooltip';
+import '@app/components/tools/ToolPanel.css';
+
+// No props needed - component uses context
+
+export default function ToolPanel() {
+  const { t } = useTranslation();
+  const { isRainbowMode } = useRainbowThemeContext();
+  const { sidebarRefs } = useSidebarContext();
+  const { toolPanelRef, quickAccessRef, rightRailRef } = sidebarRefs;
+  const isMobile = useMediaQuery('(max-width: 1024px)');
+
+  const {
+    leftPanelView,
+    isPanelVisible,
+    searchQuery,
+    filteredTools,
+    toolRegistry,
+    setSearchQuery,
+    selectedToolKey,
+    handleToolSelect,
+    setPreviewFile,
+    toolPanelMode,
+    setToolPanelMode,
+    setLeftPanelView,
+    readerMode,
+  } = useToolWorkflow();
+
+  const { setAllRightRailButtonsDisabled } = useRightRail();
+  const { preferences, updatePreference } = usePreferences();
+
+  const isFullscreenMode = toolPanelMode === 'fullscreen';
+  const toolPickerVisible = !readerMode;
+  const fullscreenExpanded = isFullscreenMode && leftPanelView === 'toolPicker' && !isMobile && toolPickerVisible;
+
+
+  // Disable right rail buttons when fullscreen mode is active
+  useEffect(() => {
+    setAllRightRailButtonsDisabled(fullscreenExpanded);
+  }, [fullscreenExpanded, setAllRightRailButtonsDisabled]);
+
+  const fullscreenGeometry = useToolPanelGeometry({
+    enabled: fullscreenExpanded,
+    toolPanelRef,
+    quickAccessRef,
+    rightRailRef,
+  });
+
+  const toggleLabel = isFullscreenMode
+    ? t('toolPanel.toggle.sidebar', 'Switch to sidebar mode')
+    : t('toolPanel.toggle.fullscreen', 'Switch to fullscreen mode');
+
+  const handleModeToggle = () => {
+    const nextMode = isFullscreenMode ? 'sidebar' : 'fullscreen';
+    setToolPanelMode(nextMode);
+
+    if (nextMode === 'fullscreen' && leftPanelView !== 'toolPicker') {
+      setLeftPanelView('toolPicker');
+    }
+  };
+
+  const computedWidth = () => {
+    if (isMobile) {
+      return '100%';
+    }
+
+    if (!isPanelVisible) {
+      return '0';
+    }
+
+    return '18.5rem';
+  };
+
+  const matchedTextMap = useMemo(() => {
+    const map = new Map<string, string>();
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) {
+        map.set(id, matchedText);
+      }
+    });
+    return map;
+  }, [filteredTools]);
+
+  return (
+    <div
+      ref={toolPanelRef}
+      data-sidebar="tool-panel"
+      data-tour={fullscreenExpanded ? undefined : "tool-panel"}
+      className={`tool-panel flex flex-col ${fullscreenExpanded ? 'tool-panel--fullscreen-active' : 'overflow-hidden'} bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
+        isRainbowMode ? rainbowStyles.rainbowPaper : ''
+      } ${isMobile ? 'h-full border-r-0' : 'h-screen'} ${fullscreenExpanded ? 'tool-panel--fullscreen' : ''}`}
+      style={{
+        width: computedWidth(),
+        padding: '0'
+      }}
+    >
+      {!fullscreenExpanded && (
+        <div
+          style={{
+            opacity: isMobile || isPanelVisible ? 1 : 0,
+            transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          <div
+            className="tool-panel__search-row"
+            style={{
+              backgroundColor: 'var(--tool-panel-search-bg)',
+              borderBottom: '1px solid var(--tool-panel-search-border-bottom)'
+            }}
+          >
+            <ToolSearch
+              value={searchQuery}
+              onChange={setSearchQuery}
+              toolRegistry={toolRegistry}
+              mode="filter"
+            />
+            {!isMobile && leftPanelView === 'toolPicker' && (
+              <Tooltip
+                content={toggleLabel}
+                position="bottom"
+                arrow={true}
+                openOnFocus={false}
+              >
+                <ActionIcon
+                  variant="subtle"
+                  radius="xl"
+                  style={{ color: 'var(--right-rail-icon)' }}
+                  onClick={handleModeToggle}
+                  aria-label={toggleLabel}
+                  className="tool-panel__mode-toggle"
+                >
+                  <DoubleArrowIcon fontSize="small" />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </div>
+
+                {searchQuery.trim().length > 0 ? (
+                  <div className="flex-1 flex flex-col overflow-y-auto">
+                    <SearchResults
+                      filteredTools={filteredTools}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      searchQuery={searchQuery}
+                    />
+                  </div>
+                ) : leftPanelView === 'toolPicker' ? (
+                  <div className="flex-1 flex flex-col overflow-auto">
+                    <ToolPicker
+                      selectedToolKey={selectedToolKey}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      filteredTools={filteredTools}
+                      isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+                    />
+                  </div>
+          ) : (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <ScrollArea h="100%">
+                  {selectedToolKey ? (
+                    <ToolRenderer
+                      selectedToolKey={selectedToolKey}
+                      onPreviewFile={setPreviewFile}
+                    />
+                  ) : (
+                    <div className="tool-panel__placeholder">
+                      {t('toolPanel.placeholder', 'Choose a tool to get started')}
+                    </div>
+                  )}
+                </ScrollArea>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {fullscreenExpanded && (
+        <FullscreenToolSurface
+          searchQuery={searchQuery}
+          toolRegistry={toolRegistry}
+          filteredTools={filteredTools}
+          selectedToolKey={selectedToolKey}
+          showDescriptions={preferences.showLegacyToolDescriptions}
+          matchedTextMap={matchedTextMap}
+          onSearchChange={setSearchQuery}
+          onSelect={(id: ToolId) => handleToolSelect(id)}
+          onToggleDescriptions={() => updatePreference('showLegacyToolDescriptions', !preferences.showLegacyToolDescriptions)}
+          onExitFullscreenMode={() => setToolPanelMode('sidebar')}
+          toggleLabel={toggleLabel}
+          geometry={fullscreenGeometry}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/core/components/tools/ToolPanelModePrompt.css

@@ -0,0 +1,200 @@
+.tool-panel-mode-prompt__modal {
+  background: color-mix(in srgb, var(--bg-toolbar) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  box-shadow: 0 32px 64px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%, transparent);
+  max-width: min(46rem, 100%);
+}
+
+.tool-panel-mode-prompt__options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.tool-panel-mode-prompt__card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: linear-gradient(145deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--bg-muted) 70%, transparent)
+  );
+  width: 100%;
+  max-width: 19rem;
+}
+
+.tool-panel-mode-prompt__card--sidebar {
+  border: 1px solid color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 18%, var(--border-subtle));
+  background: linear-gradient(165deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 8%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__preview {
+  border-radius: 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-muted) 82%, transparent), transparent 75%);
+  padding: 0.75rem;
+  width: 100%;
+  display: flex;
+  gap: 0.65rem;
+  min-height: 6.5rem;
+  margin-top: auto;
+}
+
+.tool-panel-mode-prompt__preview--sidebar {
+  align-items: stretch;
+}
+
+.tool-panel-mode-prompt__sidebar-panel {
+  width: 3rem;
+  border-radius: 0.65rem;
+  padding: 0.45rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-muted) 72%, transparent)
+  );
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-search {
+  height: 0.5rem;
+  border-radius: 0.4rem;
+  background: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-item {
+  height: 0.55rem;
+  border-radius: 0.35rem;
+  background: color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 32%, var(--bg-muted));
+}
+
+.tool-panel-mode-prompt__sidebar-item--muted {
+  background: color-mix(in srgb, var(--bg-background) 88%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace {
+  flex: 1;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  padding: 0.5rem;
+  display: grid;
+  gap: 0.35rem;
+  grid-template-rows: 1.4fr 0.6fr;
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--bg-background) 94%, transparent),
+    color-mix(in srgb, var(--bg-muted) 68%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__workspace-page {
+  border-radius: 0.45rem;
+  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-background) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace-page--secondary {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--legacy {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__legacy-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__legacy-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__legacy-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__legacy-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--fullscreen {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__fullscreen-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.tool-panel-mode-prompt__action {
+  box-shadow: none;
+}
+
+.tool-panel-mode-prompt__action:hover {
+  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 25%, transparent);
+}
+
+.tool-panel-mode-prompt__maybe-later {
+  color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-muted));
+}
+
+.tool-panel-mode-prompt__maybe-later:hover {
+  background: color-mix(in srgb, var(--bg-muted) 78%, transparent);
+}
+
+@media (max-width: 600px) {
+  .tool-panel-mode-prompt__options {
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+  }
+}

frontend/src/core/components/tools/ToolPanelModePrompt.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import { usePreferences } from '@app/contexts/PreferencesContext';
+import '@app/components/tools/ToolPanelModePrompt.css';
+import type { ToolPanelMode } from '@app/constants/toolPanel';
+
+const ToolPanelModePrompt = () => {
+  const { t } = useTranslation();
+  const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
+  const { preferences, updatePreference } = usePreferences();
+  const [opened, setOpened] = useState(false);
+
+  const shouldShowPrompt = !preferences.toolPanelModePromptSeen;
+
+  useEffect(() => {
+    if (shouldShowPrompt) {
+      setOpened(true);
+    }
+  }, [shouldShowPrompt]);
+
+  const handleSelect = (mode: ToolPanelMode) => {
+    setToolPanelMode(mode);
+    updatePreference('defaultToolPanelMode', mode);
+    updatePreference('toolPanelModePromptSeen', true);
+    setOpened(false);
+  };
+
+  const handleDismiss = () => {
+    updatePreference('toolPanelModePromptSeen', true);
+    setOpened(false);
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleDismiss}
+      centered
+      size="xl"
+      radius="lg"
+      overlayProps={{ blur: 6, opacity: 0.35 }}
+      classNames={{ content: 'tool-panel-mode-prompt__modal' }}
+      title={t('toolPanel.modePrompt.title', 'Choose how you browse tools')}
+    >
+      <Stack gap="lg">
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
+        </Text>
+        <div className="tool-panel-mode-prompt__options">
+          <Card withBorder radius="lg" shadow="sm" padding="lg" className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Group justify="space-between">
+                <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
+                </Text>
+                </Stack>
+                <Badge color="blue" variant="filled">
+                  {t('toolPanel.modePrompt.recommended', 'Recommended')}
+                </Badge>
+              </Group>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--sidebar" aria-hidden>
+                <div className="tool-panel-mode-prompt__sidebar-panel">
+                  <span className="tool-panel-mode-prompt__sidebar-search" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item tool-panel-mode-prompt__sidebar-item--muted" />
+                </div>
+                <div className="tool-panel-mode-prompt__workspace" aria-hidden>
+                  <div className="tool-panel-mode-prompt__workspace-page" />
+                  <div className="tool-panel-mode-prompt__workspace-page tool-panel-mode-prompt__workspace-page--secondary" />
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'sidebar' ? 'filled' : 'light'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('sidebar')}
+              >
+                {t('toolPanel.modePrompt.chooseSidebar', 'Use sidebar mode')}
+              </Button>
+            </Stack>
+          </Card>
+          <Card withBorder radius="lg" shadow="xs" padding="lg" className="tool-panel-mode-prompt__card">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
+                </Text>
+              </Stack>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--fullscreen" aria-hidden>
+                <div className="tool-panel-mode-prompt__fullscreen-columns">
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'fullscreen' ? 'filled' : 'outline'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('fullscreen')}
+              >
+                {t('toolPanel.modePrompt.chooseFullscreen', 'Use fullscreen mode')}
+              </Button>
+            </Stack>
+          </Card>
+        </div>
+        <Button
+          variant="subtle"
+          color="gray"
+          radius="md"
+          className="tool-panel-mode-prompt__maybe-later"
+          onClick={handleDismiss}
+        >
+          {t('toolPanel.modePrompt.dismiss', 'Maybe later')}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ToolPanelModePrompt;

frontend/src/core/components/tools/ToolPicker.tsx

@@ -0,0 +1,260 @@
+import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
+import { Box, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import "@app/components/tools/toolPicker/ToolPicker.css";
+import { useToolSections } from "@app/hooks/useToolSections";
+import type { SubcategoryGroup } from "@app/hooks/useToolSections";
+import { useFavoriteToolItems } from "@app/hooks/tools/useFavoriteToolItems";
+import NoToolsFound from "@app/components/tools/shared/NoToolsFound";
+import { renderToolButtons } from "@app/components/tools/shared/renderToolButtons";
+import Badge from "@app/components/shared/Badge";
+import SubcategoryHeader from "@app/components/tools/shared/SubcategoryHeader";
+import ToolButton from "@app/components/tools/toolPicker/ToolButton";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { ToolId } from "@app/types/toolId";
+
+interface ToolPickerProps {
+  selectedToolKey: string | null;
+  onSelect: (id: string) => void;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  isSearching?: boolean;
+}
+
+const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = false }: ToolPickerProps) => {
+  const { t } = useTranslation();
+  const [quickHeaderHeight, setQuickHeaderHeight] = useState(0);
+  const [allHeaderHeight, setAllHeaderHeight] = useState(0);
+
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const quickHeaderRef = useRef<HTMLDivElement>(null);
+  const allHeaderRef = useRef<HTMLDivElement>(null);
+  const quickAccessRef = useRef<HTMLDivElement>(null);
+  const allToolsRef = useRef<HTMLDivElement>(null);
+
+  // Keep header heights in sync with any dynamic size changes
+  useLayoutEffect(() => {
+    const update = () => {
+      if (quickHeaderRef.current) {
+        setQuickHeaderHeight(quickHeaderRef.current.offsetHeight || 0);
+      }
+      if (allHeaderRef.current) {
+        setAllHeaderHeight(allHeaderRef.current.offsetHeight || 0);
+      }
+    };
+
+    update();
+
+    // Update on window resize
+    window.addEventListener("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 { favoriteTools, toolRegistry } = useToolWorkflow();
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
+
+  const quickSection = useMemo(
+    () => visibleSections.find(s => s.key === 'quick'),
+    [visibleSections]
+  );
+
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string; tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach((sc: SubcategoryGroup) => sc.tools.forEach((toolEntry) => items.push(toolEntry)));
+    return items;
+  }, [quickSection]);
+
+  const recommendedCount = useMemo(() => favoriteToolItems.length + recommendedItems.length, [favoriteToolItems.length, recommendedItems.length]);
+  const allSection = useMemo(
+    () => visibleSections.find(s => s.key === 'all'),
+    [visibleSections]
+  );
+
+  const scrollTo = (ref: React.RefObject<HTMLDivElement | null>) => {
+    const container = scrollableRef.current;
+    const target = ref.current;
+    if (container && target) {
+      const stackedOffset = ref === allToolsRef
+        ? (quickHeaderHeight + allHeaderHeight)
+        : quickHeaderHeight;
+      const top = target.offsetTop - container.offsetTop - (stackedOffset || 0);
+      container.scrollTo({
+        top: Math.max(0, top),
+        behavior: "smooth"
+      });
+    }
+  };
+
+  // Build flat list by subcategory for search mode
+  const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
+  const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
+  const { searchGroups } = useToolSections(effectiveFilteredForSearch);
+
+  return (
+    <Box
+      h="100%"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--bg-toolbar)"
+      }}
+    >
+      <Box
+        ref={scrollableRef}
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          overflowX: "hidden",
+          minHeight: 0,
+          height: "100%",
+          marginTop: -2
+        }}
+        className="tool-picker-scrollable"
+      >
+        {isSearching ? (
+          <Stack p="sm" gap="xs">
+            {searchGroups.length === 0 ? (
+              <NoToolsFound />
+            ) : (
+                      searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true))
+            )}
+          </Stack>
+        ) : (
+          <>
+        {quickSection && (
+          <>
+            <div
+              ref={quickHeaderRef}
+              style={{
+                position: "sticky",
+                top: 0,
+                zIndex: 2,
+                borderTop: `0.0625rem solid var(--tool-header-border)`,
+                borderBottom: `0.0625rem solid var(--tool-header-border)`,
+                padding: "0.5rem 1rem",
+                fontWeight: 600,
+                background: "var(--tool-header-bg)",
+                color: "var(--tool-header-text)",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+              onClick={() => scrollTo(quickAccessRef)}
+            >
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
+              <Badge>
+                {recommendedCount}
+              </Badge>
+            </div>
+
+            <Box ref={quickAccessRef} w="100%" my="sm">
+              <Stack p="sm" gap="xs">
+                {favoriteToolItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.favorites', 'Favourites')} mt={0} />
+                    <div>
+                      {favoriteToolItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`fav-${id}`}
+                          id={id}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
+                )}
+                {recommendedItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.recommended', 'Recommended')} />
+                    <div>
+                      {recommendedItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`rec-${id}`}
+                          id={id as ToolId}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
+                )}
+              </Stack>
+            </Box>
+          </>
+        )}
+
+        {allSection && (
+          <>
+            <div
+              ref={allHeaderRef}
+              style={{
+                position: "sticky",
+                top: quickSection ? quickHeaderHeight -1 : 0,
+                zIndex: 2,
+                borderTop: `0.0625rem solid var(--tool-header-border)`,
+                borderBottom: `0.0625rem solid var(--tool-header-border)`,
+                padding: "0.5rem 1rem",
+                fontWeight: 600,
+                background: "var(--tool-header-bg)",
+                color: "var(--tool-header-text)",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              }}
+              onClick={() => scrollTo(allToolsRef)}
+            >
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
+              <Badge>
+                {allSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
+              </Badge>
+            </div>
+
+            <Box ref={allToolsRef} w="100%">
+              <Stack p="sm" gap="xs">
+                        {allSection?.subcategories.map((sc: SubcategoryGroup) =>
+                          renderToolButtons(t, sc, selectedToolKey, onSelect, true, false, undefined, true)
+                        )}
+              </Stack>
+            </Box>
+          </>
+        )}
+
+        {!quickSection && !allSection && <NoToolsFound />}
+
+        {/* bottom spacer to allow scrolling past the last row */}
+        <div aria-hidden style={{ height: 200 }} />
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default ToolPicker;

frontend/src/core/components/tools/ToolRenderer.tsx

@@ -0,0 +1,47 @@
+import { Suspense } from "react";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { BaseToolProps } from "@app/types/tool";
+import { ToolId } from "@app/types/toolId";
+import ToolLoadingFallback from "@app/components/tools/ToolLoadingFallback";
+
+interface ToolRendererProps extends BaseToolProps {
+  selectedToolKey: ToolId;
+}
+
+
+const ToolRenderer = ({
+  selectedToolKey,
+  onPreviewFile,
+  onComplete,
+  onError,
+}: ToolRendererProps) => {
+  // Get the tool from context (instead of direct hook call)
+  const { toolRegistry } = useToolWorkflow();
+  const selectedTool = (selectedToolKey in toolRegistry)
+    ? toolRegistry[selectedToolKey as ToolId]
+    : undefined;
+
+  // Handle tools that only work in workbenches (read, multiTool)
+  if (selectedTool && !selectedTool.component && selectedTool.workbench) {
+    return null; // These tools render in their workbench, not in the sidebar
+  }
+
+  if (!selectedTool || !selectedTool.component) {
+    return <div>Tool not found: {selectedToolKey}</div>;
+  }
+
+  const ToolComponent = selectedTool.component;
+
+  // Wrap lazy-loaded component with Suspense
+  return (
+    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
+      <ToolComponent
+        onPreviewFile={onPreviewFile}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>
+  );
+};
+
+export default ToolRenderer;

frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx

@@ -0,0 +1,119 @@
+/**
+ * AddAttachmentsSettings - Shared settings component for both tool UI and automation
+ *
+ * Allows selecting files to attach to PDFs.
+ */
+
+import { Stack, Text, Group, ActionIcon, Alert, ScrollArea, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddAttachmentsParameters } from "@app/hooks/tools/addAttachments/useAddAttachmentsParameters";
+import LocalIcon from "@app/components/shared/LocalIcon";
+
+interface AddAttachmentsSettingsProps {
+  parameters: AddAttachmentsParameters;
+  onParameterChange: <K extends keyof AddAttachmentsParameters>(key: K, value: AddAttachmentsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = false }: AddAttachmentsSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Alert color="blue" variant="light">
+        <Text size="sm">
+          {t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.")}
+        </Text>
+      </Alert>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>
+          {t("AddAttachmentsRequest.selectFiles", "Select Files to Attach")}
+        </Text>
+        <input
+          type="file"
+          multiple
+          onChange={(e) => {
+            const files = Array.from(e.target.files || []);
+            // Append to existing attachments instead of replacing
+            const newAttachments = [...(parameters.attachments || []), ...files];
+            onParameterChange('attachments', newAttachments);
+            // Reset the input so the same file can be selected again
+            e.target.value = '';
+          }}
+          disabled={disabled}
+          style={{ display: 'none' }}
+          id="attachments-input"
+        />
+        <Button
+          size="xs"
+          color="blue"
+          component="label"
+          htmlFor="attachments-input"
+          disabled={disabled}
+          leftSection={<LocalIcon icon="plus" width="14" height="14" />}
+        >
+          {parameters.attachments?.length > 0
+            ? t("AddAttachmentsRequest.addMoreFiles", "Add more files...")
+            : t("AddAttachmentsRequest.placeholder", "Choose files...")
+          }
+        </Button>
+      </Stack>
+
+      {parameters.attachments?.length > 0 && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>
+            {t("AddAttachmentsRequest.selectedFiles", "Selected Files")} ({parameters.attachments.length})
+          </Text>
+          <ScrollArea.Autosize mah={300} type="scroll" offsetScrollbars styles={{ viewport: { overflowX: 'hidden' } }}>
+            <Stack gap="xs">
+              {parameters.attachments.map((file, index) => (
+                <Group key={index} justify="space-between" p="xs" style={{ border: '1px solid var(--mantine-color-gray-3)', borderRadius: 'var(--mantine-radius-sm)', alignItems: 'flex-start' }}>
+                  <Group gap="xs" style={{ flex: 1, minWidth: 0, alignItems: 'flex-start' }}>
+                    {/* Filename (two-line clamp, wraps, no icon on the left) */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div
+                        style={{
+                          fontSize: 'var(--mantine-font-size-sm)',
+                          fontWeight: 400,
+                          lineHeight: 1.2,
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2 as any,
+                          WebkitBoxOrient: 'vertical' as any,
+                          overflow: 'hidden',
+                          whiteSpace: 'normal',
+                          wordBreak: 'break-word',
+                        }}
+                        title={file.name}
+                      >
+                        {file.name}
+                      </div>
+                    </div>
+                    <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                      ({(file.size / 1024).toFixed(1)} KB)
+                    </Text>
+                  </Group>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    color="red"
+                    style={{ flexShrink: 0 }}
+                    onClick={() => {
+                      const newAttachments = (parameters.attachments || []).filter((_, i) => i !== index);
+                      onParameterChange('attachments', newAttachments);
+                    }}
+                    disabled={disabled}
+                  >
+                    <LocalIcon icon="close-rounded" width="14" height="14" />
+                  </ActionIcon>
+                </Group>
+              ))}
+            </Stack>
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default AddAttachmentsSettings;

frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx

@@ -0,0 +1,77 @@
+/**
+ * AddPageNumbersAppearanceSettings - Customize Appearance step
+ */
+
+import { Stack, Select, TextInput, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
+import { Tooltip } from "@app/components/shared/Tooltip";
+
+interface AddPageNumbersAppearanceSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAppearanceSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAppearanceSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Tooltip content={t('marginTooltip', 'Distance between the page number and the edge of the page.')}>
+        <Select
+          label={t('addPageNumbers.selectText.2', 'Margin')}
+          value={parameters.customMargin}
+          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          data={[
+            { value: 'small', label: t('sizes.small', 'Small') },
+            { value: 'medium', label: t('sizes.medium', 'Medium') },
+            { value: 'large', label: t('sizes.large', 'Large') },
+            { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontSizeTooltip', 'Size of the page number text in points. Larger numbers create bigger text.')}>
+        <NumberInput
+          label={t('addPageNumbers.fontSize', 'Font Size')}
+          value={parameters.fontSize}
+          onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 12)}
+          min={1}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontTypeTooltip', 'Font family for the page numbers. Choose based on your document style.')}>
+        <Select
+          label={t('addPageNumbers.fontName', 'Font Type')}
+          value={parameters.fontType}
+          onChange={(v) => onParameterChange('fontType', (v as any) || 'Times')}
+          data={[
+            { value: 'Times', label: 'Times Roman' },
+            { value: 'Helvetica', label: 'Helvetica' },
+            { value: 'Courier', label: 'Courier New' },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('customTextTooltip', 'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.')}>
+        <TextInput
+          label={t('addPageNumbers.selectText.6', 'Custom Text Format')}
+          value={parameters.customText || ''}
+          onChange={(e) => onParameterChange('customText', e.currentTarget.value)}
+          placeholder={t('addPageNumbers.customNumberDesc', 'e.g., "Page {n}" or leave blank for just numbers')}
+          disabled={disabled}
+        />
+      </Tooltip>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAppearanceSettings;

frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx

@@ -0,0 +1,55 @@
+/**
+ * AddPageNumbersAutomationSettings - Used for automation only
+ *
+ * Combines both position and appearance settings into a single view
+ */
+
+import { Stack, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
+import AddPageNumbersPositionSettings from "@app/components/tools/addPageNumbers/AddPageNumbersPositionSettings";
+import AddPageNumbersAppearanceSettings from "@app/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings";
+
+interface AddPageNumbersAutomationSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAutomationSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAutomationSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position & Pages Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.positionAndPages", "Position & Pages")}</Text>
+        <AddPageNumbersPositionSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+          file={null}
+          showQuickGrid={true}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Appearance Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.customize", "Customize Appearance")}</Text>
+        <AddPageNumbersAppearanceSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAutomationSettings;

frontend/src/core/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx

@@ -0,0 +1,70 @@
+/**
+ * AddPageNumbersPositionSettings - Position & Pages step
+ */
+
+import { Stack, TextInput, NumberInput, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import PageNumberPreview from "@app/components/tools/addPageNumbers/PageNumberPreview";
+
+interface AddPageNumbersPositionSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+  file?: File | null;
+  showQuickGrid?: boolean;
+}
+
+const AddPageNumbersPositionSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  file = null,
+  showQuickGrid = true
+}: AddPageNumbersPositionSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position Selection */}
+      <Stack gap="md">
+        <PageNumberPreview
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          file={file}
+          showQuickGrid={showQuickGrid}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Pages & Starting Number Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
+
+        <Tooltip content={t('pageSelectionPrompt', 'Custom Page Selection (Enter a comma-separated list of page numbers 1,5,6 or Functions like 2n+1)')}>
+          <TextInput
+            label={t('addPageNumbers.selectText.5', 'Pages to Number')}
+            value={parameters.pagesToNumber || ''}
+            onChange={(e) => onParameterChange('pagesToNumber', e.currentTarget.value)}
+            placeholder={t('addPageNumbers.numberPagesDesc', 'e.g., 1,3,5-8 or leave blank for all pages')}
+            disabled={disabled}
+          />
+        </Tooltip>
+
+        <Tooltip content={t('startingNumberTooltip', 'The first number to display. Subsequent pages will increment from this number.')}>
+          <NumberInput
+            label={t('addPageNumbers.selectText.4', 'Starting Number')}
+            value={parameters.startingNumber}
+            onChange={(v) => onParameterChange('startingNumber', typeof v === 'number' ? v : 1)}
+            min={1}
+            disabled={disabled}
+          />
+        </Tooltip>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersPositionSettings;

frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css

@@ -0,0 +1,101 @@
+/* PageNumberPreview.module.css - EXACT copy from StampPreview */
+
+/* Container styles */
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.containerWithThumbnail {
+  background-color: transparent;
+}
+
+.containerWithoutThumbnail {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.containerBorder {
+  border: 1px solid var(--border-default, #333);
+}
+
+/* Page thumbnail styles */
+.pageThumbnail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(10%) contrast(95%) brightness(105%);
+}
+
+/* Quick grid overlay styles - EXACT copy from stamp */
+.quickGrid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px;
+  pointer-events: auto;
+}
+
+.gridTile {
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  font-size: 20px;
+  user-select: none;
+  font-weight: 600;
+  position: relative;
+}
+
+/* Position numbers at edges within each tile with extra top/bottom spacing */
+.gridTile:nth-child(1) { align-items: flex-start; justify-content: flex-start; padding-top: 4px; } /* top-left */
+.gridTile:nth-child(2) { align-items: flex-start; justify-content: center; padding-top: 4px; }     /* top-center */
+.gridTile:nth-child(3) { align-items: flex-start; justify-content: flex-end; padding-top: 4px; }  /* top-right */
+.gridTile:nth-child(4) { align-items: center; justify-content: flex-start; }    /* middle-left */
+.gridTile:nth-child(5) { align-items: center; justify-content: center; }        /* center */
+.gridTile:nth-child(6) { align-items: center; justify-content: flex-end; }      /* middle-right */
+.gridTile:nth-child(7) { align-items: flex-end; justify-content: flex-start; padding-bottom: 4px; }  /* bottom-left */
+.gridTile:nth-child(8) { align-items: flex-end; justify-content: center; padding-bottom: 4px; }      /* bottom-center */
+.gridTile:nth-child(9) { align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; }    /* bottom-right */
+
+/* Base padding for all tiles */
+.gridTile {
+  padding: 8px;
+}
+
+.gridTileSelected,
+.gridTileHovered {
+  border: 2px solid var(--mantine-primary-color-filled, #3b82f6);
+  background-color: rgba(59, 130, 246, 0.2);
+}
+
+/* Preview header */
+.previewHeader {
+  margin-bottom: 12px;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-default, #333);
+  margin-bottom: 8px;
+}
+
+.previewLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+/* Preview disclaimer */
+.previewDisclaimer {
+  margin-top: 8px;
+  opacity: 0.7;
+  font-size: 12px;
+}

frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AddPageNumbersParameters } from '@app/components/tools/addPageNumbers/useAddPageNumbersParameters';
+import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
+import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
+import styles from '@app/components/tools/addPageNumbers/PageNumberPreview.module.css';
+
+// Simple utilities for page numbers (adapted from stamp)
+const A4_ASPECT_RATIO = 0.707;
+
+const getFirstSelectedPage = (input: string): number => {
+  if (!input) return 1;
+  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  for (const part of parts) {
+    if (/^\d+\s*-\s*\d+$/.test(part)) {
+      const low = parseInt(part.split('-')[0].trim(), 10);
+      if (Number.isFinite(low) && low > 0) return low;
+    }
+    const n = parseInt(part, 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return 1;
+};
+
+
+const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promise<'light' | 'dark'> => {
+  if (!thumbnailSrc) {
+    return 'light'; // Default to light background if no thumbnail
+  }
+
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          resolve('light');
+          return;
+        }
+
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+
+        // Sample the entire image at reduced resolution for performance
+        const sampleWidth = Math.min(100, img.width);
+        const sampleHeight = Math.min(100, img.height);
+        const imageData = ctx.getImageData(0, 0, img.width, img.height);
+        const data = imageData.data;
+
+        let totalBrightness = 0;
+        let pixelCount = 0;
+
+        // Sample every nth pixel for performance
+        const step = Math.max(1, Math.floor((img.width * img.height) / (sampleWidth * sampleHeight)));
+
+        for (let i = 0; i < data.length; i += 4 * step) {
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+
+          // Calculate perceived brightness using luminance formula
+          const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
+          totalBrightness += brightness;
+          pixelCount++;
+        }
+
+        const averageBrightness = totalBrightness / pixelCount;
+
+        // Threshold: 128 is middle gray
+        resolve(averageBrightness > 128 ? 'light' : 'dark');
+      } catch (error) {
+        console.warn('Error detecting background color:', error);
+        resolve('light'); // Default fallback
+      }
+    };
+
+    img.onerror = () => resolve('light');
+    img.src = thumbnailSrc;
+  });
+};
+
+type Props = {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  file?: File | null;
+  showQuickGrid?: boolean;
+};
+
+export default function PageNumberPreview({ parameters, onParameterChange, file, showQuickGrid }: Props) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [, setContainerSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [pageSize, setPageSize] = useState<{ widthPts: number; heightPts: number } | null>(null);
+  const [pageThumbnail, setPageThumbnail] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+  const [hoverTile, setHoverTile] = useState<number | null>(null);
+  const [textColor, setTextColor] = useState<string>('#fff');
+
+  // Observe container size for responsive positioning
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const resize = () => {
+      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, [pageSize]);
+
+  // Load first PDF page size in points for accurate scaling
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageSize(null);
+        return;
+      }
+      try {
+        const buffer = await file.arrayBuffer();
+        const pdf = await pdfWorkerManager.createDocument(buffer, { disableAutoFetch: true, disableStream: true });
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 1 });
+        if (!cancelled) {
+          setPageSize({ widthPts: viewport.width, heightPts: viewport.height });
+        }
+        pdfWorkerManager.destroyDocument(pdf);
+      } catch {
+        if (!cancelled) setPageSize(null);
+      }
+    };
+    load();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  // Load first-page thumbnail for background preview
+  useEffect(() => {
+    let isActive = true;
+    const loadThumb = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageThumbnail(null);
+        return;
+      }
+      try {
+        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pagesToNumber || '1'));
+        const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
+        const thumb = await requestThumbnail(pageId, file, pageNumber);
+        if (isActive) setPageThumbnail(thumb || null);
+      } catch {
+        if (isActive) setPageThumbnail(null);
+      }
+    };
+    loadThumb();
+    return () => { isActive = false; };
+  }, [file, parameters.pagesToNumber, requestThumbnail]);
+
+  // Detect text color based on overall PDF background
+  useEffect(() => {
+    if (!pageThumbnail) {
+      setTextColor('#fff'); // Default to white for no thumbnail
+      return;
+    }
+
+    const detectColor = async () => {
+      const backgroundType = await detectOverallBackgroundColor(pageThumbnail);
+      setTextColor(backgroundType === 'light' ? '#000' : '#fff');
+    };
+
+    detectColor();
+  }, [pageThumbnail]);
+
+  const containerStyle = useMemo(() => ({
+    position: 'relative' as const,
+    width: '100%',
+    aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
+    backgroundColor: pageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+    border: '1px solid var(--border-default, #333)',
+    overflow: 'hidden' as const
+  }), [pageSize, pageThumbnail]);
+
+  return (
+    <div>
+      <div className={styles.previewHeader}>
+        <div className={styles.divider} />
+        <div className={styles.previewLabel}>{t('addPageNumbers.preview', 'Preview Page Numbers')}</div>
+      </div>
+      <div
+        ref={containerRef}
+        className={`${styles.container} ${styles.containerBorder} ${pageThumbnail ? styles.containerWithThumbnail : styles.containerWithoutThumbnail}`}
+        style={containerStyle}
+      >
+        {pageThumbnail && (
+          <img
+            src={pageThumbnail}
+            alt="page preview"
+            className={`${styles.pageThumbnail} ph-no-capture`}
+            draggable={false}
+          />
+        )}
+
+        {/* Quick position overlay grid - EXACT copy from stamp */}
+        {showQuickGrid && (
+          <div className={styles.quickGrid}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx;
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
+                  onClick={() => onParameterChange('position', idx as any)}
+                  onMouseEnter={() => setHoverTile(idx)}
+                  onMouseLeave={() => setHoverTile(null)}
+                  style={{
+                    color: textColor,
+                    textShadow: textColor === '#fff'
+                      ? '1px 1px 2px rgba(0, 0, 0, 0.8)'
+                      : '1px 1px 2px rgba(255, 255, 255, 0.8)'
+                  }}
+                >
+                  {idx}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className={styles.previewDisclaimer}>
+        {t('addPageNumbers.previewDisclaimer', 'Preview is approximate. Final output may vary due to PDF font metrics.')}
+      </div>
+    </div>
+  );
+}

frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
+import { AddPageNumbersParameters, defaultParameters } from '@app/components/tools/addPageNumbers/useAddPageNumbersParameters';
+
+export const buildAddPageNumbersFormData = (parameters: AddPageNumbersParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append('fileInput', file);
+  formData.append('customMargin', parameters.customMargin);
+  formData.append('position', String(parameters.position));
+  formData.append('fontSize', String(parameters.fontSize));
+  formData.append('fontType', parameters.fontType);
+  formData.append('startingNumber', String(parameters.startingNumber));
+  formData.append('pagesToNumber', parameters.pagesToNumber);
+  formData.append('customText', parameters.customText);
+
+  return formData;
+};
+
+export const addPageNumbersOperationConfig = {
+  toolType: ToolType.singleFile,
+  buildFormData: buildAddPageNumbersFormData,
+  operationType: 'addPageNumbers',
+  endpoint: '/api/v1/misc/add-page-numbers',
+  defaultParameters,
+} as const;
+
+export const useAddPageNumbersOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<AddPageNumbersParameters>({
+    ...addPageNumbersOperationConfig,
+    getErrorMessage: createStandardErrorHandler(
+      t('addPageNumbers.error.failed', 'An error occurred while adding page numbers to the PDF.')
+    ),
+  });
+};

frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersParameters.ts

@@ -0,0 +1,34 @@
+import { BaseParameters } from '@app/types/parameters';
+import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+
+export interface AddPageNumbersParameters extends BaseParameters {
+  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  fontSize: number;
+  fontType: 'Times' | 'Helvetica' | 'Courier';
+  startingNumber: number;
+  pagesToNumber: string;
+  customText: string;
+}
+
+export const defaultParameters: AddPageNumbersParameters = {
+  customMargin: 'medium',
+  position: 8, // Default to bottom center like the original HTML
+  fontSize: 12,
+  fontType: 'Times',
+  startingNumber: 1,
+  pagesToNumber: '',
+  customText: '',
+};
+
+export type AddPageNumbersParametersHook = BaseParametersHook<AddPageNumbersParameters>;
+
+export const useAddPageNumbersParameters = (): AddPageNumbersParametersHook => {
+  return useBaseParameters<AddPageNumbersParameters>({
+    defaultParameters,
+    endpointName: 'add-page-numbers',
+    validateFn: (params): boolean => {
+      return params.fontSize > 0 && params.startingNumber > 0;
+    },
+  });
+};

frontend/src/core/components/tools/addPassword/AddPasswordSettings.test.tsx

@@ -0,0 +1,176 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import AddPasswordSettings from '@app/components/tools/addPassword/AddPasswordSettings';
+import { defaultParameters } from '@app/hooks/tools/addPassword/useAddPasswordParameters';
+
+// Mock useTranslation with predictable return values
+const mockT = vi.fn((key: string) => `mock-${key}`);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('AddPasswordSettings', () => {
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render password input fields', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Should render user and owner password fields labels
+    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
+    expect(screen.getByText('mock-addPassword.passwords.owner.label')).toBeInTheDocument();
+  });
+
+  test('should render encryption key length select', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Should render key length select input
+    expect(screen.getByRole('textbox', { name: /keyLength/i })).toBeInTheDocument();
+  });
+
+  test('should render main component sections', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Check that main section titles are rendered
+    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
+    expect(screen.getByText('mock-addPassword.encryption.keyLength.label')).toBeInTheDocument();
+  });
+
+  test('should call onParameterChange when password fields are modified', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // This test is complex with Mantine's PasswordInput, just verify the component renders
+    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
+  });
+
+  test('should call onParameterChange when key length is changed', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Find key length select and change it
+    const keyLengthSelect = screen.getByText('mock-addPassword.encryption.keyLength.128bit');
+
+    fireEvent.mouseDown(keyLengthSelect);
+    const option256 = screen.getByText('mock-addPassword.encryption.keyLength.256bit');
+    fireEvent.click(option256);
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('keyLength', 256);
+  });
+
+  test('should disable all form elements when disabled prop is true', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+          disabled={true}
+        />
+      </TestWrapper>
+    );
+
+    // Check password inputs are disabled
+    const passwordInputs = screen.getAllByRole('textbox');
+    passwordInputs.forEach(input => {
+      expect(input).toBeDisabled();
+    });
+
+    // Check key length select is disabled - simplified test due to Mantine complexity
+    expect(screen.getByText('mock-addPassword.encryption.keyLength.128bit')).toBeInTheDocument();
+  });
+
+  test('should enable all form elements when disabled prop is false', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+          disabled={false}
+        />
+      </TestWrapper>
+    );
+
+    // Check password inputs are enabled
+    const passwordInputs = screen.getAllByRole('textbox');
+    passwordInputs.forEach(input => {
+      expect(input).not.toBeDisabled();
+    });
+
+    // Check key length select is enabled - simplified test due to Mantine complexity
+    expect(screen.getByText('mock-addPassword.encryption.keyLength.128bit')).toBeInTheDocument();
+  });
+
+  test('should call translation function with correct keys', () => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Verify that translation keys are being called
+    expect(mockT).toHaveBeenCalledWith('addPassword.passwords.user.label', 'User Password');
+    expect(mockT).toHaveBeenCalledWith('addPassword.passwords.owner.label', 'Owner Password');
+  });
+
+  test.each([
+    { keyLength: 40, expectedLabel: 'mock-addPassword.encryption.keyLength.40bit' },
+    { keyLength: 128, expectedLabel: 'mock-addPassword.encryption.keyLength.128bit' },
+    { keyLength: 256, expectedLabel: 'mock-addPassword.encryption.keyLength.256bit' }
+  ])('should handle key length $keyLength correctly', ({ keyLength, expectedLabel }) => {
+    render(
+      <TestWrapper>
+        <AddPasswordSettings
+          parameters={{ ...defaultParameters, keyLength }}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.getByText(expectedLabel)).toBeInTheDocument();
+  });
+});

frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx

@@ -0,0 +1,57 @@
+import { Stack, PasswordInput, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPasswordParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters";
+
+interface AddPasswordSettingsProps {
+  parameters: AddPasswordParameters;
+  onParameterChange: <K extends keyof AddPasswordParameters>(key: K, value: AddPasswordParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPasswordSettings = ({ parameters, onParameterChange, disabled = false }: AddPasswordSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Password Settings */}
+      <Stack gap="sm">
+        <PasswordInput
+          label={t('addPassword.passwords.user.label', 'User Password')}
+          placeholder={t('addPassword.passwords.user.placeholder', 'Enter user password')}
+          value={parameters.password}
+          onChange={(e) => onParameterChange('password', e.target.value)}
+          disabled={disabled}
+        />
+        <PasswordInput
+          label={t('addPassword.passwords.owner.label', 'Owner Password')}
+          placeholder={t('addPassword.passwords.owner.placeholder', 'Enter owner password')}
+          value={parameters.ownerPassword}
+          onChange={(e) => onParameterChange('ownerPassword', e.target.value)}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {/* Encryption Settings */}
+      <Stack gap="sm">
+        <Select
+          label={t('addPassword.encryption.keyLength.label', 'Encryption Key Length')}
+          value={parameters.keyLength.toString()}
+          onChange={(value) => {
+            if (value) {
+              onParameterChange('keyLength', parseInt(value));
+            }
+          }}
+          disabled={disabled}
+          data={[
+            { value: '40', label: t('addPassword.encryption.keyLength.40bit', '40-bit (Low)') },
+            { value: '128', label: t('addPassword.encryption.keyLength.128bit', '128-bit (Standard)') },
+            { value: '256', label: t('addPassword.encryption.keyLength.256bit', '256-bit (High)') }
+          ]}
+        />
+      </Stack>
+
+    </Stack>
+  );
+};
+
+export default AddPasswordSettings;

frontend/src/core/components/tools/addStamp/AddStampAutomationSettings.tsx

@@ -0,0 +1,43 @@
+/**
+ * AddStampAutomationSettings - Used for automation only
+ *
+ * This component combines all stamp settings into a single step interface
+ * for use in the automation system. It includes setup and formatting
+ * settings in one unified component.
+ */
+
+import { Stack } from "@mantine/core";
+import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
+import StampSetupSettings from "@app/components/tools/addStamp/StampSetupSettings";
+import StampPositionFormattingSettings from "@app/components/tools/addStamp/StampPositionFormattingSettings";
+
+interface AddStampAutomationSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddStampAutomationSettings = ({ parameters, onParameterChange, disabled = false }: AddStampAutomationSettingsProps) => {
+  return (
+    <Stack gap="lg">
+      {/* Stamp Setup (Type, Text/Image, Page Selection) */}
+      <StampSetupSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+
+      {/* Position and Formatting Settings */}
+      {parameters.stampType && (
+        <StampPositionFormattingSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+          showPositionGrid={true}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default AddStampAutomationSettings;

frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx

@@ -0,0 +1,201 @@
+import { useTranslation } from "react-i18next";
+import { Group, Select, Stack, ColorInput, Button, Slider, Text, NumberInput } from "@mantine/core";
+import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import styles from "@app/components/tools/addStamp/StampPreview.module.css";
+import { Tooltip } from "@app/components/shared/Tooltip";
+
+interface StampPositionFormattingSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+  showPositionGrid?: boolean; // When true, show the 9-position grid for automation
+}
+
+const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabled = false, showPositionGrid = false }: StampPositionFormattingSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md" justify="space-between">
+      {/* Position Grid - shown in automation settings */}
+      {showPositionGrid && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>{t('AddStampRequest.position', 'Stamp Position')}</Text>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: '0.5rem',
+            maxWidth: '200px'
+          }}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx;
+              return (
+                <Button
+                  key={idx}
+                  variant={selected ? 'filled' : 'outline'}
+                  onClick={() => {
+                    onParameterChange('position', idx);
+                    // Ensure we're using grid positioning, not custom overrides
+                    onParameterChange('overrideX', -1 as any);
+                    onParameterChange('overrideY', -1 as any);
+                  }}
+                  disabled={disabled}
+                  styles={{
+                    root: {
+                      height: '50px',
+                      padding: '0',
+                    }
+                  }}
+                >
+                  {idx}
+                </Button>
+              );
+            })}
+          </div>
+        </Stack>
+      )}
+      {/* Icon pill buttons row */}
+      <div className="flex justify-between gap-[0.5rem]">
+        <Tooltip content={t('AddStampRequest.rotation', 'Rotation')} position="top">
+          <Button
+            variant={parameters._activePill === 'rotation' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'rotation')}
+          >
+            <LocalIcon icon="rotate-right-rounded" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+        <Tooltip content={t('AddStampRequest.opacity', 'Opacity')} position="top">
+          <Button
+            variant={parameters._activePill === 'opacity' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'opacity')}
+          >
+            <LocalIcon icon="opacity" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+        <Tooltip content={parameters.stampType === 'image' ? t('AddStampRequest.imageSize', 'Image Size') : t('AddStampRequest.fontSize', 'Font Size')} position="top">
+          <Button
+            variant={parameters._activePill === 'fontSize' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'fontSize')}
+          >
+            <LocalIcon icon="zoom-in-map-rounded" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+      </div>
+
+      {/* Single slider bound to selected pill */}
+      {parameters._activePill === 'fontSize' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>
+            {parameters.stampType === 'image'
+              ? t('AddStampRequest.imageSize', 'Image Size')
+              : t('AddStampRequest.fontSize', 'Font Size')
+            }
+          </Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.fontSize}
+              onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 1)}
+              min={1}
+              max={400}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.fontSize}
+              onChange={(v) => onParameterChange('fontSize', v as number)}
+              min={1}
+              max={400}
+              step={1}
+              className={styles.slider}
+            />
+          </Group>
+        </Stack>
+      )}
+      {parameters._activePill === 'rotation' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>{t('AddStampRequest.rotation', 'Rotation')}</Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.rotation}
+              onChange={(v) => onParameterChange('rotation', typeof v === 'number' ? v : 0)}
+              min={-180}
+              max={180}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              hideControls
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.rotation}
+              onChange={(v) => onParameterChange('rotation', v as number)}
+              min={-180}
+              max={180}
+              step={1}
+              className={styles.sliderWide}
+            />
+          </Group>
+        </Stack>
+      )}
+      {parameters._activePill === 'opacity' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>{t('AddStampRequest.opacity', 'Opacity')}</Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.opacity}
+              onChange={(v) => onParameterChange('opacity', typeof v === 'number' ? v : 0)}
+              min={0}
+              max={100}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.opacity}
+              onChange={(v) => onParameterChange('opacity', v as number)}
+              min={0}
+              max={100}
+              step={1}
+              className={styles.slider}
+            />
+          </Group>
+        </Stack>
+      )}
+
+      {parameters.stampType !== 'image' && (
+        <ColorInput
+          label={t('AddStampRequest.customColor', 'Custom Text Color')}
+          value={parameters.customColor}
+          onChange={(value) => onParameterChange('customColor', value)}
+          format="hex"
+          disabled={disabled}
+        />
+      )}
+
+      {/* Margin selection for text stamps */}
+      {parameters.stampType === 'text' && (
+        <Select
+          label={t('AddStampRequest.margin', 'Margin')}
+          value={parameters.customMargin}
+          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          data={[
+            { value: 'small', label: t('margin.small', 'Small') },
+            { value: 'medium', label: t('margin.medium', 'Medium') },
+            { value: 'large', label: t('margin.large', 'Large') },
+            { value: 'x-large', label: t('margin.xLarge', 'Extra Large') },
+          ]}
+          disabled={disabled}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default StampPositionFormattingSettings;

frontend/src/core/components/tools/addStamp/StampPreview.module.css

@@ -0,0 +1,195 @@
+/* StampPreview.module.css */
+
+/* Container styles */
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.containerWithThumbnail {
+  background-color: transparent;
+}
+
+.containerWithoutThumbnail {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.containerBorder {
+  border: 1px solid var(--border-default, #333);
+}
+
+/* Page thumbnail styles */
+.pageThumbnail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(10%) contrast(95%) brightness(105%);
+}
+
+/* Stamp item styles */
+.stampItem {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  line-height: 1;
+  transform-origin: left bottom;
+}
+
+.stampItemDraggable {
+  cursor: move;
+  pointer-events: auto;
+}
+
+.stampItemGridMode {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Text stamp styles */
+.textLine {
+  white-space: pre;
+  display: block;
+  word-break: keep-all;
+  overflow: visible;
+}
+
+/* Image stamp styles */
+.stampImage {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Quick grid overlay styles */
+.quickGrid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px;
+  pointer-events: auto;
+}
+
+.gridTile {
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  color: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  user-select: none;
+}
+
+.gridTileSelected,
+.gridTileHovered {
+  border: 2px solid var(--mantine-primary-color-filled, #3b82f6);
+}
+
+/* Preview header */
+.previewHeader {
+  margin-bottom: 12px;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-default, #333);
+  margin-bottom: 8px;
+}
+
+.previewLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+/* Preview disclaimer */
+.previewDisclaimer {
+  margin-top: 8px;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+/* AddStamp.tsx specific styles */
+
+/* Information text container */
+.informationContainer {
+  background-color: var(--information-text-bg);
+  padding: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 10px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.informationText {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--information-text-color);
+}
+
+/* Mode toggle buttons */
+.modeToggleGroup {
+  gap: 0.25rem;
+  flex-grow: 1;
+}
+
+.modeToggleButton {
+  border-radius: 0.125rem;
+  font-size: 0.75rem;
+  width: 100%;
+}
+
+/* Icon pill buttons */
+.iconPillGroup {
+  gap: 0.25rem;
+  flex-grow: 1;
+}
+
+.iconPillButton {
+  border-radius: 0.125rem;
+  font-size: 0.75rem;
+  width: 100%;
+}
+
+/* Slider controls */
+.sliderGroup {
+  gap: 1rem;
+  align-items: center;
+}
+
+.numberInput {
+  width: 80px;
+  font-size: 0.875rem;
+}
+
+.slider {
+  flex: 1;
+}
+
+.sliderWide {
+  flex: 1.2;
+}
+
+/* Label text */
+.labelText {
+  font-size: 0.875rem;
+  font-weight: 500;
+}

frontend/src/core/components/tools/addStamp/StampPreview.tsx

@@ -0,0 +1,343 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AddStampParameters } from '@app/components/tools/addStamp/useAddStampParameters';
+import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
+import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
+import { A4_ASPECT_RATIO, getFirstSelectedPage, getFontFamily, computeStampPreviewStyle, getAlphabetPreviewScale } from '@app/components/tools/addStamp/StampPreviewUtils';
+import styles from '@app/components/tools/addStamp/StampPreview.module.css';
+
+type Props = {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  file?: File | null;
+  showQuickGrid?: boolean;
+};
+
+export default function StampPreview({ parameters, onParameterChange, file, showQuickGrid }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize, setContainerSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [imageMeta, setImageMeta] = useState<{ url: string; width: number; height: number } | null>(null);
+  const [pageSize, setPageSize] = useState<{ widthPts: number; heightPts: number } | null>(null);
+  const [pageThumbnail, setPageThumbnail] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+  const [hoverTile, setHoverTile] = useState<number | null>(null);
+
+  // Load image URL and meta for aspect ratio if an image is selected
+  useEffect(() => {
+    if (parameters.stampType === 'image' && parameters.stampImage) {
+      const url = URL.createObjectURL(parameters.stampImage);
+      const img = new Image();
+      img.onload = () => {
+        setImageMeta({ url, width: img.width, height: img.height });
+      };
+      img.src = url;
+      return () => URL.revokeObjectURL(url);
+    } else {
+      setImageMeta(null);
+    }
+  }, [parameters.stampType, parameters.stampImage]);
+
+  // Observe container size for responsive positioning
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const resize = () => {
+      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, [pageSize]);
+
+  // Load first PDF page size in points for accurate scaling
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageSize(null);
+        return;
+      }
+      try {
+        const buffer = await file.arrayBuffer();
+        const pdf = await pdfWorkerManager.createDocument(buffer, { disableAutoFetch: true, disableStream: true });
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 1 });
+        if (!cancelled) {
+          setPageSize({ widthPts: viewport.width, heightPts: viewport.height });
+        }
+        pdfWorkerManager.destroyDocument(pdf);
+      } catch {
+        // Fallback to A4 if we cannot read page
+        if (!cancelled) setPageSize(null);
+      }
+    };
+    load();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  // Load first-page thumbnail for background preview so users see the content
+  useEffect(() => {
+    let isActive = true;
+    const loadThumb = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageThumbnail(null);
+        return;
+      }
+      try {
+        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pageNumbers));
+        const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
+        const thumb = await requestThumbnail(pageId, file, pageNumber);
+        if (isActive) setPageThumbnail(thumb || null);
+      } catch {
+        if (isActive) setPageThumbnail(null);
+      }
+    };
+    loadThumb();
+    return () => { isActive = false; };
+  }, [file, parameters.pageNumbers, requestThumbnail]);
+
+  const style = useMemo(() => (
+    computeStampPreviewStyle(
+      parameters,
+      imageMeta,
+      pageSize,
+      containerSize,
+      showQuickGrid,
+      hoverTile,
+      !!pageThumbnail
+    )
+  ), [containerSize, parameters, imageMeta, pageSize, showQuickGrid, hoverTile, pageThumbnail]);
+
+  // Keep center fixed when scaling via slider (or any fontSize changes)
+  const prevDimsRef = useRef<{ fontSize: number; widthPx: number; heightPx: number; leftPx: number; bottomPx: number } | null>(null);
+  useEffect(() => {
+    const itemStyle = style.item as any;
+    if (!itemStyle || containerSize.width <= 0 || containerSize.height <= 0) return;
+
+    const parse = (v: any) => parseFloat(String(v).replace('px', '')) || 0;
+    const leftPx = parse(itemStyle.left);
+    const bottomPx = parse(itemStyle.bottom);
+    const widthPx = parse(itemStyle.width);
+    const heightPx = parse(itemStyle.height);
+
+    const prev = prevDimsRef.current;
+    const hasOverrides = parameters.overrideX >= 0 && parameters.overrideY >= 0;
+    const canAdjust = hasOverrides && !showQuickGrid;
+    if (
+      prev &&
+      canAdjust &&
+      parameters.fontSize !== prev.fontSize &&
+      prev.widthPx > 0 &&
+      prev.heightPx > 0 &&
+      widthPx > 0 &&
+      heightPx > 0
+    ) {
+      const centerX = prev.leftPx + prev.widthPx / 2;
+      const centerY = prev.bottomPx + prev.heightPx / 2;
+      const newLeftPx = centerX - widthPx / 2;
+      const newBottomPx = centerY - heightPx / 2;
+
+      const widthPts = pageSize?.widthPts ?? 595.28;
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleX = containerSize.width / widthPts;
+      const scaleY = containerSize.height / heightPts;
+      const newLeftPts = Math.max(0, Math.min(containerSize.width, newLeftPx)) / scaleX;
+      const newBottomPts = Math.max(0, Math.min(containerSize.height, newBottomPx)) / scaleY;
+      onParameterChange('overrideX', newLeftPts as any);
+      onParameterChange('overrideY', newBottomPts as any);
+    }
+
+    prevDimsRef.current = { fontSize: parameters.fontSize, widthPx, heightPx, leftPx, bottomPx };
+  }, [parameters.fontSize, style.item, containerSize, pageSize, showQuickGrid, parameters.overrideX, parameters.overrideY, onParameterChange]);
+
+  // Drag/resize/rotate interactions
+  const draggingRef = useRef<{ type: 'move' | 'resize' | 'rotate'; startX: number; startY: number; initLeft: number; initBottom: number; initHeight: number; centerX: number; centerY: number } | null>(null);
+
+  const ensureOverrides = () => {
+    const pageWidth = containerSize.width;
+    const pageHeight = containerSize.height;
+    if (pageWidth <= 0 || pageHeight <= 0) return;
+
+    // Recompute current x,y from style (so that we start from visual position)
+    const itemStyle = style.item as any;
+    const leftPx = parseFloat(String(itemStyle.left).replace('px', '')) || 0;
+    const bottomPx = parseFloat(String(itemStyle.bottom).replace('px', '')) || 0;
+    const widthPts = pageSize?.widthPts ?? 595.28;
+    const heightPts = pageSize?.heightPts ?? 841.89;
+    const scaleX = containerSize.width / widthPts;
+    const scaleY = containerSize.height / heightPts;
+    if (parameters.overrideX < 0 || parameters.overrideY < 0) {
+      onParameterChange('overrideX', Math.max(0, Math.min(pageWidth, leftPx)) / scaleX as any);
+      onParameterChange('overrideY', Math.max(0, Math.min(pageHeight, bottomPx)) / scaleY as any);
+    }
+  };
+
+  const handlePointerDown = (e: React.PointerEvent, type: 'move' | 'resize' | 'rotate') => {
+    e.preventDefault();
+    ensureOverrides();
+
+    const item = style.item as any;
+    const left = parseFloat(String(item.left).replace('px', '')) || 0;
+    const bottom = parseFloat(String(item.bottom).replace('px', '')) || 0;
+    const width = parseFloat(String(item.width).replace('px', '')) || parameters.fontSize;
+    const height = parseFloat(String(item.height).replace('px', '')) || parameters.fontSize;
+
+    const rect = (e.currentTarget.parentElement as HTMLElement)?.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = bottom + height / 2;
+
+    draggingRef.current = {
+      type,
+      startX: e.clientX - (rect?.left || 0),
+      startY: (rect ? rect.bottom - e.clientY : 0), // convert to bottom-based coords
+      initLeft: left,
+      initBottom: bottom,
+      initHeight: height,
+      centerX,
+      centerY,
+    };
+
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (!draggingRef.current) return;
+    const node = containerRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = rect.bottom - e.clientY; // bottom-based
+
+    const drag = draggingRef.current;
+
+    if (drag.type === 'move') {
+      const dx = x - drag.startX;
+      const dy = y - drag.startY;
+      const newLeftPx = Math.max(0, Math.min(containerSize.width, drag.initLeft + dx));
+      const newBottomPx = Math.max(0, Math.min(containerSize.height, drag.initBottom + dy));
+      const widthPts = pageSize?.widthPts ?? 595.28;
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleX = containerSize.width / widthPts;
+      const scaleY = containerSize.height / heightPts;
+      const newLeftPts = newLeftPx / scaleX;
+      const newBottomPts = newBottomPx / scaleY;
+      onParameterChange('overrideX', newLeftPts as any);
+      onParameterChange('overrideY', newBottomPts as any);
+    }
+
+    if (drag.type === 'resize') {
+      // Height is our canonical size (fontSize)
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleY = containerSize.height / heightPts;
+      const newHeightPx = Math.max(1, drag.initHeight + (y - drag.startY));
+      const newHeightPts = newHeightPx / scaleY;
+      onParameterChange('fontSize', newHeightPts as any);
+    }
+
+    if (drag.type === 'rotate') {
+      const angle = Math.atan2(y - drag.centerY, x - drag.centerX) * (180 / Math.PI);
+      onParameterChange('rotation', angle as any);
+    }
+  };
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+
+  const itemHandles = null; // Drag-only per request
+
+  return (
+    <div>
+      <div className={styles.previewHeader}>
+        <div className={styles.divider} />
+        <div className={styles.previewLabel}>Preview Stamp</div>
+      </div>
+      <div 
+        ref={containerRef} 
+        className={`${styles.container} ${styles.containerBorder} ${pageThumbnail ? styles.containerWithThumbnail : styles.containerWithoutThumbnail}`}
+        style={style.container as React.CSSProperties} 
+        onPointerMove={handlePointerMove} 
+        onPointerUp={handlePointerUp}
+      >
+        {pageThumbnail && (
+          <img
+            src={pageThumbnail}
+            alt="page preview"
+            className={styles.pageThumbnail}
+            draggable={false}
+          />
+        )}
+        {parameters.stampType === 'text' && (
+          <div
+            className={`${styles.stampItem} ${styles.stampItemGridMode}`}
+            style={style.item as React.CSSProperties}
+          >
+            {(parameters.stampText || '').split('\n').map((line, idx) => (
+              <span
+                key={idx}
+                className={styles.textLine}
+                style={{
+                  fontFamily: getFontFamily(parameters.alphabet),
+                  fontSize: `${Math.max(1, (parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet)) / 2)}px`,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {line || '\u00A0'}
+              </span>
+            ))}
+            {itemHandles}
+          </div>
+        )}
+        {parameters.stampType === 'image' && imageMeta && (
+          <div
+            className={`${styles.stampItem} ${showQuickGrid ? styles.stampItemGridMode : styles.stampItemDraggable}`}
+            style={style.item as React.CSSProperties}
+            onPointerDown={(e) => handlePointerDown(e, 'move')}
+          >
+            <img
+              src={imageMeta.url}
+              alt="stamp preview"
+              className={styles.stampImage}
+            />
+            {itemHandles}
+          </div>
+        )}
+
+        {/* Quick position overlay grid */}
+        {showQuickGrid && (
+          <div className={styles.quickGrid}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx && (parameters.overrideX < 0 || parameters.overrideY < 0);
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
+                  onClick={() => {
+                    // Clear overrides to use grid positioning and set position
+                    onParameterChange('overrideX', -1 as any);
+                    onParameterChange('overrideY', -1 as any);
+                    onParameterChange('position', idx as any);
+                  }}
+                  onMouseEnter={() => setHoverTile(idx)}
+                  onMouseLeave={() => setHoverTile(null)}
+                >
+                  {idx}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className={styles.previewDisclaimer}>
+        Preview is approximate. Final output may vary due to PDF font metrics.
+      </div>
+    </div>
+  );
+}
+
+

frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts

@@ -0,0 +1,235 @@
+import type { AddStampParameters } from '@app/components/tools/addStamp/useAddStampParameters';
+
+export type ContainerSize = { width: number; height: number };
+export type PageSizePts = { widthPts: number; heightPts: number } | null;
+export type ImageMeta = { url: string; width: number; height: number } | null;
+
+// Map UI margin option to backend margin factor
+export const marginFactorMap: Record<AddStampParameters['customMargin'], number> = {
+  'small': 0.02,
+  'medium': 0.035,
+  'large': 0.05,
+  'x-large': 0.075,
+};
+
+export const A4_ASPECT_RATIO = 0.707; // width/height used elsewhere in legacy UI
+
+// Get font family based on selected alphabet (matching backend logic)
+export const getFontFamily = (alphabet: string): string => {
+  switch (alphabet) {
+    case 'arabic':
+      return 'Noto Sans Arabic, Arial Unicode MS, sans-serif';
+    case 'japanese':
+      return 'Meiryo, Yu Gothic, Hiragino Sans, sans-serif';
+    case 'korean':
+      return 'Malgun Gothic, Dotum, sans-serif';
+    case 'chinese':
+      return 'SimSun, Microsoft YaHei, sans-serif';
+    case 'thai':
+      return 'Noto Sans Thai, Tahoma, sans-serif';
+    case 'roman':
+    default:
+      return 'Noto Sans, Arial, Helvetica, sans-serif';
+  }
+};
+
+// Lightweight parser: returns first page number from CSV/range input, otherwise 1
+export const getFirstSelectedPage = (input: string): number => {
+  if (!input) return 1;
+  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  for (const part of parts) {
+    if (/^\d+\s*-\s*\d+$/.test(part)) {
+      const low = parseInt(part.split('-')[0].trim(), 10);
+      if (Number.isFinite(low) && low > 0) return low;
+    }
+    const n = parseInt(part, 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return 1;
+};
+
+export type StampPreviewStyle = { container: any; item: any };
+
+// Unified per-alphabet preview adjustments
+export type Alphabet = 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
+export type AlphabetTweaks = { scale: number; rowOffsetRem: [number, number, number]; lineHeight: number; capHeightRatio: number; defaultFontSize: number };
+export const ALPHABET_PREVIEW_TWEAKS: Record<Alphabet, AlphabetTweaks> = {
+  // [top, middle, bottom] row offsets in rem
+  roman: { scale: 1.0/1.18, rowOffsetRem: [0, 1, 2.2], lineHeight: 1.28, capHeightRatio: 0.70, defaultFontSize: 80 },
+  arabic: { scale: 1.2, rowOffsetRem: [0, 1.5, 2.5], lineHeight: 1, capHeightRatio: 0.68, defaultFontSize: 80 },
+  japanese: { scale: 1/1.2, rowOffsetRem: [-0.1, 1, 2], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  korean: { scale: 1.0/1.05, rowOffsetRem: [-0.2, 0.5, 1.4], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  chinese: { scale: 1/1.2, rowOffsetRem: [0, 2, 2.8], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 30 }, // temporary default font size so that it fits on the PDF
+  thai: { scale: 1/1.2, rowOffsetRem: [-1, 0, .8], lineHeight: 1, capHeightRatio: 0.66, defaultFontSize: 80 },
+};
+export const getAlphabetPreviewScale = (alphabet: string): number => (ALPHABET_PREVIEW_TWEAKS as any)[alphabet]?.scale ?? 1.0;
+
+export const getDefaultFontSizeForAlphabet = (alphabet: string): number => {
+  return (ALPHABET_PREVIEW_TWEAKS as any)[alphabet]?.defaultFontSize ?? 80;
+};
+
+export function computeStampPreviewStyle(
+  parameters: AddStampParameters,
+  imageMeta: ImageMeta,
+  pageSize: PageSizePts,
+  containerSize: ContainerSize,
+  showQuickGrid: boolean | undefined,
+  _hoverTile: number | null,
+  hasPageThumbnail: boolean
+): StampPreviewStyle {
+  const pageWidthPx = containerSize.width;
+  const pageHeightPx = containerSize.height;
+  const widthPts = pageSize?.widthPts ?? 595.28; // A4 width at 72 DPI
+  const heightPts = pageSize?.heightPts ?? 841.89; // A4 height at 72 DPI
+  const scaleX = pageWidthPx / widthPts;
+  const scaleY = pageHeightPx / heightPts;
+  if (pageWidthPx <= 0 || pageHeightPx <= 0) return { item: {}, container: {} } as any;
+
+  const marginPts = (widthPts + heightPts) / 2 * (marginFactorMap[parameters.customMargin] ?? 0.035);
+
+  // Compute content dimensions
+  const heightPtsContent = parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet);
+  let widthPtsContent = heightPtsContent;
+
+
+  if (parameters.stampType === 'image' && imageMeta) {
+    const aspect = imageMeta.width / imageMeta.height;
+    widthPtsContent = heightPtsContent * aspect;
+  } else if (parameters.stampType === 'text') {
+    // Use Canvas 2D to measure text width for better fidelity than DOM spans
+    const textLine = (parameters.stampText || '').split('\n')[0] ?? '';
+    const fontPx = heightPtsContent * scaleY; // Convert point size to px using vertical scale
+    const fontFamily = getFontFamily(parameters.alphabet);
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.font = `${fontPx}px ${fontFamily}`;
+      const metrics = ctx.measureText(textLine);
+      const measuredWidthPx = metrics.width;
+      // Convert measured px width back to PDF points using horizontal scale
+      widthPtsContent = measuredWidthPx / scaleX;
+
+      let adjustmentFactor = 1.0;
+      switch (parameters.alphabet) {
+        case 'roman':
+          adjustmentFactor = 0.90;
+          break;
+        case 'arabic':
+        case 'thai':
+          adjustmentFactor = 0.92;
+          break;
+        case 'japanese':
+        case 'korean':
+        case 'chinese':
+          adjustmentFactor = 0.88;
+          break;
+        default:
+          adjustmentFactor = 0.93;
+      }
+      widthPtsContent *= adjustmentFactor;
+    }
+  }
+
+  // Positioning helpers - mirror backend logic
+  const position = parameters.position;
+  const calcX = () => {
+    if (parameters.overrideX >= 0 && parameters.overrideY >= 0) return parameters.overrideX;
+    switch (position % 3) {
+      case 1: // Left
+        return marginPts;
+      case 2: // Center
+        return (widthPts - widthPtsContent) / 2;
+      case 0: // Right
+        return widthPts - widthPtsContent - marginPts;
+      default:
+        return 0;
+    }
+  };
+  const calcY = () => {
+    if (parameters.overrideX >= 0 && parameters.overrideY >= 0) return parameters.overrideY;
+    // For text, backend positions using cap height, not full font size
+    const heightForY = parameters.stampType === 'text'
+      ? heightPtsContent * ((ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.capHeightRatio ?? 0.70)
+      : heightPtsContent;
+    switch (Math.floor((position - 1) / 3)) {
+      case 0: // Top
+        return heightPts - heightForY - marginPts;
+      case 1: // Middle
+        return (heightPts - heightForY) / 2;
+      case 2: // Bottom
+        return marginPts;
+      default:
+        return 0;
+    }
+  };
+
+  const xPts = calcX();
+  const yPts = calcY();
+  let xPx = xPts * scaleX;
+  let yPx = yPts * scaleY;
+  if (parameters.stampType === 'text') {
+    try {
+      const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+      const rowIndex = Math.floor((position - 1) / 3); // 0 top, 1 middle, 2 bottom
+      const offsets = (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.rowOffsetRem ?? [0, 0, 0];
+      const offsetRem = offsets[rowIndex] ?? 0;
+      yPx += offsetRem * rootFontSizePx;
+    } catch (e) {
+      // no-op
+      console.error(e);
+    }
+  }
+  const widthPx = widthPtsContent * scaleX;
+  const heightPx = heightPtsContent * scaleY;
+
+  xPx = Math.max(0, Math.min(xPx, pageWidthPx - widthPx));
+  yPx = Math.max(0, Math.min(yPx, pageHeightPx - heightPx));
+
+  const opacity = Math.max(0, Math.min(1, parameters.opacity / 100));
+  const displayOpacity = opacity;
+
+  let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';
+  if (parameters.stampType === 'text') {
+    const colIndex = position % 3; // 1: left, 2: center, 0: right
+    switch (colIndex) {
+      case 2: // center column
+        alignItems = 'center';
+        break;
+      case 0: // right column
+        alignItems = 'flex-end';
+        break;
+      default:
+        alignItems = 'flex-start';
+    }
+  }
+
+  return {
+    container: {
+      position: 'relative',
+      width: '100%',
+      aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
+      backgroundColor: hasPageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+      border: '1px solid var(--border-default, #333)',
+      overflow: 'hidden'
+    },
+    item: {
+      position: 'absolute',
+      left: `${xPx}px`,
+      bottom: `${yPx}px`,
+      width: `${widthPx}px`,
+      height: `${heightPx}px`,
+      opacity: displayOpacity,
+      transform: `rotate(${-parameters.rotation}deg)`,
+      transformOrigin: 'center center',
+      color: parameters.customColor,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      lineHeight: (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.lineHeight ?? 1,
+      alignItems,
+      cursor: showQuickGrid ? 'default' : 'move',
+      pointerEvents: showQuickGrid ? 'none' : 'auto',
+    }
+  };
+}

frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx

@@ -0,0 +1,112 @@
+import { useTranslation } from "react-i18next";
+import { Stack, Textarea, TextInput, Select, Button, Text, Divider } from "@mantine/core";
+import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
+import styles from "@app/components/tools/addStamp/StampPreview.module.css";
+import { getDefaultFontSizeForAlphabet } from "@app/components/tools/addStamp/StampPreviewUtils";
+
+interface StampSetupSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const StampSetupSettings = ({ parameters, onParameterChange, disabled = false }: StampSetupSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <TextInput
+        label={t('pageSelectionPrompt', 'Page Selection (e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)')}
+        value={parameters.pageNumbers}
+        onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
+        disabled={disabled}
+      />
+      <Divider/>
+      <div>
+        <Text size="sm" fw={500} mb="xs">{t('AddStampRequest.stampType', 'Stamp Type')}</Text>
+        <ButtonSelector
+          value={parameters.stampType}
+          onChange={(v: 'text' | 'image') => onParameterChange('stampType', v)}
+          options={[
+            { value: 'text', label: t('watermark.type.1', 'Text') },
+            { value: 'image', label: t('watermark.type.2', 'Image') },
+          ]}
+          disabled={disabled}
+          buttonClassName={styles.modeToggleButton}
+          textClassName={styles.modeToggleButtonText}
+        />
+      </div>
+
+      {parameters.stampType === 'text' && (
+        <>
+          <Textarea
+            label={t('AddStampRequest.stampText', 'Stamp Text')}
+            value={parameters.stampText}
+            onChange={(e) => onParameterChange('stampText', e.currentTarget.value)}
+            autosize
+            minRows={2}
+            disabled={disabled}
+          />
+          <Select
+            label={t('AddStampRequest.alphabet', 'Alphabet')}
+            value={parameters.alphabet}
+            onChange={(v) => {
+              const nextAlphabet = (v as any) || 'roman';
+              onParameterChange('alphabet', nextAlphabet);
+              const nextDefault = getDefaultFontSizeForAlphabet(nextAlphabet);
+              onParameterChange('fontSize', nextDefault);
+            }}
+            data={[
+              { value: 'roman', label: 'Roman' },
+              { value: 'arabic', label: 'العربية' },
+              { value: 'japanese', label: '日本語' },
+              { value: 'korean', label: '한국어' },
+              { value: 'chinese', label: '简体中文' },
+              { value: 'thai', label: 'ไทย' },
+            ]}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+      {parameters.stampType === 'image' && (
+        <Stack gap="xs">
+          <input
+            type="file"
+            accept=".png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.webp"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) onParameterChange('stampImage', file);
+            }}
+            disabled={disabled}
+            style={{ display: 'none' }}
+            id="stamp-image-input"
+          />
+          <Button
+            size="xs"
+            component="label"
+            htmlFor="stamp-image-input"
+            disabled={disabled}
+          >
+            {t('chooseFile', 'Choose File')}
+          </Button>
+          {parameters.stampImage && (
+            <Stack gap="xs">
+              <img
+                src={URL.createObjectURL(parameters.stampImage)}
+                alt="Selected stamp image"
+                className="max-h-24 w-full object-contain border border-gray-200 rounded bg-gray-50"
+              />
+              <Text size="xs" c="dimmed">
+                {parameters.stampImage.name}
+              </Text>
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default StampSetupSettings;

frontend/src/core/components/tools/addStamp/useAddStampOperation.ts

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
+import { AddStampParameters, defaultParameters } from '@app/components/tools/addStamp/useAddStampParameters';
+
+export const buildAddStampFormData = (parameters: AddStampParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append('fileInput', file);
+  formData.append('pageNumbers', parameters.pageNumbers);
+  formData.append('customMargin', parameters.customMargin || 'medium'); 
+  formData.append('position', String(parameters.position));
+  const effectiveFontSize = parameters.fontSize;
+  formData.append('fontSize', String(effectiveFontSize));
+  formData.append('rotation', String(parameters.rotation));
+  formData.append('opacity', String(parameters.opacity / 100));
+  formData.append('overrideX', String(parameters.overrideX));
+  formData.append('overrideY', String(parameters.overrideY));
+  formData.append('customColor', parameters.customColor.startsWith('#') ? parameters.customColor : `#${parameters.customColor}`);
+  formData.append('alphabet', parameters.alphabet);
+
+  // Stamp type and payload
+  formData.append('stampType', parameters.stampType || 'text');
+  if (parameters.stampType === 'text') {
+    formData.append('stampText', parameters.stampText);
+  } else if (parameters.stampType === 'image' && parameters.stampImage) {
+    formData.append('stampImage', parameters.stampImage);
+  }
+
+  return formData;
+};
+
+export const addStampOperationConfig = {
+  toolType: ToolType.singleFile,
+  buildFormData: buildAddStampFormData,
+  operationType: 'addStamp',
+  endpoint: '/api/v1/misc/add-stamp',
+  defaultParameters,
+} as const;
+
+export const useAddStampOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<AddStampParameters>({
+    ...addStampOperationConfig,
+    getErrorMessage: createStandardErrorHandler(
+      t('AddStampRequest.error.failed', 'An error occurred while adding stamp to the PDF.')
+    ),
+  });
+};
+
+

frontend/src/core/components/tools/addStamp/useAddStampParameters.ts

@@ -0,0 +1,53 @@
+import { BaseParameters } from '@app/types/parameters';
+import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+
+export interface AddStampParameters extends BaseParameters {
+  stampType?: 'text' | 'image';
+  stampText: string;
+  stampImage?: File;
+  alphabet: 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
+  fontSize: number; 
+  rotation: number; 
+  opacity: number;
+  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; 
+  overrideX: number;
+  overrideY: number; 
+  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  customColor: string;
+  pageNumbers: string;
+  _activePill: 'fontSize' | 'rotation' | 'opacity';
+}
+
+export const defaultParameters: AddStampParameters = {
+  stampType: 'text',
+  stampText: '',
+  alphabet: 'roman',
+  fontSize: 80,
+  rotation: 0,
+  opacity: 50,
+  position: 5,
+  overrideX: -1,
+  overrideY: -1,
+  customMargin: 'medium',
+  customColor: '#d3d3d3',
+  pageNumbers: '1',
+  _activePill: 'fontSize',
+};
+
+export type AddStampParametersHook = BaseParametersHook<AddStampParameters>;
+
+export const useAddStampParameters = (): AddStampParametersHook => {
+  return useBaseParameters<AddStampParameters>({
+    defaultParameters,
+    endpointName: 'add-stamp',
+    validateFn: (params): boolean => {
+      if (!params.stampType) return false;
+      if (params.stampType === 'text') {
+        return params.stampText.trim().length > 0;
+      }
+      return params.stampImage !== undefined;
+    },
+  });
+};
+
+

frontend/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { Stack } from "@mantine/core";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+import WatermarkTypeSettings from "@app/components/tools/addWatermark/WatermarkTypeSettings";
+import WatermarkWording from "@app/components/tools/addWatermark/WatermarkWording";
+import WatermarkTextStyle from "@app/components/tools/addWatermark/WatermarkTextStyle";
+import WatermarkImageFile from "@app/components/tools/addWatermark/WatermarkImageFile";
+import WatermarkFormatting from "@app/components/tools/addWatermark/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;

frontend/src/core/components/tools/addWatermark/WatermarkFormatting.tsx

@@ -0,0 +1,82 @@
+import { Stack, Checkbox, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+import NumberInputWithUnit from "@app/components/tools/shared/NumberInputWithUnit";
+
+interface WatermarkFormattingProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }: WatermarkFormattingProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Size - single row */}
+      <NumberInputWithUnit
+        label={t('watermark.settings.size', 'Size')}
+        value={parameters.fontSize}
+        onChange={(value) => onParameterChange('fontSize', typeof value === 'number' ? value : 12)}
+        unit={parameters.watermarkType === 'text' ? 'pt' : 'px'}
+        min={1}
+        disabled={disabled}
+      />
+
+      {/* Position & Appearance - 2 per row */}
+      <Group grow align="flex-start">
+        <NumberInputWithUnit
+          label={t('watermark.settings.rotation', 'Rotation')}
+          value={parameters.rotation}
+          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : 0)}
+          unit="°"
+          min={-360}
+          max={360}
+          disabled={disabled}
+        />
+        <NumberInputWithUnit
+          label={t('watermark.settings.opacity', 'Opacity')}
+          value={parameters.opacity}
+          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : 50)}
+          unit="%"
+          min={0}
+          max={100}
+          disabled={disabled}
+        />
+      </Group>
+
+      {/* Spacing - 2 per row */}
+      <Group grow align="flex-start">
+        <NumberInputWithUnit
+          label={t('watermark.settings.spacing.horizontal', 'Horizontal Spacing')}
+          value={parameters.widthSpacer}
+          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : 50)}
+          unit="px"
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+        <NumberInputWithUnit
+          label={t('watermark.settings.spacing.vertical', 'Vertical Spacing')}
+          value={parameters.heightSpacer}
+          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : 50)}
+          unit="px"
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+      </Group>
+
+      {/* Advanced Options */}
+      <Checkbox
+        label={t('watermark.settings.convertToImage', 'Flatten PDF pages to images')}
+        checked={parameters.convertPDFToImage}
+        onChange={(event) => onParameterChange('convertPDFToImage', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default WatermarkFormatting;

frontend/src/core/components/tools/addWatermark/WatermarkImageFile.tsx

@@ -0,0 +1,28 @@
+import { Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+import FileUploadButton from "@app/components/shared/FileUploadButton";
+
+interface WatermarkImageFileProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const WatermarkImageFile = ({ parameters, onParameterChange, disabled = false }: WatermarkImageFileProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm">
+      <FileUploadButton
+        file={parameters.watermarkImage}
+        onChange={(file) => onParameterChange('watermarkImage', file || undefined)}
+        accept="image/*"
+        disabled={disabled}
+        placeholder={t('watermark.settings.image.choose', 'Choose Image')}
+      />
+    </Stack>
+  );
+};
+
+export default WatermarkImageFile;

frontend/src/core/components/tools/addWatermark/WatermarkStyleSettings.tsx

@@ -0,0 +1,62 @@
+import { Stack, Text, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+
+interface WatermarkStyleSettingsProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = false }: WatermarkStyleSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Appearance Settings */}
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>{t('watermark.settings.rotation', 'Rotation (degrees)')}</Text>
+        <NumberInput
+          value={parameters.rotation}
+          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : (parseInt(value as string, 10) || 0))}
+          min={-360}
+          max={360}
+          disabled={disabled}
+        />
+
+        <Text size="sm" fw={500}>{t('watermark.settings.opacity', 'Opacity (%)')}</Text>
+        <NumberInput
+          value={parameters.opacity}
+          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          min={0}
+          max={100}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {/* Spacing Settings */}
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>{t('watermark.settings.spacing.width', 'Width Spacing')}</Text>
+        <NumberInput
+          value={parameters.widthSpacer}
+          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+
+        <Text size="sm" fw={500}>{t('watermark.settings.spacing.height', 'Height Spacing')}</Text>
+        <NumberInput
+          value={parameters.heightSpacer}
+          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          min={0}
+          max={200}
+          disabled={disabled}
+        />
+      </Stack>
+
+    </Stack>
+  );
+};
+
+export default WatermarkStyleSettings;

frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx

@@ -0,0 +1,45 @@
+import { Stack, Text, Select, ColorInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+import { alphabetOptions } from "@app/constants/addWatermarkConstants";
+
+interface WatermarkTextStyleProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }: WatermarkTextStyleProps) => {
+  const { t } = useTranslation();
+
+
+  return (
+    <Stack gap="sm">
+      <Stack gap="xs">
+        <Text size="xs" fw={500}>
+          {t("watermark.settings.color", "Colour")}
+        </Text>
+        <ColorInput
+          value={parameters.customColor}
+          onChange={(value) => onParameterChange("customColor", value)}
+          disabled={disabled}
+          format="hex"
+        />
+      </Stack>
+
+      <Stack gap="xs">
+        <Text size="xs" fw={500}>
+          {t("watermark.settings.alphabet", "Alphabet")}
+        </Text>
+        <Select
+          value={parameters.alphabet}
+          onChange={(value) => value && onParameterChange("alphabet", value)}
+          data={alphabetOptions}
+          disabled={disabled}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default WatermarkTextStyle;

frontend/src/core/components/tools/addWatermark/WatermarkTypeSettings.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
+
+interface WatermarkTypeSettingsProps {
+  watermarkType?: 'text' | 'image';
+  onWatermarkTypeChange: (type: 'text' | 'image') => void;
+  disabled?: boolean;
+}
+
+const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled = false }: WatermarkTypeSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <ButtonSelector
+      value={watermarkType}
+      onChange={onWatermarkTypeChange}
+      options={[
+        {
+          value: 'text',
+          label: t('watermark.watermarkType.text', 'Text'),
+        },
+        {
+          value: 'image',
+          label: t('watermark.watermarkType.image', 'Image'),
+        },
+      ]}
+      disabled={disabled}
+    />
+  );
+};
+
+export default WatermarkTypeSettings;

frontend/src/core/components/tools/addWatermark/WatermarkWording.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Stack, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddWatermarkParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
+import { removeEmojis } from "@app/utils/textUtils";
+
+interface WatermarkWordingProps {
+  parameters: AddWatermarkParameters;
+  onParameterChange: <K extends keyof AddWatermarkParameters>(key: K, value: AddWatermarkParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const WatermarkWording = ({ parameters, onParameterChange, disabled = false }: WatermarkWordingProps) => {
+  const { t } = useTranslation();
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const filteredValue = removeEmojis(value);
+    onParameterChange('watermarkText', filteredValue);
+  };
+
+  return (
+    <Stack gap="sm">
+      <TextInput
+        placeholder={t('watermark.settings.text.placeholder', 'Enter watermark text')}
+        value={parameters.watermarkText}
+        onChange={handleTextChange}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default WatermarkWording;

frontend/src/core/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx

@@ -0,0 +1,24 @@
+import { Stack } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function AdjustContrastBasicSettings({ parameters, onParameterChange, disabled }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <SliderWithInput label={t('adjustContrast.contrast', 'Contrast')} value={parameters.contrast} onChange={(v) => onParameterChange('contrast', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.brightness', 'Brightness')} value={parameters.brightness} onChange={(v) => onParameterChange('brightness', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.saturation', 'Saturation')} value={parameters.saturation} onChange={(v) => onParameterChange('saturation', v as any)} disabled={disabled} />
+    </Stack>
+  );
+}
+
+

frontend/src/core/components/tools/adjustContrast/AdjustContrastColorSettings.tsx

@@ -0,0 +1,24 @@
+import { Stack } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function AdjustContrastColorSettings({ parameters, onParameterChange, disabled }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <SliderWithInput label={t('adjustContrast.red', 'Red')} value={parameters.red} onChange={(v) => onParameterChange('red', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.green', 'Green')} value={parameters.green} onChange={(v) => onParameterChange('green', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.blue', 'Blue')} value={parameters.blue} onChange={(v) => onParameterChange('blue', v as any)} disabled={disabled} />
+    </Stack>
+  );
+}
+
+

frontend/src/core/components/tools/adjustContrast/AdjustContrastPreview.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react';
+import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
+import ObscuredOverlay from '@app/components/shared/ObscuredOverlay';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { applyAdjustmentsToCanvas } from '@app/components/tools/adjustContrast/utils';
+
+interface Props {
+  file: File | null;
+  parameters: AdjustContrastParameters;
+}
+
+export default function AdjustContrastPreview({ file, parameters }: Props) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [thumb, setThumb] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+
+  useEffect(() => {
+    let active = true;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') { setThumb(null); return; }
+      const id = `${file.name}:${file.size}:${file.lastModified}:page:1`;
+      const tUrl = await requestThumbnail(id, file, 1);
+      if (active) setThumb(tUrl || null);
+    };
+    load();
+    return () => { active = false; };
+  }, [file, requestThumbnail]);
+
+  useEffect(() => {
+    const revoked: string | null = null;
+    const render = async () => {
+      if (!thumb || !canvasRef.current) return;
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.src = thumb;
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject();
+      });
+
+      // Draw thumbnail to a source canvas
+      const src = document.createElement('canvas');
+      src.width = img.naturalWidth;
+      src.height = img.naturalHeight;
+      const sctx = src.getContext('2d');
+      if (!sctx) return;
+      sctx.drawImage(img, 0, 0);
+
+      // Apply accurate pixel adjustments
+      const adjusted = applyAdjustmentsToCanvas(src, parameters);
+
+      // Draw adjusted onto display canvas
+      const display = canvasRef.current;
+      display.width = adjusted.width;
+      display.height = adjusted.height;
+      const dctx = display.getContext('2d');
+      if (!dctx) return;
+      dctx.clearRect(0, 0, display.width, display.height);
+      dctx.drawImage(adjusted, 0, 0);
+    };
+    render();
+    return () => {
+      if (revoked) URL.revokeObjectURL(revoked);
+    };
+  }, [thumb, parameters]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
+        <div style={{ fontSize: 12, color: 'var(--text-color-muted)' }}>{t('common.preview', 'Preview')}</div>
+        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
+      </div>
+      <ObscuredOverlay
+        obscured={!thumb}
+        overlayMessage={<Text size="sm" c="white" fw={600}>{t('adjustContrast.noPreview', 'Select a PDF to preview')}</Text>}
+        borderRadius={6}
+      >
+        <div ref={containerRef} style={{ aspectRatio: '8.5/11', width: '100%', border: '1px solid var(--border-color)', borderRadius: 8, overflow: 'hidden' }}>
+          {thumb && (
+            <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
+          )}
+        </div>
+      </ObscuredOverlay>
+    </div>
+  );
+}
+
+

frontend/src/core/components/tools/adjustContrast/AdjustContrastSingleStepSettings.tsx

@@ -0,0 +1,30 @@
+import { Stack } from '@mantine/core';
+import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+import AdjustContrastBasicSettings from '@app/components/tools/adjustContrast/AdjustContrastBasicSettings';
+import AdjustContrastColorSettings from '@app/components/tools/adjustContrast/AdjustContrastColorSettings';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+// Single-step settings used by Automate to configure Adjust Contrast in one panel
+export default function AdjustContrastSingleStepSettings({ parameters, onParameterChange, disabled }: Props) {
+  return (
+    <Stack gap="lg">
+      <AdjustContrastBasicSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+      <AdjustContrastColorSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+}
+
+

frontend/src/core/components/tools/adjustContrast/utils.ts

@@ -0,0 +1,79 @@
+import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+
+export function applyAdjustmentsToCanvas(src: HTMLCanvasElement, params: AdjustContrastParameters): HTMLCanvasElement {
+  const out = document.createElement('canvas');
+  out.width = src.width;
+  out.height = src.height;
+  const ctx = out.getContext('2d');
+  if (!ctx) return src;
+  ctx.drawImage(src, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, out.width, out.height);
+  const data = imageData.data;
+
+  const contrast = params.contrast / 100; // 0..2
+  const brightness = params.brightness / 100; // 0..2
+  const saturation = params.saturation / 100; // 0..2
+  const redMul = params.red / 100; // 0..2
+  const greenMul = params.green / 100; // 0..2
+  const blueMul = params.blue / 100; // 0..2
+
+  const clamp = (v: number) => Math.min(255, Math.max(0, v));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i] * redMul;
+    let g = data[i + 1] * greenMul;
+    let b = data[i + 2] * blueMul;
+
+    // Contrast (centered at 128)
+    r = clamp((r - 128) * contrast + 128);
+    g = clamp((g - 128) * contrast + 128);
+    b = clamp((b - 128) * contrast + 128);
+
+    // Brightness
+    r = clamp(r * brightness);
+    g = clamp(g * brightness);
+    b = clamp(b * brightness);
+
+    // Saturation via HSL
+    const rn = r / 255, gn = g / 255, bn = b / 255;
+    const max = Math.max(rn, gn, bn); const min = Math.min(rn, gn, bn);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case rn: h = (gn - bn) / d + (gn < bn ? 6 : 0); break;
+        case gn: h = (bn - rn) / d + 2; break;
+        default: h = (rn - gn) / d + 4; break;
+      }
+      h /= 6;
+    }
+    s = Math.min(1, Math.max(0, s * saturation));
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1; if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    };
+    let r2: number, g2: number, b2: number;
+    if (s === 0) { r2 = g2 = b2 = l; }
+    else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r2 = hue2rgb(p, q, h + 1/3);
+      g2 = hue2rgb(p, q, h);
+      b2 = hue2rgb(p, q, h - 1/3);
+    }
+    data[i] = clamp(Math.round(r2 * 255));
+    data[i + 1] = clamp(Math.round(g2 * 255));
+    data[i + 2] = clamp(Math.round(b2 * 255));
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  return out;
+}
+
+

frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import AdjustPageScaleSettings from '@app/components/tools/adjustPageScale/AdjustPageScaleSettings';
+import { AdjustPageScaleParameters, PageSize } from '@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters';
+
+// Mock useTranslation with predictable return values
+const mockT = vi.fn((key: string, fallback?: string) => fallback || `mock-${key}`);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('AdjustPageScaleSettings', () => {
+  const defaultParameters: AdjustPageScaleParameters = {
+    scaleFactor: 1.0,
+    pageSize: PageSize.KEEP,
+  };
+
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render without crashing', () => {
+    render(
+      <TestWrapper>
+        <AdjustPageScaleSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Basic render test - component renders without throwing
+    expect(screen.getByText('Scale Factor')).toBeInTheDocument();
+    expect(screen.getByText('Target Page Size')).toBeInTheDocument();
+  });
+
+  test('should render with custom parameters', () => {
+    const customParameters: AdjustPageScaleParameters = {
+      scaleFactor: 2.5,
+      pageSize: PageSize.A4,
+    };
+
+    render(
+      <TestWrapper>
+        <AdjustPageScaleSettings
+          parameters={customParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Component renders successfully with custom parameters
+    expect(screen.getByText('Scale Factor')).toBeInTheDocument();
+    expect(screen.getByText('Target Page Size')).toBeInTheDocument();
+  });
+});

frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx

@@ -0,0 +1,55 @@
+import { Stack, NumberInput, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AdjustPageScaleParameters, PageSize } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
+
+interface AdjustPageScaleSettingsProps {
+  parameters: AdjustPageScaleParameters;
+  onParameterChange: <K extends keyof AdjustPageScaleParameters>(key: K, value: AdjustPageScaleParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = false }: AdjustPageScaleSettingsProps) => {
+  const { t } = useTranslation();
+
+  const pageSizeOptions = [
+    { value: PageSize.KEEP, label: t('adjustPageScale.pageSize.keep', 'Keep Original Size') },
+    { value: PageSize.A0, label: 'A0' },
+    { value: PageSize.A1, label: 'A1' },
+    { value: PageSize.A2, label: 'A2' },
+    { value: PageSize.A3, label: 'A3' },
+    { value: PageSize.A4, label: 'A4' },
+    { value: PageSize.A5, label: 'A5' },
+    { value: PageSize.A6, label: 'A6' },
+    { value: PageSize.LETTER, label: t('adjustPageScale.pageSize.letter', 'Letter') },
+    { value: PageSize.LEGAL, label: t('adjustPageScale.pageSize.legal', 'Legal') },
+  ];
+
+  return (
+    <Stack gap="md">
+      <NumberInput
+        label={t('adjustPageScale.scaleFactor.label', 'Scale Factor')}
+        value={parameters.scaleFactor}
+        onChange={(value) => onParameterChange('scaleFactor', typeof value === 'number' ? value : 1.0)}
+        min={0.1}
+        max={10.0}
+        step={0.1}
+        decimalScale={2}
+        disabled={disabled}
+      />
+
+      <Select
+        label={t('adjustPageScale.pageSize.label', 'Target Page Size')}
+        value={parameters.pageSize}
+        onChange={(value) => {
+          if (value && Object.values(PageSize).includes(value as PageSize)) {
+            onParameterChange('pageSize', value as PageSize);
+          }
+        }}
+        data={pageSizeOptions}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default AdjustPageScaleSettings;

frontend/src/core/components/tools/autoRename/AutoRenameSettings.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AutoRenameParameters } from '@app/hooks/tools/autoRename/useAutoRenameParameters';
+
+interface AutoRenameSettingsProps {
+  parameters: AutoRenameParameters;
+  onParameterChange: <K extends keyof AutoRenameParameters>(parameter: K, value: AutoRenameParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AutoRenameSettings: React.FC<AutoRenameSettingsProps> = (
+  ) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="auto-rename-settings">
+      <p className="text-muted">
+        {t('autoRename.description', 'This tool will automatically rename PDF files based on their content. It analyzes the document to find the most suitable title from the text.')}
+      </p>
+    </div>
+  );
+};
+
+export default AutoRenameSettings;

frontend/src/core/components/tools/automate/AutomationCreation.tsx

@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Text,
+  Stack,
+  Group,
+  TextInput,
+  Textarea,
+  Divider,
+  Modal
+} from '@mantine/core';
+import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
+import CheckIcon from '@mui/icons-material/Check';
+import { ToolRegistry } from '@app/data/toolsTaxonomy';
+import ToolConfigurationModal from '@app/components/tools/automate/ToolConfigurationModal';
+import ToolList from '@app/components/tools/automate/ToolList';
+import IconSelector from '@app/components/tools/automate/IconSelector';
+import { AutomationConfig, AutomationMode, AutomationTool } from '@app/types/automation';
+import { useAutomationForm } from '@app/hooks/tools/automate/useAutomationForm';
+
+
+interface AutomationCreationProps {
+  mode: AutomationMode;
+  existingAutomation?: AutomationConfig;
+  onBack: () => void;
+  onComplete: (automation: AutomationConfig) => void;
+  toolRegistry: Partial<ToolRegistry>;
+}
+
+export default function AutomationCreation({ mode, existingAutomation, onBack, onComplete, toolRegistry }: AutomationCreationProps) {
+  const { t } = useTranslation();
+
+  const {
+    automationName,
+    setAutomationName,
+    automationDescription,
+    setAutomationDescription,
+    automationIcon,
+    setAutomationIcon,
+    selectedTools,
+    removeTool,
+    updateTool,
+    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 handleConfirmBack = () => {
+    setUnsavedWarningOpen(false);
+    onBack();
+  };
+
+  const handleCancelBack = () => {
+    setUnsavedWarningOpen(false);
+  };
+
+  const saveAutomation = async () => {
+    if (!canSaveAutomation()) return;
+
+    const automationData = {
+      name: automationName.trim(),
+      description: automationDescription.trim(),
+      icon: automationIcon,
+      operations: selectedTools.map(tool => ({
+        operation: tool.operation,
+        parameters: tool.parameters || {}
+      }))
+    };
+
+    try {
+      const { automationStorage } = await import('@app/services/automationStorage');
+      let savedAutomation;
+
+      if (mode === AutomationMode.EDIT && existingAutomation) {
+        // For edit mode, check if name has changed
+        const nameChanged = automationName.trim() !== existingAutomation.name;
+
+        if (nameChanged) {
+          // Name changed - create new automation
+          savedAutomation = await automationStorage.saveAutomation(automationData);
+        } else {
+          // Name unchanged - update existing automation
+          const updatedAutomation = {
+            ...existingAutomation,
+            ...automationData,
+            id: existingAutomation.id,
+            createdAt: existingAutomation.createdAt
+          };
+          savedAutomation = await automationStorage.updateAutomation(updatedAutomation);
+        }
+      } else {
+        // Create mode - always create new automation
+        savedAutomation = await automationStorage.saveAutomation(automationData);
+      }
+
+      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.intro", "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 and Icon */}
+        <Group gap="xs" align="flex-end">
+          <Stack gap="xs" style={{ flex: 1 }}>
+            <TextInput
+              placeholder={t('automate.creation.name.placeholder', 'My Automation')}
+              value={automationName}
+              withAsterisk
+              label={t('automate.creation.name.label', 'Automation Name')}
+              onChange={(e) => setAutomationName(e.currentTarget.value)}
+              size="sm"
+            />
+          </Stack>
+
+          <IconSelector
+            value={automationIcon || 'SettingsIcon'}
+            onChange={setAutomationIcon}
+            size="sm"
+          />
+        </Group>
+
+        {/* Automation Description */}
+        <Textarea
+          placeholder={t('automate.creation.description.placeholder', 'Describe what this automation does...')}
+          value={automationDescription}
+          label={t('automate.creation.description.label', 'Description')}
+          onChange={(e) => setAutomationDescription(e.currentTarget.value)}
+          size="sm"
+          rows={3}
+        />
+
+
+        {/* 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
+        zIndex={Z_INDEX_AUTOMATE_MODAL}
+      >
+        <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>
+  );
+}

frontend/src/core/components/tools/automate/AutomationEntry.tsx

@@ -0,0 +1,260 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Group, Text, ActionIcon, Menu, Button, 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';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { Tooltip } from '@app/components/shared/Tooltip';
+import { ToolIcon } from '@app/components/shared/ToolIcon';
+import { ToolRegistry } from '@app/data/toolsTaxonomy';
+import { ToolId } from "@app/types/toolId";
+
+interface AutomationEntryProps {
+  /** Optional title for the automation (usually for custom ones) */
+  title?: string;
+  /** Optional description for tooltip */
+  description?: 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;
+  /** Copy handler (for suggested automations) */
+  onCopy?: () => void;
+  /** Tool registry to resolve operation names */
+  toolRegistry?: Partial<ToolRegistry>;
+}
+
+export default function AutomationEntry({
+  title,
+  description,
+  badgeIcon: BadgeIcon,
+  operations,
+  onClick,
+  keepIconColor = false,
+  showMenu = false,
+  onEdit,
+  onDelete,
+  onCopy,
+  toolRegistry
+}: AutomationEntryProps) {
+  const { t } = useTranslation();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const shouldShowMenu = isHovered || isMenuOpen;
+
+  // Helper function to resolve tool display names
+  const getToolDisplayName = (operation: string): string => {
+    const entry = toolRegistry?.[operation as ToolId];
+    if (entry?.name) {
+      return entry.name;
+    }
+    // Fallback to translation or operation key
+    return t(`${operation}.title`, operation);
+  };
+
+  // Create tooltip content with description and tool chain
+  const createTooltipContent = () => {
+    // Show tooltip if there's a description OR if there are operations to show in the chain
+    if (!description && operations.length === 0) return null;
+
+    const toolChain = operations.map((op, index) => (
+      <React.Fragment key={`${op}-${index}`}>
+        <Text
+          component="span"
+          size="sm"
+          fw={600}
+          style={{
+            color: 'var(--mantine-primary-color-filled)',
+            background: 'var(--mantine-primary-color-light)',
+            padding: '2px 6px',
+            borderRadius: '4px',
+            fontSize: '0.75rem',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {getToolDisplayName(op)}
+        </Text>
+        {index < operations.length - 1 && (
+          <Text component="span" size="sm" mx={4}>
+            →
+          </Text>
+        )}
+      </React.Fragment>
+    ));
+
+    return (
+      <div style={{ minWidth: '400px', width: 'auto' }}>
+        {description && (
+          <Text size="sm" mb={8} style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
+            {description}
+          </Text>
+        )}
+        {operations.length > 0 && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', whiteSpace: 'nowrap' }}>
+            {toolChain}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const buttonContent = (
+    <>
+      {BadgeIcon && (
+        <ToolIcon
+          icon={<BadgeIcon />}
+          {...(keepIconColor && { color: 'var(--mantine-primary-color-filled)' })}
+        />
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
+        {title ? (
+          // Custom automation with title
+          <Text size="sm" style={{ textAlign: 'left' }}>
+            {title}
+          </Text>
+        ) : (
+          // Suggested automation showing tool chain
+          <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>
+            {operations.map((op, index) => (
+              <React.Fragment key={`${op}-${index}`}>
+                <Text size="sm">
+                  {getToolDisplayName(op)}
+                </Text>
+                {index < operations.length - 1 && (
+                  <Text size="sm" c="dimmed">
+                    →
+                  </Text>
+                )}
+              </React.Fragment>
+            ))}
+          </Group>
+        )}
+      </div>
+    </>
+  );
+
+  const wrapperContent = (
+    <Box
+      style={{ position: 'relative', width: '100%' }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Button
+        variant="subtle"
+        onClick={onClick}
+        size="sm"
+        radius="md"
+        fullWidth
+        justify="flex-start"
+        className="tool-button"
+        styles={{
+          root: {
+            borderRadius: 0,
+            color: "var(--tools-text-and-icon-color)",
+            overflow: 'visible',
+            backgroundColor: shouldShowMenu ? 'var(--automation-entry-hover-bg)' : undefined,
+            '&:hover': {
+              backgroundColor: 'var(--automation-entry-hover-bg)'
+            }
+          },
+          label: { overflow: 'visible' }
+        }}
+      >
+        {buttonContent}
+      </Button>
+      {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={{
+                position: 'absolute',
+                right: '0.5rem',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 1,
+                opacity: shouldShowMenu ? 1 : 0,
+                transition: 'opacity 0.2s ease',
+                pointerEvents: shouldShowMenu ? 'auto' : 'none'
+              }}
+            >
+              <MoreVertIcon style={{ fontSize: 20 }} />
+            </ActionIcon>
+          </Menu.Target>
+
+          <Menu.Dropdown>
+            {onCopy && (
+              <Menu.Item
+                leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCopy();
+                }}
+              >
+                {t('automate.copyToSaved', 'Copy to Saved')}
+              </Menu.Item>
+            )}
+            {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>
+      )}
+    </Box>
+  );
+
+  // Show tooltip if there's a description OR operations to display
+  const shouldShowTooltip = description || operations.length > 0;
+
+  return shouldShowTooltip ? (
+    <Tooltip
+      content={createTooltipContent()}
+      position="right"
+      arrow={true}
+      delay={500}
+    >
+      {wrapperContent}
+    </Tooltip>
+  ) : (
+    wrapperContent
+  );
+}

frontend/src/core/components/tools/automate/AutomationRun.tsx

@@ -0,0 +1,224 @@
+import { useEffect, 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 "@app/contexts/FileContext";
+import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
+import { AutomationConfig, ExecutionStep } from "@app/types/automation";
+import { AUTOMATION_CONSTANTS, EXECUTION_STATUS } from "@app/constants/automation";
+import { useResourceCleanup } from "@app/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 { regularTools } = useToolRegistry();
+  const toolRegistry = regularTools;
+  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
+  useEffect(() => {
+    if (automation?.operations) {
+      const steps = automation.operations.map((op: any, index: number) => {
+        const tool = toolRegistry[op.operation as keyof typeof toolRegistry];
+        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
+  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>
+  );
+}

frontend/src/core/components/tools/automate/AutomationSelection.tsx

@@ -0,0 +1,92 @@
+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 "@app/components/tools/automate/AutomationEntry";
+import { useSuggestedAutomations } from "@app/hooks/tools/automate/useSuggestedAutomations";
+import { AutomationConfig, SuggestedAutomation } from "@app/types/automation";
+import { iconMap } from '@app/components/tools/automate/iconMap';
+import { ToolRegistry } from '@app/data/toolsTaxonomy';
+
+interface AutomationSelectionProps {
+  savedAutomations: AutomationConfig[];
+  onCreateNew: () => void;
+  onRun: (automation: AutomationConfig) => void;
+  onEdit: (automation: AutomationConfig) => void;
+  onDelete: (automation: AutomationConfig) => void;
+  onCopyFromSuggested: (automation: SuggestedAutomation) => void;
+  toolRegistry: Partial<ToolRegistry>;
+}
+
+export default function AutomationSelection({
+  savedAutomations,
+  onCreateNew,
+  onRun,
+  onEdit,
+  onDelete,
+  onCopyFromSuggested,
+  toolRegistry
+}: 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}
+        toolRegistry={toolRegistry}
+      />
+      {/* Saved Automations */}
+      {savedAutomations.map((automation) => {
+        const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
+        return (
+          <AutomationEntry
+            key={automation.id}
+            title={automation.name}
+            description={automation.description}
+            badgeIcon={IconComponent || SettingsIcon}
+            operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
+            onClick={() => onRun(automation)}
+            showMenu={true}
+            onEdit={() => onEdit(automation)}
+            onDelete={() => onDelete(automation)}
+            toolRegistry={toolRegistry}
+          />
+        );
+      })}
+      <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}
+              title={automation.name}
+              description={automation.description}
+              badgeIcon={automation.icon}
+              operations={automation.operations.map(op => op.operation)}
+              onClick={() => onRun(automation)}
+              showMenu={true}
+              onCopy={() => onCopyFromSuggested(automation)}
+              toolRegistry={toolRegistry}
+            />
+          ))}
+        </Stack>
+      </div>
+    </Stack>
+    </div>
+  );
+}

frontend/src/core/components/tools/automate/IconSelector.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { iconMap, iconOptions } from '@app/components/tools/automate/iconMap';
+
+interface IconSelectorProps {
+  value?: string;
+  onChange?: (iconKey: string) => void;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function IconSelector({ value = "SettingsIcon", onChange, size = "sm" }: IconSelectorProps) {
+  const { t } = useTranslation();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const selectedIconComponent = iconMap[value as keyof typeof iconMap] || iconMap.SettingsIcon;
+
+  const handleIconSelect = (iconKey: string) => {
+    onChange?.(iconKey);
+    setIsDropdownOpen(false);
+  };
+
+  const iconSize = size === "sm" ? 16 : size === "md" ? 18 : 20;
+
+  return (
+    <Stack gap="1px">
+      <Text size="sm" fw={600} style={{ color: "var(--mantine-color-primary)" }}>
+        {t("automate.creation.icon.label", "Icon")}
+      </Text>
+
+      <Popover
+        opened={isDropdownOpen}
+        onClose={() => setIsDropdownOpen(false)}
+        onDismiss={() => setIsDropdownOpen(false)}
+        position="bottom-start"
+        withArrow
+        trapFocus
+      >
+        <Popover.Target>
+          <Button
+            variant="outline"
+            size={size}
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            style={{
+              width: size === "sm" ? "3.75rem" : "4.375rem",
+              position: "relative",
+              display: "flex",
+              justifyContent: "flex-start",
+              paddingLeft: "0.5rem",
+              borderColor: "var(--mantine-color-gray-3)",
+              color: "var(--mantine-color-text)",
+
+            }}
+          >
+            {React.createElement(selectedIconComponent, { style: { fontSize: iconSize } })}
+            <KeyboardArrowDownIcon
+              style={{
+                fontSize: iconSize * 0.8,
+                position: "absolute",
+                right: "0.25rem",
+                top: "50%",
+                transform: "translateY(-50%)",
+              }}
+            />
+          </Button>
+        </Popover.Target>
+
+        <Popover.Dropdown>
+          <Stack gap="xs">
+            <SimpleGrid cols={4} spacing="xs">
+              {iconOptions.map((option) => {
+                const IconComponent = iconMap[option.value as keyof typeof iconMap];
+                const isSelected = value === option.value;
+
+                return (
+                  <Tooltip key={option.value} label={option.label}>
+                    <Box
+                      onClick={() => handleIconSelect(option.value)}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        padding: "0.5rem",
+                        borderRadius: "0.25rem",
+                        cursor: "pointer",
+                        backgroundColor: isSelected ? "var(--mantine-color-gray-1)" : "transparent",
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-0)";
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        }
+                      }}
+                    >
+                      <IconComponent
+                        style={{
+                          fontSize: iconSize,
+                          color: isSelected ? "var(--mantine-color-gray-9)" : "var(--mantine-color-gray-7)",
+                        }}
+                      />
+                    </Box>
+                  </Tooltip>
+                );
+              })}
+            </SimpleGrid>
+          </Stack>
+        </Popover.Dropdown>
+      </Popover>
+    </Stack>
+  );
+}

frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Modal,
+  Title,
+  Button,
+  Group,
+  Stack,
+  Text,
+  Alert
+} from '@mantine/core';
+import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
+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 '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+import { getAvailableToExtensions } from '@app/utils/convertUtils';
+interface ToolConfigurationModalProps {
+  opened: boolean;
+  tool: {
+    id: string;
+    operation: string;
+    name: string;
+    parameters?: any;
+  };
+  onSave: (parameters: any) => void;
+  onCancel: () => void;
+  toolRegistry: Partial<ToolRegistry>;
+}
+
+export default function ToolConfigurationModal({ opened, tool, onSave, onCancel, toolRegistry }: ToolConfigurationModalProps) {
+  const { t } = useTranslation();
+
+  const [parameters, setParameters] = useState<any>({});
+
+  // Get tool info from registry
+  const toolInfo = toolRegistry[tool.operation as ToolId];
+  const SettingsComponent = toolInfo?.automationSettings;
+
+  // 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 = () => {
+    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
+      zIndex={Z_INDEX_AUTOMATE_MODAL}
+    >
+      <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', overflowX: "hidden" }}>
+          {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}
+          >
+            {t('automate.config.save', 'Save Configuration')}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

frontend/src/core/components/tools/automate/ToolList.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Text, Stack, Group, ActionIcon } from "@mantine/core";
+import SettingsIcon from "@mui/icons-material/Settings";
+import CloseIcon from "@mui/icons-material/Close";
+import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
+import { AutomationTool } from "@app/types/automation";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import ToolSelector from "@app/components/tools/automate/ToolSelector";
+import AutomationEntry from "@app/components/tools/automate/AutomationEntry";
+
+interface ToolListProps {
+  tools: AutomationTool[];
+  toolRegistry: Partial<ToolRegistry>;
+  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);
+    const toolEntry = toolRegistry[newOperation as ToolId];
+    // If tool has no settingsComponent, it's automatically configured
+    const isConfigured = !toolEntry?.automationSettings;
+
+    onToolUpdate(index, {
+      operation: newOperation,
+      name: getToolName(newOperation),
+      configured: isConfigured,
+      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: tool.operation && !tool.configured
+                  ? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
+                  : "var(--mantine-radius-lg)",
+                backgroundColor: "var(--mantine-color-gray-2)",
+                position: "relative",
+                padding: "var(--mantine-spacing-xs)",
+                borderBottomWidth: tool.operation && !tool.configured ? "0" : "1px",
+              }}
+            >
+              {/* Delete X in top right - only show for tools after the first 2 */}
+              {index > 1 && (
+                <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: 16 }} />
+                </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>
+              </div>
+            </div>
+            {/* Configuration status underneath */}
+            {tool.operation && !tool.configured && (
+              <div
+                style={{
+                  width: "100%",
+                  border: "1px solid var(--mantine-color-gray-2)",
+                  borderTop: "none",
+                  borderRadius: "0 0 var(--mantine-radius-lg) var(--mantine-radius-lg)",
+                  backgroundColor: "var(--active-bg)",
+                  padding: "var(--mantine-spacing-xs)",
+                }}
+              >
+                <Text pl="md" size="xs" >
+                  {t("automate.creation.tools.notConfigured", "! Not Configured")}
+                </Text>
+              </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>
+  );
+}

frontend/src/core/components/tools/automate/ToolSelector.tsx

@@ -0,0 +1,218 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Stack, Text, ScrollArea } from '@mantine/core';
+import { ToolRegistryEntry, ToolRegistry, getToolSupportsAutomate } from '@app/data/toolsTaxonomy';
+import { useToolSections } from '@app/hooks/useToolSections';
+import { renderToolButtons } from '@app/components/tools/shared/renderToolButtons';
+import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
+import ToolButton from '@app/components/tools/toolPicker/ToolButton';
+import { ToolId } from '@app/types/toolId';
+
+interface ToolSelectorProps {
+  onSelect: (toolKey: string) => void;
+  excludeTools?: string[];
+  toolRegistry: Partial<ToolRegistry>; // 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('');
+  const [shouldAutoFocus, setShouldAutoFocus] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Filter out excluded tools (like 'automate' itself) and tools that don't support automation
+  const baseFilteredTools = useMemo(() => {
+    return (Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][]).filter(([key, tool]) =>
+      !excludeTools.includes(key) && getToolSupportsAutomate(tool)
+    );
+  }, [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: Partial<ToolRegistry> = {};
+    baseFilteredTools.forEach(([key, tool]) => {
+      registry[key as ToolId] = tool;
+    });
+    return registry;
+  }, [baseFilteredTools]);
+
+  // Transform filteredTools to the expected format for useToolSections
+  const transformedFilteredTools = useMemo(() => {
+    return filteredTools.map(([id, tool]) => ({ item: [id as ToolId, tool] as [ToolId, ToolRegistryEntry] }));
+  }, [filteredTools]);
+
+  // Use the same tool sections logic as the main ToolPicker
+  const { sections, searchGroups } = useToolSections(transformedFilteredTools as any /* FIX ME */);
+
+  // 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) {
+      // If no sections, create a simple group from filtered tools
+      if (baseFilteredTools.length > 0) {
+        return [{
+          name: 'All Tools',
+          subcategoryId: 'all' as any,
+          tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
+        }];
+      }
+      return [];
+    }
+
+    // Find the "all" section which contains all tools without duplicates
+    const allSection = sections.find(s => s.key === 'all');
+    return allSection?.subcategories || [];
+  }, [isSearching, searchGroups, sections, baseFilteredTools]);
+
+  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 as any, null, handleToolSelect, !isSearching, true)
+    ), [displayGroups, handleToolSelect, isSearching, t]
+  );
+
+  const handleSearchFocus = () => {
+    setOpened(true);
+    setShouldAutoFocus(true); // Request auto-focus for the input
+  };
+
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpened(false);
+        setSearchTerm('');
+      }
+    };
+
+    if (opened) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [opened]);
+
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    if (!opened) {
+      setOpened(true);
+    }
+  };
+
+  const handleInputFocus = () => {
+    if (!opened) {
+      setOpened(true);
+    }
+    // Clear auto-focus flag since input is now focused
+    setShouldAutoFocus(false);
+  };
+
+  // Get display value for selected tool
+  const selectedTool = selectedValue ? toolRegistry[selectedValue as ToolId] : undefined;
+
+  const getDisplayValue = () => {
+    if (selectedTool) return selectedTool.name;
+    return placeholder || t('automate.creation.tools.add', 'Add a tool...');
+  };
+
+  return (
+    <div ref={containerRef} className='rounded-xl'>
+      {/* Always show the target - either selected tool or search input */}
+
+        {selectedTool && !opened ? (
+          // Show selected tool in AutomationEntry style when tool is selected and dropdown closed
+          <div onClick={handleSearchFocus} style={{ cursor: 'pointer',
+           borderRadius: "var(--mantine-radius-lg)" }}>
+            <ToolButton
+              id={'tool' as ToolId}
+              tool={selectedTool}
+              isSelected={false}
+              onSelect={()=>{}}
+              rounded={true}
+              disableNavigation={true}
+            />
+          </div>
+        ) : (
+          // Show search input when no tool selected OR when dropdown is opened
+          <ToolSearch
+            value={searchTerm}
+            onChange={handleSearchChange}
+            toolRegistry={filteredToolRegistry}
+            mode="unstyled"
+            placeholder={getDisplayValue()}
+            hideIcon={true}
+            onFocus={handleInputFocus}
+            autoFocus={shouldAutoFocus}
+          />
+        )}
+
+      {/* Custom dropdown */}
+      {opened && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            backgroundColor: 'var(--mantine-color-body)',
+            border: '1px solid var(--mantine-color-gray-3)',
+            borderRadius: 'var(--mantine-radius-sm)',
+            boxShadow: 'var(--mantine-shadow-sm)',
+            marginTop: '4px',
+            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>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/core/components/tools/automate/iconMap.ts

@@ -0,0 +1,92 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+import CompressIcon from '@mui/icons-material/Compress';
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
+import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
+import CropIcon from '@mui/icons-material/Crop';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderIcon from '@mui/icons-material/Folder';
+import CloudIcon from '@mui/icons-material/Cloud';
+import StorageIcon from '@mui/icons-material/Storage';
+import SearchIcon from '@mui/icons-material/Search';
+import DownloadIcon from '@mui/icons-material/Download';
+import UploadIcon from '@mui/icons-material/Upload';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
+import RotateRightIcon from '@mui/icons-material/RotateRight';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import ContentCutIcon from '@mui/icons-material/ContentCut';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import WorkIcon from '@mui/icons-material/Work';
+import BuildIcon from '@mui/icons-material/Build';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
+import CheckIcon from '@mui/icons-material/Check';
+import SecurityIcon from '@mui/icons-material/Security';
+import StarIcon from '@mui/icons-material/Star';
+
+export const iconMap = {
+  SettingsIcon,
+  CompressIcon,
+  SwapHorizIcon,
+  CleaningServicesIcon,
+  CropIcon,
+  TextFieldsIcon,
+  PictureAsPdfIcon,
+  EditIcon,
+  DeleteIcon,
+  FolderIcon,
+  CloudIcon,
+  StorageIcon,
+  SearchIcon,
+  DownloadIcon,
+  UploadIcon,
+  PlayArrowIcon,
+  RotateLeftIcon,
+  RotateRightIcon,
+  VisibilityIcon,
+  ContentCutIcon,
+  ContentCopyIcon,
+  WorkIcon,
+  BuildIcon,
+  AutoAwesomeIcon,
+  SmartToyIcon,
+  CheckIcon,
+  SecurityIcon,
+  StarIcon
+};
+
+export const iconOptions = [
+  { value: 'SettingsIcon', label: 'Settings' },
+  { value: 'CompressIcon', label: 'Compress' },
+  { value: 'SwapHorizIcon', label: 'Convert' },
+  { value: 'CleaningServicesIcon', label: 'Clean' },
+  { value: 'CropIcon', label: 'Crop' },
+  { value: 'TextFieldsIcon', label: 'Text' },
+  { value: 'PictureAsPdfIcon', label: 'PDF' },
+  { value: 'EditIcon', label: 'Edit' },
+  { value: 'DeleteIcon', label: 'Delete' },
+  { value: 'FolderIcon', label: 'Folder' },
+  { value: 'CloudIcon', label: 'Cloud' },
+  { value: 'StorageIcon', label: 'Storage' },
+  { value: 'SearchIcon', label: 'Search' },
+  { value: 'DownloadIcon', label: 'Download' },
+  { value: 'UploadIcon', label: 'Upload' },
+  { value: 'PlayArrowIcon', label: 'Play' },
+  { value: 'RotateLeftIcon', label: 'Rotate Left' },
+  { value: 'RotateRightIcon', label: 'Rotate Right' },
+  { value: 'VisibilityIcon', label: 'View' },
+  { value: 'ContentCutIcon', label: 'Cut' },
+  { value: 'ContentCopyIcon', label: 'Copy' },
+  { value: 'WorkIcon', label: 'Work' },
+  { value: 'BuildIcon', label: 'Build' },
+  { value: 'AutoAwesomeIcon', label: 'Magic' },
+  { value: 'SmartToyIcon', label: 'Robot' },
+  { value: 'CheckIcon', label: 'Check' },
+  { value: 'SecurityIcon', label: 'Security' },
+  { value: 'StarIcon', label: 'Star' }
+];
+
+export type IconKey = keyof typeof iconMap;

frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx

@@ -0,0 +1,179 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core";
+import { BookletImpositionParameters } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
+
+interface BookletImpositionSettingsProps {
+  parameters: BookletImpositionParameters;
+  onParameterChange: (key: keyof BookletImpositionParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = false }: BookletImpositionSettingsProps) => {
+  const { t } = useTranslation();
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  return (
+    <Stack gap="md">
+      <Divider ml='-md'></Divider>
+
+
+      {/* Double Sided */}
+      <Stack gap="sm">
+        <label
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+          title={t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}
+        >
+          <input
+            type="checkbox"
+            checked={parameters.doubleSided}
+            onChange={(e) => {
+              const isDoubleSided = e.target.checked;
+              onParameterChange('doubleSided', isDoubleSided);
+              // Reset to BOTH when turning double-sided back on
+              if (isDoubleSided) {
+                onParameterChange('duplexPass', 'BOTH');
+              } else {
+                // Default to FIRST pass when going to manual duplex
+                onParameterChange('duplexPass', 'FIRST');
+              }
+            }}
+            disabled={disabled}
+          />
+          <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
+        </label>
+
+        {/* Manual Duplex Pass Selection - only show when double-sided is OFF */}
+        {!parameters.doubleSided && (
+          <Stack gap="xs" ml="lg">
+            <Text size="sm" fw={500} c="orange">
+              {t('bookletImposition.manualDuplex.title', 'Manual Duplex Mode')}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t('bookletImposition.manualDuplex.instructions', 'For printers without automatic duplex. You\'ll need to run this twice:')}
+            </Text>
+
+            <ButtonSelector
+              label={t('bookletImposition.duplexPass.label', 'Print Pass')}
+              value={parameters.duplexPass}
+              onChange={(value) => onParameterChange('duplexPass', value)}
+              options={[
+                { value: 'FIRST', label: t('bookletImposition.duplexPass.first', '1st Pass') },
+                { value: 'SECOND', label: t('bookletImposition.duplexPass.second', '2nd Pass') }
+              ]}
+              disabled={disabled}
+            />
+
+            <Text size="xs" c="blue" fs="italic">
+              {parameters.duplexPass === 'FIRST'
+                ? t('bookletImposition.duplexPass.firstInstructions', 'Prints front sides → stack face-down → run again with 2nd Pass')
+                : t('bookletImposition.duplexPass.secondInstructions', 'Load printed stack face-down → prints back sides')
+              }
+            </Text>
+          </Stack>
+        )}
+      </Stack>
+
+      <Divider />
+
+      {/* Advanced Options */}
+      <Stack gap="sm">
+        <Button
+          variant="subtle"
+          onClick={() => setAdvancedOpen(!advancedOpen)}
+          disabled={disabled}
+        >
+          {t('bookletImposition.advanced.toggle', 'Advanced Options')} {advancedOpen ? '▲' : '▼'}
+        </Button>
+
+        <Collapse in={advancedOpen}>
+          <Stack gap="md" mt="md">
+            {/* Right-to-Left Binding */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}
+            >
+              <input
+                type="checkbox"
+                checked={parameters.spineLocation === 'RIGHT'}
+                onChange={(e) => onParameterChange('spineLocation', e.target.checked ? 'RIGHT' : 'LEFT')}
+                disabled={disabled}
+              />
+              <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
+            </label>
+
+            {/* Add Border Option */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}
+            >
+              <input
+                type="checkbox"
+                checked={parameters.addBorder}
+                onChange={(e) => onParameterChange('addBorder', e.target.checked)}
+                disabled={disabled}
+              />
+              <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
+            </label>
+
+            {/* Gutter Margin */}
+            <Stack gap="xs">
+              <label
+                style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+                title={t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}
+              >
+                <input
+                  type="checkbox"
+                  checked={parameters.addGutter}
+                  onChange={(e) => onParameterChange('addGutter', e.target.checked)}
+                  disabled={disabled}
+                />
+                <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
+              </label>
+
+              {parameters.addGutter && (
+                <NumberInput
+                  label={t('bookletImposition.gutterSize.label', 'Gutter size (points)')}
+                  value={parameters.gutterSize}
+                  onChange={(value) => onParameterChange('gutterSize', value || 12)}
+                  min={6}
+                  max={72}
+                  step={6}
+                  disabled={disabled}
+                  size="sm"
+                />
+              )}
+            </Stack>
+
+            {/* Flip on Short Edge */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={!parameters.doubleSided
+                ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
+                : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+              }
+            >
+              <input
+                type="checkbox"
+                checked={parameters.flipOnShortEdge}
+                onChange={(e) => onParameterChange('flipOnShortEdge', e.target.checked)}
+                disabled={disabled || !parameters.doubleSided}
+              />
+              <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
+                {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
+              </Text>
+            </label>
+
+            {/* Paper Size Note */}
+            <Text size="xs" c="dimmed" fs="italic">
+              {t('bookletImposition.paperSizeNote', 'Paper size is automatically derived from your first page.')}
+            </Text>
+          </Stack>
+        </Collapse>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default BookletImpositionSettings;

frontend/src/core/components/tools/certSign/CertSignAutomationSettings.tsx

@@ -0,0 +1,60 @@
+/**
+ * CertSignAutomationSettings - Used for automation only
+ *
+ * This component combines all certificate signing settings into a single step interface
+ * for use in the automation system. It includes sign mode, certificate format, certificate files,
+ * and signature appearance settings in one unified component.
+ */
+
+import { Stack } from "@mantine/core";
+import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
+import CertificateTypeSettings from "@app/components/tools/certSign/CertificateTypeSettings";
+import CertificateFormatSettings from "@app/components/tools/certSign/CertificateFormatSettings";
+import CertificateFilesSettings from "@app/components/tools/certSign/CertificateFilesSettings";
+import SignatureAppearanceSettings from "@app/components/tools/certSign/SignatureAppearanceSettings";
+
+interface CertSignAutomationSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: <K extends keyof CertSignParameters>(key: K, value: CertSignParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const CertSignAutomationSettings = ({ parameters, onParameterChange, disabled = false }: CertSignAutomationSettingsProps) => {
+  return (
+    <Stack gap="lg">
+      {/* Sign Mode Selection (Manual vs Auto) */}
+      <CertificateTypeSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+
+      {/* Certificate Format - only show for Manual mode */}
+      {parameters.signMode === 'MANUAL' && (
+        <CertificateFormatSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      )}
+
+      {/* Certificate Files - only show for Manual mode */}
+      {parameters.signMode === 'MANUAL' && (
+        <CertificateFilesSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      )}
+
+      {/* Signature Appearance Settings */}
+      <SignatureAppearanceSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default CertSignAutomationSettings;

frontend/src/core/components/tools/certSign/CertificateFilesSettings.tsx

@@ -0,0 +1,95 @@
+import { Stack, Text, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
+import FileUploadButton from "@app/components/shared/FileUploadButton";
+
+interface CertificateFilesSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: (key: keyof CertSignParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = false }: CertificateFilesSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Certificate Files based on type */}
+      {parameters.certType === 'PEM' && (
+        <Stack gap="sm">
+          <FileUploadButton
+            file={parameters.privateKeyFile}
+            onChange={(file) => onParameterChange('privateKeyFile', file || undefined)}
+            accept=".pem,.der,.key"
+            disabled={disabled}
+            placeholder={t('certSign.choosePrivateKey', 'Choose Private Key File')}
+          />
+          {parameters.privateKeyFile && (
+            <FileUploadButton
+              file={parameters.certFile}
+              onChange={(file) => onParameterChange('certFile', file || undefined)}
+              accept=".pem,.der,.crt,.cer"
+              disabled={disabled}
+              placeholder={t('certSign.chooseCertificate', 'Choose Certificate File')}
+            />
+          )}
+        </Stack>
+      )}
+
+      {parameters.certType === 'PKCS12' && (
+        <FileUploadButton
+          file={parameters.p12File}
+          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          accept=".p12"
+          disabled={disabled}
+          placeholder={t('certSign.chooseP12File', 'Choose PKCS12 File')}
+        />
+      )}
+
+      {parameters.certType === 'PFX' && (
+        <FileUploadButton
+          file={parameters.p12File}
+          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          accept=".pfx"
+          disabled={disabled}
+          placeholder={t('certSign.choosePfxFile', 'Choose PFX File')}
+        />
+      )}
+
+      {parameters.certType === 'JKS' && (
+        <FileUploadButton
+          file={parameters.jksFile}
+          onChange={(file) => onParameterChange('jksFile', file || undefined)}
+          accept=".jks,.keystore"
+          disabled={disabled}
+          placeholder={t('certSign.chooseJksFile', 'Choose JKS File')}
+        />
+      )}
+
+      {parameters.signMode === 'AUTO' && (
+        <Text c="dimmed" size="sm">
+          {t('certSign.serverCertMessage', 'Using server certificate - no files or password required')}
+        </Text>
+      )}
+
+      {/* Password - only show when files are uploaded */}
+      {parameters.certType && (
+        (parameters.certType === 'PEM' && parameters.privateKeyFile && parameters.certFile) ||
+        (parameters.certType === 'PKCS12' && parameters.p12File) ||
+        (parameters.certType === 'PFX' && parameters.p12File) ||
+        (parameters.certType === 'JKS' && parameters.jksFile)
+      ) && (
+        <TextInput
+          label={t('certSign.password', 'Certificate Password')}
+          placeholder={t('certSign.passwordOptional', 'Leave empty if no password')}
+          type="password"
+          value={parameters.password}
+          onChange={(event) => onParameterChange('password', event.currentTarget.value)}
+          disabled={disabled}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default CertificateFilesSettings;

frontend/src/core/components/tools/certSign/CertificateFormatSettings.tsx

@@ -0,0 +1,70 @@
+import { Stack, Button } from "@mantine/core";
+import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
+
+interface CertificateFormatSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: (key: keyof CertSignParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const CertificateFormatSettings = ({ parameters, onParameterChange, disabled = false }: CertificateFormatSettingsProps) => {
+
+  return (
+    <Stack gap="md">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        {/* First row - PKCS#12 and PFX */}
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <Button
+            variant={parameters.certType === 'PKCS12' ? 'filled' : 'outline'}
+            color={parameters.certType === 'PKCS12' ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('certType', 'PKCS12')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              PKCS12
+            </div>
+          </Button>
+          <Button
+            variant={parameters.certType === 'PFX' ? 'filled' : 'outline'}
+            color={parameters.certType === 'PFX' ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('certType', 'PFX')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              PFX
+            </div>
+          </Button>
+        </div>
+        {/* Second row - PEM and JKS */}
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <Button
+            variant={parameters.certType === 'PEM' ? 'filled' : 'outline'}
+            color={parameters.certType === 'PEM' ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('certType', 'PEM')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              PEM
+            </div>
+          </Button>
+          <Button
+            variant={parameters.certType === 'JKS' ? 'filled' : 'outline'}
+            color={parameters.certType === 'JKS' ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('certType', 'JKS')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              JKS
+            </div>
+          </Button>
+        </div>
+      </div>
+    </Stack>
+  );
+};
+
+export default CertificateFormatSettings;

frontend/src/core/components/tools/certSign/CertificateTypeSettings.tsx

@@ -0,0 +1,62 @@
+import { Stack, Button } from "@mantine/core";
+import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+
+interface CertificateTypeSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: (key: keyof CertSignParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const CertificateTypeSettings = ({ parameters, onParameterChange, disabled = false }: CertificateTypeSettingsProps) => {
+  const { config } = useAppConfig();
+  const isServerCertificateEnabled = config?.serverCertificateEnabled ?? false;
+
+  // Reset to MANUAL if AUTO is selected but feature is disabled
+  if (parameters.signMode === 'AUTO' && !isServerCertificateEnabled) {
+    onParameterChange('signMode', 'MANUAL');
+  }
+
+  return (
+    <Stack gap="md">
+      <div style={{ display: 'flex', gap: '4px' }}>
+        <Button
+          variant={parameters.signMode === 'MANUAL' ? 'filled' : 'outline'}
+          color={parameters.signMode === 'MANUAL' ? 'blue' : 'var(--text-muted)'}
+          onClick={() => {
+            onParameterChange('signMode', 'MANUAL');
+            // Reset cert type when switching to manual
+            if (parameters.signMode === 'AUTO') {
+              onParameterChange('certType', '');
+            }
+          }}
+          disabled={disabled}
+          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+        >
+          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+            Manual
+          </div>
+        </Button>
+        {isServerCertificateEnabled && (
+          <Button
+            variant={parameters.signMode === 'AUTO' ? 'filled' : 'outline'}
+            color={parameters.signMode === 'AUTO' ? 'green' : 'var(--text-muted)'}
+            onClick={() => {
+              onParameterChange('signMode', 'AUTO');
+              // Clear cert type and files when switching to auto
+              onParameterChange('certType', '');
+            }}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              Auto (server)
+            </div>
+          </Button>
+        )}
+      </div>
+    </Stack>
+  );
+};
+
+export default CertificateTypeSettings;

frontend/src/core/components/tools/certSign/SignatureAppearanceSettings.tsx

@@ -0,0 +1,110 @@
+import { Stack, Text, Button, TextInput, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
+
+interface SignatureAppearanceSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: (key: keyof CertSignParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const SignatureAppearanceSettings = ({ parameters, onParameterChange, disabled = false }: SignatureAppearanceSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Signature Visibility */}
+      <Stack gap="sm">
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <Button
+            variant={!parameters.showSignature ? 'filled' : 'outline'}
+            color={!parameters.showSignature ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('showSignature', false)}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              {t('certSign.appearance.invisible', 'Invisible')}
+            </div>
+          </Button>
+          <Button
+            variant={parameters.showSignature ? 'filled' : 'outline'}
+            color={parameters.showSignature ? 'blue' : 'var(--text-muted)'}
+            onClick={() => onParameterChange('showSignature', true)}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              {t('certSign.appearance.visible', 'Visible')}
+            </div>
+          </Button>
+        </div>
+      </Stack>
+
+      {/* Visible Signature Options */}
+      {parameters.showSignature && (
+        <Stack gap="sm">
+          <Text size="sm" fw={500}>
+            {t('certSign.appearance.options.title', 'Signature Details')}
+          </Text>
+          <TextInput
+            label={t('certSign.reason', 'Reason')}
+            value={parameters.reason}
+            onChange={(event) => onParameterChange('reason', event.currentTarget.value)}
+            disabled={disabled}
+          />
+          <TextInput
+            label={t('certSign.location', 'Location')}
+            value={parameters.location}
+            onChange={(event) => onParameterChange('location', event.currentTarget.value)}
+            disabled={disabled}
+          />
+          <TextInput
+            label={t('certSign.name', 'Name')}
+            value={parameters.name}
+            onChange={(event) => onParameterChange('name', event.currentTarget.value)}
+            disabled={disabled}
+          />
+          <NumberInput
+            label={t('certSign.pageNumber', 'Page Number')}
+            value={parameters.pageNumber}
+            onChange={(value) => onParameterChange('pageNumber', value || 1)}
+            min={1}
+            disabled={disabled}
+          />
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>
+              {t('certSign.logoTitle', 'Logo')}
+            </Text>
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <Button
+                variant={!parameters.showLogo ? 'filled' : 'outline'}
+                color={!parameters.showLogo ? 'blue' : 'var(--text-muted)'}
+                onClick={() => onParameterChange('showLogo', false)}
+                disabled={disabled}
+                style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+              >
+                <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+                  {t('certSign.noLogo', 'No Logo')}
+                </div>
+              </Button>
+              <Button
+                variant={parameters.showLogo ? 'filled' : 'outline'}
+                color={parameters.showLogo ? 'blue' : 'var(--text-muted)'}
+                onClick={() => onParameterChange('showLogo', true)}
+                disabled={disabled}
+                style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+              >
+                <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+                  {t('certSign.showLogo', 'Show Logo')}
+                </div>
+              </Button>
+            </div>
+          </Stack>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default SignatureAppearanceSettings;

frontend/src/core/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx

@@ -0,0 +1,99 @@
+import { Stack, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters, createCustomMetadataFunctions } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+import { useMetadataExtraction } from "@app/hooks/tools/changeMetadata/useMetadataExtraction";
+import DeleteAllStep from "@app/components/tools/changeMetadata/steps/DeleteAllStep";
+import StandardMetadataStep from "@app/components/tools/changeMetadata/steps/StandardMetadataStep";
+import DocumentDatesStep from "@app/components/tools/changeMetadata/steps/DocumentDatesStep";
+import AdvancedOptionsStep from "@app/components/tools/changeMetadata/steps/AdvancedOptionsStep";
+
+interface ChangeMetadataSingleStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ChangeMetadataSingleStep = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ChangeMetadataSingleStepProps) => {
+  const { t } = useTranslation();
+
+  // Get custom metadata functions using the utility
+  const { addCustomMetadata, removeCustomMetadata, updateCustomMetadata } = createCustomMetadataFunctions(
+    parameters,
+    onParameterChange
+  );
+
+  // Extract metadata from uploaded files
+  const { isExtractingMetadata } = useMetadataExtraction({
+    updateParameter: onParameterChange,
+  });
+
+  const isDeleteAllEnabled = parameters.deleteAll;
+  const fieldsDisabled = disabled || isDeleteAllEnabled || isExtractingMetadata;
+
+  return (
+    <Stack gap="md">
+      {/* Delete All */}
+      <Stack gap="md">
+        <Text size="sm" fw={500}>
+          {t('changeMetadata.deleteAll.label', 'Delete All Metadata')}
+        </Text>
+        <DeleteAllStep
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Standard Metadata Fields */}
+      <Stack gap="md">
+        <Text size="sm" fw={500}>
+          {t('changeMetadata.standardFields.title', 'Standard Metadata')}
+        </Text>
+        <StandardMetadataStep
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={fieldsDisabled}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Document Dates */}
+      <Stack gap="md">
+        <Text size="sm" fw={500}>
+          {t('changeMetadata.dates.title', 'Document Dates')}
+        </Text>
+        <DocumentDatesStep
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={fieldsDisabled}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Advanced Options */}
+      <Stack gap="md">
+        <Text size="sm" fw={500}>
+          {t('changeMetadata.advanced.title', 'Advanced Options')}
+        </Text>
+        <AdvancedOptionsStep
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={fieldsDisabled}
+          addCustomMetadata={addCustomMetadata}
+          removeCustomMetadata={removeCustomMetadata}
+          updateCustomMetadata={updateCustomMetadata}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ChangeMetadataSingleStep;

frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx

@@ -0,0 +1,60 @@
+import { Stack, Select, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+import { TrappedStatus } from "@app/types/metadata";
+import CustomMetadataStep from "@app/components/tools/changeMetadata/steps/CustomMetadataStep";
+
+interface AdvancedOptionsStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+  addCustomMetadata: (key?: string, value?: string) => void;
+  removeCustomMetadata: (id: string) => void;
+  updateCustomMetadata: (id: string, key: string, value: string) => void;
+}
+
+const AdvancedOptionsStep = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  addCustomMetadata,
+  removeCustomMetadata,
+  updateCustomMetadata
+}: AdvancedOptionsStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Trapped Status */}
+      <Select
+        label={t('changeMetadata.trapped.label', 'Trapped Status')}
+        value={parameters.trapped}
+        onChange={(value) => {
+          if (value) {
+            onParameterChange('trapped', value as TrappedStatus);
+          }
+        }}
+        disabled={disabled || parameters.deleteAll}
+        data={[
+          { value: TrappedStatus.UNKNOWN, label: t('changeMetadata.trapped.unknown', 'Unknown') },
+          { value: TrappedStatus.TRUE, label: t('changeMetadata.trapped.true', 'True') },
+          { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
+        ]}
+      />
+
+      <Divider />
+
+      {/* Custom Metadata */}
+      <CustomMetadataStep
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+        addCustomMetadata={addCustomMetadata}
+        removeCustomMetadata={removeCustomMetadata}
+        updateCustomMetadata={updateCustomMetadata}
+      />
+    </Stack>
+  );
+};
+
+export default AdvancedOptionsStep;

frontend/src/core/components/tools/changeMetadata/steps/CustomMetadataStep.tsx

@@ -0,0 +1,74 @@
+import { Stack, TextInput, Button, Group, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+
+interface CustomMetadataStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+  addCustomMetadata: (key?: string, value?: string) => void;
+  removeCustomMetadata: (id: string) => void;
+  updateCustomMetadata: (id: string, key: string, value: string) => void;
+}
+
+const CustomMetadataStep = ({
+  parameters,
+  disabled = false,
+  addCustomMetadata,
+  removeCustomMetadata,
+  updateCustomMetadata
+}: CustomMetadataStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" align="center">
+        <Text size="sm" fw={500}>
+          {t('changeMetadata.customFields.title', 'Custom Metadata')}
+        </Text>
+        <Button
+          size="xs"
+          variant="light"
+          onClick={() => addCustomMetadata()}
+          disabled={disabled}
+        >
+          {t('changeMetadata.customFields.add', 'Add Field')}
+        </Button>
+      </Group>
+
+      {parameters.customMetadata.length > 0 && (
+        <Text size="xs" c="dimmed">
+          {t('changeMetadata.customFields.description', 'Add custom metadata fields to the document')}
+        </Text>
+      )}
+
+      {parameters.customMetadata.map((entry) => (
+        <Stack key={entry.id} gap="xs">
+          <TextInput
+            placeholder={t('changeMetadata.customFields.keyPlaceholder', 'Custom key')}
+            value={entry.key}
+            onChange={(e) => updateCustomMetadata(entry.id, e.target.value, entry.value)}
+            disabled={disabled}
+          />
+          <TextInput
+            placeholder={t('changeMetadata.customFields.valuePlaceholder', 'Custom value')}
+            value={entry.value}
+            onChange={(e) => updateCustomMetadata(entry.id, entry.key, e.target.value)}
+            disabled={disabled}
+          />
+          <Button
+            size="xs"
+            variant="light"
+            color="red"
+            onClick={() => removeCustomMetadata(entry.id)}
+            disabled={disabled}
+          >
+            {t('changeMetadata.customFields.remove', 'Remove')}
+          </Button>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+export default CustomMetadataStep;

frontend/src/core/components/tools/changeMetadata/steps/DeleteAllStep.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+
+interface DeleteAllStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const DeleteAllStep = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: DeleteAllStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Checkbox
+      label={t('changeMetadata.deleteAll.checkbox', 'Delete all metadata')}
+      checked={parameters.deleteAll}
+      onChange={(e) => onParameterChange('deleteAll', e.target.checked)}
+      disabled={disabled}
+    />
+  );
+};
+
+export default DeleteAllStep;

frontend/src/core/components/tools/changeMetadata/steps/DocumentDatesStep.tsx

@@ -0,0 +1,42 @@
+import { Stack } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+
+interface DocumentDatesStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const DocumentDatesStep = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: DocumentDatesStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <DateTimePicker
+        label={t('changeMetadata.creationDate.label', 'Creation Date')}
+        placeholder={t('changeMetadata.creationDate.placeholder', 'Creation date')}
+        value={parameters.creationDate}
+        onChange={(date) => onParameterChange('creationDate', date ? new Date(date) : null)}
+        disabled={disabled}
+        clearable
+      />
+
+      <DateTimePicker
+        label={t('changeMetadata.modificationDate.label', 'Modification Date')}
+        placeholder={t('changeMetadata.modificationDate.placeholder', 'Modification date')}
+        value={parameters.modificationDate}
+        onChange={(date) => onParameterChange('modificationDate', date ? new Date(date) : null)}
+        disabled={disabled}
+        clearable
+      />
+    </Stack>
+  );
+};
+
+export default DocumentDatesStep;

frontend/src/core/components/tools/changeMetadata/steps/StandardMetadataStep.tsx

@@ -0,0 +1,71 @@
+import { Stack, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+
+interface StandardMetadataStepProps {
+  parameters: ChangeMetadataParameters;
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const StandardMetadataStep = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: StandardMetadataStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <TextInput
+        label={t('changeMetadata.title.label', 'Title')}
+        placeholder={t('changeMetadata.title.placeholder', 'Document title')}
+        value={parameters.title}
+        onChange={(e) => onParameterChange('title', e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextInput
+        label={t('changeMetadata.author.label', 'Author')}
+        placeholder={t('changeMetadata.author.placeholder', 'Document author')}
+        value={parameters.author}
+        onChange={(e) => onParameterChange('author', e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextInput
+        label={t('changeMetadata.subject.label', 'Subject')}
+        placeholder={t('changeMetadata.subject.placeholder', 'Document subject')}
+        value={parameters.subject}
+        onChange={(e) => onParameterChange('subject', e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextInput
+        label={t('changeMetadata.keywords.label', 'Keywords')}
+        placeholder={t('changeMetadata.keywords.placeholder', 'Document keywords')}
+        value={parameters.keywords}
+        onChange={(e) => onParameterChange('keywords', e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextInput
+        label={t('changeMetadata.creator.label', 'Creator')}
+        placeholder={t('changeMetadata.creator.placeholder', 'Document creator')}
+        value={parameters.creator}
+        onChange={(e) => onParameterChange('creator', e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextInput
+        label={t('changeMetadata.producer.label', 'Producer')}
+        placeholder={t('changeMetadata.producer.placeholder', 'Document producer')}
+        value={parameters.producer}
+        onChange={(e) => onParameterChange('producer', e.target.value)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default StandardMetadataStep;

frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.test.tsx

@@ -0,0 +1,210 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import ChangePermissionsSettings from '@app/components/tools/changePermissions/ChangePermissionsSettings';
+import { defaultParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import type { ChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+
+// Mock useTranslation with predictable return values
+const mockT = vi.fn((key: string) => `mock-${key}`);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('ChangePermissionsSettings', () => {
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render all permission checkboxes', () => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Should render checkboxes for all permission types
+    const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(permissionKeys.length);
+
+    // Verify specific permission labels are rendered
+    expect(screen.getByText('mock-changePermissions.permissions.preventAssembly.label')).toBeInTheDocument();
+    expect(screen.getByText('mock-changePermissions.permissions.preventPrinting.label')).toBeInTheDocument();
+    expect(screen.getByText('mock-changePermissions.permissions.preventModify.label')).toBeInTheDocument();
+    expect(screen.getByText('mock-changePermissions.permissions.preventExtractContent.label')).toBeInTheDocument();
+  });
+
+  test('should render all permission types with correct labels', () => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
+
+    permissionKeys.forEach(permission => {
+      expect(screen.getByText(`mock-changePermissions.permissions.${permission}.label`)).toBeInTheDocument();
+    });
+  });
+
+  test('should show checkboxes as unchecked by default', () => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    checkboxes.forEach(checkbox => {
+      expect(checkbox.checked).toBe(false);
+    });
+  });
+
+  test('should show checkboxes as checked when parameters are true', () => {
+    const checkedParameters: ChangePermissionsParameters = {
+      ...defaultParameters,
+      preventAssembly: true,
+      preventPrinting: true,
+      preventModify: true
+    };
+
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={checkedParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Find specific checkboxes by their labels and verify they are checked
+    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label') as HTMLInputElement;
+    const printingCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventPrinting.label') as HTMLInputElement;
+    const modifyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventModify.label') as HTMLInputElement;
+    const formCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventFillInForm.label') as HTMLInputElement;
+
+    expect(assemblyCheckbox.checked).toBe(true);
+    expect(printingCheckbox.checked).toBe(true);
+    expect(modifyCheckbox.checked).toBe(true);
+    expect(formCheckbox.checked).toBe(false);  // Ensure other checkboxes are unaffected
+  });
+
+  test.each([
+    { initialValue: false, expectedValue: true, description: 'checking an unchecked box' },
+    { initialValue: true, expectedValue: false, description: 'unchecking a checked box' }
+  ])('should call onParameterChange with $expectedValue when $description', ({ initialValue, expectedValue }) => {
+    const testParameters: ChangePermissionsParameters = {
+      ...defaultParameters,
+      preventAssembly: initialValue
+    };
+
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={testParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label');
+    fireEvent.click(assemblyCheckbox);
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('preventAssembly', expectedValue);
+  });
+
+  test('should handle multiple checkbox interactions', () => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Click multiple checkboxes
+    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label');
+    const printingCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventPrinting.label');
+
+    fireEvent.click(assemblyCheckbox);
+    fireEvent.click(printingCheckbox);
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('preventAssembly', true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith('preventPrinting', true);
+    expect(mockOnParameterChange).toHaveBeenCalledTimes(2);
+  });
+
+  test.each([
+    { disabled: true, expectedState: true },
+    { disabled: false, expectedState: false }
+  ])('should set checkboxes disabled=$disabled when disabled prop is $disabled', ({ disabled, expectedState }) => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+          disabled={disabled}
+        />
+      </TestWrapper>
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    checkboxes.forEach(checkbox => {
+      expect(checkbox.disabled).toBe(expectedState);
+    });
+  });
+
+  test('should call translation function with correct keys', () => {
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
+    permissionKeys.forEach(permission => {
+      expect(mockT).toHaveBeenCalledWith(`changePermissions.permissions.${permission}.label`, permission);
+    });
+  });
+
+  test.each(Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>)('should handle %s permission type individually', (permission) => {
+    const testParameters: ChangePermissionsParameters = {
+      ...defaultParameters,
+      [permission]: true
+    };
+
+    render(
+      <TestWrapper>
+        <ChangePermissionsSettings
+          parameters={testParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByLabelText(`mock-changePermissions.permissions.${permission}.label`) as HTMLInputElement;
+    expect(checkbox.checked).toBe(true);
+  });
+});

frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.tsx

@@ -0,0 +1,31 @@
+import { Stack, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ChangePermissionsParameters } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
+
+interface ChangePermissionsSettingsProps {
+  parameters: ChangePermissionsParameters;
+  onParameterChange: <K extends keyof ChangePermissionsParameters>(key: K, value: ChangePermissionsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ChangePermissionsSettings = ({ parameters, onParameterChange, disabled = false }: ChangePermissionsSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm">
+      <Stack gap="xs">
+        {(Object.keys(parameters) as Array<keyof ChangePermissionsParameters>).map((key) => (
+          <Checkbox
+            key={key}
+            label={t(`changePermissions.permissions.${key}.label`, key)}
+            checked={parameters[key]}
+            onChange={(e) => onParameterChange(key, e.target.checked)}
+            disabled={disabled}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ChangePermissionsSettings;

frontend/src/core/components/tools/compress/CompressSettings.tsx

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
+
+interface CompressSettingsProps {
+  parameters: CompressParameters;
+  onParameterChange: <K extends keyof CompressParameters>(key: K, value: CompressParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const CompressSettings = ({ parameters, onParameterChange, disabled = false }: CompressSettingsProps) => {
+  const { t } = useTranslation();
+  const [isSliding, setIsSliding] = useState(false);
+
+  return (
+    <Stack gap="md">
+
+      <Divider ml='-md'></Divider>
+      {/* Compression Method */}
+      <ButtonSelector
+        label={t('compress.method.title', 'Compression Method')}
+        value={parameters.compressionMethod}
+        onChange={(value) => onParameterChange('compressionMethod', value)}
+        options={[
+          { value: 'quality', label: t('compress.method.quality', 'Quality') },
+          { value: 'filesize', label: t('compress.method.filesize', 'File Size') },
+        ]}
+        disabled={disabled}
+      />
+
+      {/* Quality Adjustment */}
+      {parameters.compressionMethod === 'quality' && (
+        <Stack gap="sm">
+          <Divider />
+          <Text size="sm" fw={500}>Compression Level</Text>
+          <div style={{ position: 'relative' }}>
+            <input
+              type="range"
+              min="1"
+              max="9"
+              step="1"
+              value={parameters.compressionLevel}
+              onChange={(e) => onParameterChange('compressionLevel', parseInt(e.target.value))}
+              onMouseDown={() => setIsSliding(true)}
+              onMouseUp={() => setIsSliding(false)}
+              onTouchStart={() => setIsSliding(true)}
+              onTouchEnd={() => setIsSliding(false)}
+              disabled={disabled}
+              style={{
+                width: '100%',
+                height: '6px',
+                borderRadius: '3px',
+                background: `linear-gradient(to right, #228be6 0%, #228be6 ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef 100%)`,
+                outline: 'none',
+                WebkitAppearance: 'none'
+              }}
+            />
+            {isSliding && (
+              <div style={{
+                position: 'absolute',
+                top: '-25px',
+                left: `${(parameters.compressionLevel - 1) / 8 * 100}%`,
+                transform: 'translateX(-50%)',
+                background: '#f8f9fa',
+                border: '1px solid #dee2e6',
+                borderRadius: '4px',
+                padding: '2px 6px',
+                fontSize: '12px',
+                color: '#228be6',
+                whiteSpace: 'nowrap'
+              }}>
+                {parameters.compressionLevel}
+              </div>
+            )}
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#6c757d' }}>
+            <span>Min 1</span>
+            <span>Max 9</span>
+          </div>
+          <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
+            {parameters.compressionLevel <= 3 && "1-3 PDF compression"}
+            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && "4-6 lite image compression"}
+            {parameters.compressionLevel >= 7 && "7-9 intense image compression Will dramatically reduce image quality"}
+          </Text>
+        </Stack>
+      )}
+
+      <Divider/>
+
+      {/* File Size Input */}
+      {parameters.compressionMethod === 'filesize' && (
+        <Stack gap="sm">
+          <Text size="sm" fw={500}>Desired File Size</Text>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
+            <NumberInput
+              placeholder="Enter size"
+              value={parameters.fileSizeValue}
+              onChange={(value) => onParameterChange('fileSizeValue', value?.toString() || '')}
+              min={0}
+              disabled={disabled}
+              style={{ flex: 1 }}
+            />
+            <Select
+              value={parameters.fileSizeUnit}
+              onChange={(value) => {
+                // Prevent deselection - if value is null/undefined, keep the current value
+                if (value) {
+                  onParameterChange('fileSizeUnit', value as 'KB' | 'MB');
+                }
+              }}
+              disabled={disabled}
+              data={[
+                { value: 'KB', label: 'KB' },
+                { value: 'MB', label: 'MB' }
+              ]}
+              style={{ width: '80px' }}
+            />
+          </div>
+        </Stack>
+      )}
+
+      {/* Compression Options */}
+      <Stack gap="sm">
+        <label
+          style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          title="Converts all images in the PDF to grayscale, which can significantly reduce file size while maintaining readability"
+        >
+          <input
+            type="checkbox"
+            checked={parameters.grayscale}
+            onChange={(e) => onParameterChange('grayscale', e.target.checked)}
+            disabled={disabled}
+          />
+          <Text size="sm">{t("compress.grayscale.label", "Apply Grayscale for compression")}</Text>
+        </label>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default CompressSettings;

frontend/src/core/components/tools/convert/ConvertFromEmailSettings.tsx

@@ -0,0 +1,76 @@
+import { Stack, Text, NumberInput, Checkbox } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+
+interface ConvertFromEmailSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ConvertFromEmailSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertFromEmailSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm" data-testid="email-settings">
+      <Text size="sm" fw={500}>{t("convert.emailOptions", "Email to PDF Options")}:</Text>
+
+      <Checkbox
+        label={t("convert.includeAttachments", "Include email attachments")}
+        checked={parameters.emailOptions.includeAttachments}
+        onChange={(event) => onParameterChange('emailOptions', {
+          ...parameters.emailOptions,
+          includeAttachments: event.currentTarget.checked
+        })}
+        disabled={disabled}
+        data-testid="include-attachments-checkbox"
+      />
+
+      {parameters.emailOptions.includeAttachments && (
+        <Stack gap="xs">
+          <Text size="xs" fw={500}>{t("convert.maxAttachmentSize", "Maximum attachment size (MB)")}:</Text>
+          <NumberInput
+            value={parameters.emailOptions.maxAttachmentSizeMB}
+            onChange={(value) => onParameterChange('emailOptions', {
+              ...parameters.emailOptions,
+              maxAttachmentSizeMB: Number(value) || 10
+            })}
+            min={1}
+            max={100}
+            step={1}
+            disabled={disabled}
+            data-testid="max-attachment-size-input"
+          />
+        </Stack>
+      )}
+
+      <Checkbox
+        label={t("convert.includeAllRecipients", "Include CC and BCC recipients in header")}
+        checked={parameters.emailOptions.includeAllRecipients}
+        onChange={(event) => onParameterChange('emailOptions', {
+          ...parameters.emailOptions,
+          includeAllRecipients: event.currentTarget.checked
+        })}
+        disabled={disabled}
+        data-testid="include-all-recipients-checkbox"
+      />
+
+      <Checkbox
+        label={t("convert.downloadHtml", "Download HTML intermediate file instead of PDF")}
+        checked={parameters.emailOptions.downloadHtml}
+        onChange={(event) => onParameterChange('emailOptions', {
+          ...parameters.emailOptions,
+          downloadHtml: event.currentTarget.checked
+        })}
+        disabled={disabled}
+        data-testid="download-html-checkbox"
+      />
+    </Stack>
+  );
+};
+
+export default ConvertFromEmailSettings;

frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx

@@ -0,0 +1,81 @@
+import { Stack, Text, Select, Switch } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { COLOR_TYPES, FIT_OPTIONS } from "@app/constants/convertConstants";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+
+interface ConvertFromImageSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ConvertFromImageSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertFromImageSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm" data-testid="pdf-options-section">
+      <Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
+      <Select
+        data-testid="color-type-select"
+        label={t("convert.colorType", "Color Type")}
+        value={parameters.imageOptions.colorType}
+        onChange={(val) => val && onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
+        })}
+        data={[
+          { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
+          { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
+          { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
+        ]}
+        disabled={disabled}
+      />
+
+      <Select
+        data-testid="fit-option-select"
+        label={t("convert.fitOption", "Fit Option")}
+        value={parameters.imageOptions.fitOption}
+        onChange={(val) => val && onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          fitOption: val as typeof FIT_OPTIONS[keyof typeof FIT_OPTIONS]
+        })}
+        data={[
+          { value: FIT_OPTIONS.MAINTAIN_ASPECT, label: t("convert.maintainAspectRatio", "Maintain Aspect Ratio") },
+          { value: FIT_OPTIONS.FIT_PAGE, label: t("convert.fitDocumentToPage", "Fit Document to Page") },
+          { value: FIT_OPTIONS.FILL_PAGE, label: t("convert.fillPage", "Fill Page") },
+        ]}
+        disabled={disabled}
+      />
+
+      <Switch
+        data-testid="auto-rotate-switch"
+        label={t("convert.autoRotate", "Auto Rotate")}
+        description={t("convert.autoRotateDescription", "Automatically rotate images to better fit the PDF page")}
+        checked={parameters.imageOptions.autoRotate}
+        onChange={(event) => onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          autoRotate: event.currentTarget.checked
+        })}
+        disabled={disabled}
+      />
+
+      <Switch
+        data-testid="combine-images-switch"
+        label={t("convert.combineImages", "Combine Images")}
+        description={t("convert.combineImagesDescription", "Combine all images into one PDF, or create separate PDFs for each image")}
+        checked={parameters.imageOptions.combineImages}
+        onChange={(event) => onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          combineImages: event.currentTarget.checked
+        })}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ConvertFromImageSettings;

frontend/src/core/components/tools/convert/ConvertFromWebSettings.tsx

@@ -0,0 +1,53 @@
+import { Stack, Text, NumberInput, Slider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+
+interface ConvertFromWebSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ConvertFromWebSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertFromWebSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm" data-testid="web-settings">
+      <Text size="sm" fw={500}>{t("convert.webOptions", "Web to PDF Options")}:</Text>
+
+      <Stack gap="xs">
+        <Text size="xs" fw={500}>{t("convert.zoomLevel", "Zoom Level")}:</Text>
+        <NumberInput
+          value={parameters.htmlOptions.zoomLevel}
+          onChange={(value) => onParameterChange('htmlOptions', {
+            ...parameters.htmlOptions,
+            zoomLevel: Number(value) || 1.0
+          })}
+          min={0.1}
+          max={3.0}
+          step={0.1}
+          disabled={disabled}
+          data-testid="zoom-level-input"
+        />
+        <Slider
+          value={parameters.htmlOptions.zoomLevel}
+          onChange={(value) => onParameterChange('htmlOptions', {
+            ...parameters.htmlOptions,
+            zoomLevel: value
+          })}
+          min={0.1}
+          max={3.0}
+          step={0.1}
+          disabled={disabled}
+          data-testid="zoom-level-slider"
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ConvertFromWebSettings;

frontend/src/core/components/tools/convert/ConvertSettings.tsx

@@ -0,0 +1,313 @@
+import { useMemo } from "react";
+import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useTranslation } from "react-i18next";
+import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
+import { isImageFormat, isWebFormat } from "@app/utils/convertUtils";
+import { getConversionEndpoints } from "@app/data/toolsTaxonomy";
+import { useFileSelection } from "@app/contexts/FileContext";
+import { useFileState } from "@app/contexts/FileContext";
+import { detectFileExtension } from "@app/utils/fileUtils";
+import GroupedFormatDropdown from "@app/components/tools/convert/GroupedFormatDropdown";
+import ConvertToImageSettings from "@app/components/tools/convert/ConvertToImageSettings";
+import ConvertFromImageSettings from "@app/components/tools/convert/ConvertFromImageSettings";
+import ConvertFromWebSettings from "@app/components/tools/convert/ConvertFromWebSettings";
+import ConvertFromEmailSettings from "@app/components/tools/convert/ConvertFromEmailSettings";
+import ConvertToPdfaSettings from "@app/components/tools/convert/ConvertToPdfaSettings";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import {
+  FROM_FORMAT_OPTIONS,
+  EXTENSION_TO_ENDPOINT,
+  COLOR_TYPES,
+  OUTPUT_OPTIONS,
+  FIT_OPTIONS
+} from "@app/constants/convertConstants";
+import { StirlingFile } from "@app/types/fileContext";
+
+interface ConvertSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  getAvailableToExtensions: (fromExtension: string) => Array<{value: string, label: string, group: string}>;
+  selectedFiles: StirlingFile[];
+  disabled?: boolean;
+}
+
+const ConvertSettings = ({
+  parameters,
+  onParameterChange,
+  getAvailableToExtensions,
+  selectedFiles,
+  disabled = false
+}: ConvertSettingsProps) => {
+  const { t } = useTranslation();
+  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
+  const { setSelectedFiles } = useFileSelection();
+  const { state, selectors } = useFileState();
+  const activeFiles = state.files.ids;
+
+  const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
+
+  const { endpointStatus } = useMultipleEndpointsEnabled(allEndpoints);
+
+  const isConversionAvailable = (fromExt: string, toExt: string): boolean => {
+    const endpointKey = EXTENSION_TO_ENDPOINT[fromExt]?.[toExt];
+    if (!endpointKey) return false;
+
+    return endpointStatus[endpointKey] === true;
+  };
+
+  // Enhanced FROM options with endpoint availability
+  const enhancedFromOptions = useMemo(() => {
+    const baseOptions = FROM_FORMAT_OPTIONS.map(option => {
+      // Check if this source format has any available conversions
+      const availableConversions = getAvailableToExtensions(option.value) || [];
+      const hasAvailableConversions = availableConversions.some(targetOption =>
+        isConversionAvailable(option.value, targetOption.value)
+      );
+
+      return {
+        ...option,
+        enabled: hasAvailableConversions
+      };
+    });
+
+    // Add dynamic format option if current selection is a file-<extension> format
+    if (parameters.fromExtension && parameters.fromExtension.startsWith('file-')) {
+      const extension = parameters.fromExtension.replace('file-', '');
+      const dynamicOption = {
+        value: parameters.fromExtension,
+        label: extension.toUpperCase(),
+        group: 'File',
+        enabled: true
+      };
+
+      // Add the dynamic option at the beginning
+      return [dynamicOption, ...baseOptions];
+    }
+
+    return baseOptions;
+  }, [parameters.fromExtension, endpointStatus]);
+
+  // Enhanced TO options with endpoint availability
+  const enhancedToOptions = useMemo(() => {
+    if (!parameters.fromExtension) return [];
+
+    const availableOptions = getAvailableToExtensions(parameters.fromExtension) || [];
+    return availableOptions.map(option => ({
+      ...option,
+      enabled: isConversionAvailable(parameters.fromExtension, option.value)
+    }));
+  }, [parameters.fromExtension, endpointStatus]);
+
+  const resetParametersToDefaults = () => {
+    onParameterChange('imageOptions', {
+      colorType: COLOR_TYPES.COLOR,
+      dpi: 300,
+      singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
+      fitOption: FIT_OPTIONS.MAINTAIN_ASPECT,
+      autoRotate: true,
+      combineImages: true,
+    });
+    onParameterChange('emailOptions', {
+      includeAttachments: true,
+      maxAttachmentSizeMB: 10,
+      downloadHtml: false,
+      includeAllRecipients: false,
+    });
+    onParameterChange('pdfaOptions', {
+      outputFormat: 'pdfa-1',
+    });
+    onParameterChange('isSmartDetection', false);
+    onParameterChange('smartDetectionType', 'none');
+  };
+
+  const setAutoTargetExtension = (fromExtension: string) => {
+    const availableToOptions = getAvailableToExtensions(fromExtension);
+    const autoTarget = availableToOptions.length === 1 ? availableToOptions[0].value : '';
+    onParameterChange('toExtension', autoTarget);
+  };
+
+  const filterFilesByExtension = (extension: string) => {
+    const files = activeFiles.map(fileId => selectors.getFile(fileId)).filter(Boolean) as StirlingFile[];
+    return files.filter(file => {
+      const fileExtension = detectFileExtension(file.name);
+
+      if (extension === 'any') {
+        return true;
+      } else if (extension === 'image') {
+        return isImageFormat(fileExtension);
+      } else {
+        return fileExtension === extension;
+      }
+    });
+  };
+
+  const updateFileSelection = (files: StirlingFile[]) => {
+    const fileIds = files.map(file => file.fileId);
+    setSelectedFiles(fileIds);
+  };
+
+  const handleFromExtensionChange = (value: string) => {
+    onParameterChange('fromExtension', value);
+    setAutoTargetExtension(value);
+    resetParametersToDefaults();
+
+    if (activeFiles.length > 0) {
+      const matchingFiles = filterFilesByExtension(value);
+      updateFileSelection(matchingFiles);
+    } else {
+      updateFileSelection([]);
+    }
+  };
+
+  const handleToExtensionChange = (value: string) => {
+    onParameterChange('toExtension', value);
+    onParameterChange('imageOptions', {
+      colorType: COLOR_TYPES.COLOR,
+      dpi: 300,
+      singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
+      fitOption: FIT_OPTIONS.MAINTAIN_ASPECT,
+      autoRotate: true,
+      combineImages: true,
+    });
+    onParameterChange('emailOptions', {
+      includeAttachments: true,
+      maxAttachmentSizeMB: 10,
+      downloadHtml: false,
+      includeAllRecipients: false,
+    });
+    onParameterChange('pdfaOptions', {
+      outputFormat: 'pdfa-1',
+    });
+  };
+
+
+  return (
+    <Stack gap="md">
+
+      {/* Format Selection */}
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>
+          {t("convert.convertFrom", "Convert from")}:
+        </Text>
+        <GroupedFormatDropdown
+          name="convert-from-dropdown"
+          data-testid="convert-from-dropdown"
+          value={parameters.fromExtension}
+          placeholder={t("convert.sourceFormatPlaceholder", "Source format")}
+          options={enhancedFromOptions}
+          onChange={handleFromExtensionChange}
+          disabled={disabled}
+          minWidth="18rem"
+        />
+      </Stack>
+
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>
+          {t("convert.convertTo", "Convert to")}:
+        </Text>
+        {!parameters.fromExtension ? (
+          <UnstyledButton
+            style={{
+              padding: '0.5rem 0.75rem',
+              border: `0.0625rem solid ${theme.colors.gray[4]}`,
+              borderRadius: theme.radius.sm,
+              backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+              color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+              cursor: 'not-allowed'
+            }}
+          >
+            <Group justify="space-between">
+              <Text size="sm">{t("convert.selectSourceFormatFirst", "Select a source format first")}</Text>
+              <KeyboardArrowDownIcon
+                style={{
+                  fontSize: '1rem',
+                  color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+                }}
+              />
+            </Group>
+          </UnstyledButton>
+        ) : (
+          <GroupedFormatDropdown
+            name="convert-to-dropdown"
+            data-testid="convert-to-dropdown"
+            value={parameters.toExtension}
+            placeholder={t("convert.targetFormatPlaceholder", "Target format")}
+            options={enhancedToOptions}
+            onChange={handleToExtensionChange}
+            disabled={disabled}
+            minWidth="18rem"
+          />
+        )}
+      </Stack>
+
+      {/* Format-specific options */}
+      {isImageFormat(parameters.toExtension) && (
+        <>
+          <Divider />
+          <ConvertToImageSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+
+      {/* Color options for image to PDF conversion */}
+      {(isImageFormat(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
+       (parameters.isSmartDetection && parameters.smartDetectionType === 'images') ? (
+        <>
+          <Divider />
+          <ConvertFromImageSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      ) : null}
+
+      {/* Web to PDF options */}
+      {((isWebFormat(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
+       (parameters.isSmartDetection && parameters.smartDetectionType === 'web')) ? (
+        <>
+          <Divider />
+          <ConvertFromWebSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      ) : null}
+
+      {/* Email to PDF options */}
+      {parameters.fromExtension === 'eml' && parameters.toExtension === 'pdf' && (
+        <>
+          <Divider />
+          <ConvertFromEmailSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+      {/* PDF to PDF/A options */}
+      {parameters.fromExtension === 'pdf' && parameters.toExtension === 'pdfa' && (
+        <>
+          <Divider />
+          <ConvertToPdfaSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            selectedFiles={selectedFiles}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+    </Stack>
+  );
+};
+
+export default ConvertSettings;

frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx

@@ -0,0 +1,70 @@
+import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { COLOR_TYPES, OUTPUT_OPTIONS } from "@app/constants/convertConstants";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+
+interface ConvertToImageSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ConvertToImageSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertToImageSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm" data-testid="image-options-section">
+      <Text size="sm" fw={500} data-testid="image-options-title">{t("convert.imageOptions", "Image Options")}:</Text>
+      <Group grow>
+        <Select
+          data-testid="color-type-select"
+          label={t("convert.colorType", "Color Type")}
+          value={parameters.imageOptions.colorType}
+          onChange={(val) => val && onParameterChange('imageOptions', {
+            ...parameters.imageOptions,
+            colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
+          })}
+          data={[
+            { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
+            { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
+            { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
+          ]}
+          disabled={disabled}
+        />
+        <NumberInput
+          data-testid="dpi-input"
+          label={t("convert.dpi", "DPI")}
+          value={parameters.imageOptions.dpi}
+          onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
+            ...parameters.imageOptions,
+            dpi: val
+          })}
+          min={72}
+          max={600}
+          step={1}
+          disabled={disabled}
+        />
+      </Group>
+      <Select
+        data-testid="output-type-select"
+        label={t("convert.output", "Output")}
+        value={parameters.imageOptions.singleOrMultiple}
+        onChange={(val) => val && onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
+        })}
+        data={[
+          { value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
+          { value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
+        ]}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ConvertToImageSettings;

frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx

@@ -0,0 +1,60 @@
+import { Stack, Text, Select, Alert } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { usePdfSignatureDetection } from '@app/hooks/usePdfSignatureDetection';
+import { StirlingFile } from '@app/types/fileContext';
+
+interface ConvertToPdfaSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
+  selectedFiles: StirlingFile[];
+  disabled?: boolean;
+}
+
+const ConvertToPdfaSettings = ({
+  parameters,
+  onParameterChange,
+  selectedFiles,
+  disabled = false
+}: ConvertToPdfaSettingsProps) => {
+  const { t } = useTranslation();
+  const { hasDigitalSignatures, isChecking } = usePdfSignatureDetection(selectedFiles);
+
+  const pdfaFormatOptions = [
+    { value: 'pdfa-1', label: 'PDF/A-1b' },
+    { value: 'pdfa', label: 'PDF/A-2b' }
+  ];
+
+  return (
+    <Stack gap="sm" data-testid="pdfa-settings">
+      <Text size="sm" fw={500}>{t("convert.pdfaOptions", "PDF/A Options")}:</Text>
+
+      {hasDigitalSignatures && (
+        <Alert color="yellow">
+          <Text size="sm">
+            {t("convert.pdfaDigitalSignatureWarning", "The PDF contains a digital signature. This will be removed in the next step.")}
+          </Text>
+        </Alert>
+      )}
+
+      <Stack gap="xs">
+        <Text size="xs" fw={500}>{t("convert.outputFormat", "Output Format")}:</Text>
+        <Select
+          value={parameters.pdfaOptions.outputFormat}
+          onChange={(value) => onParameterChange('pdfaOptions', {
+            ...parameters.pdfaOptions,
+            outputFormat: value || 'pdfa-1'
+          })}
+          data={pdfaFormatOptions}
+          disabled={disabled || isChecking}
+          data-testid="pdfa-output-format-select"
+        />
+        <Text size="xs" c="dimmed">
+          {t("convert.pdfaNote", "PDF/A-1b is more compatible, PDF/A-2b supports more features.")}
+        </Text>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ConvertToPdfaSettings;

frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx

@@ -0,0 +1,156 @@
+import { useState, useMemo } from "react";
+import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+interface FormatOption {
+  value: string;
+  label: string;
+  group: string;
+  enabled?: boolean;
+}
+
+interface GroupedFormatDropdownProps {
+  value?: string;
+  placeholder?: string;
+  options: FormatOption[];
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  minWidth?: string;
+  name?: string;
+}
+
+const GroupedFormatDropdown = ({
+  value,
+  placeholder = "Select an option",
+  options,
+  onChange,
+  disabled = false,
+  minWidth = "18.75rem",
+  name
+}: GroupedFormatDropdownProps) => {
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
+
+  const groupedOptions = useMemo(() => {
+    const groups: Record<string, FormatOption[]> = {};
+
+    options.forEach(option => {
+      if (!groups[option.group]) {
+        groups[option.group] = [];
+      }
+      groups[option.group].push(option);
+    });
+
+    return groups;
+  }, [options]);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return placeholder;
+    const selected = options.find(opt => opt.value === value);
+    return selected ? `${selected.group} (${selected.label})` : value.toUpperCase();
+  }, [value, options, placeholder]);
+
+  const handleOptionSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setDropdownOpened(false);
+  };
+
+  return (
+    <Popover
+      opened={dropdownOpened}
+      onDismiss={() => setDropdownOpened(false)}
+      position="bottom-start"
+      withArrow
+      shadow="sm"
+      disabled={disabled}
+      closeOnEscape={true}
+      trapFocus
+    >
+      <Popover.Target>
+        <UnstyledButton
+          name={name}
+          data-testid={name}
+          onClick={() => setDropdownOpened(!dropdownOpened)}
+          disabled={disabled}
+          style={{
+            padding: '0.5rem 0.75rem',
+            border: `0.0625rem solid ${theme.colors.gray[4]}`,
+            borderRadius: theme.radius.sm,
+            backgroundColor: disabled
+              ? theme.colors.gray[1]
+              : colorScheme === 'dark'
+                ? theme.colors.dark[6]
+                : theme.white,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            width: '100%',
+            color: disabled
+              ? colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.dark[7]
+              : colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
+          }}
+        >
+          <Group justify="space-between">
+            <Text size="sm" c={value ? undefined : 'dimmed'}>
+              {selectedLabel}
+            </Text>
+            <KeyboardArrowDownIcon
+              style={{
+                fontSize: '1rem',
+                transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s ease',
+                color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+              }}
+            />
+          </Group>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown
+        style={{
+          minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
+          maxWidth: '90vw',
+          maxHeight: '40vh',
+          overflow: 'auto',
+          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+          border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+        }}
+      >
+        <Stack gap="md">
+          {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
+            <Box key={groupName}>
+              <Text
+                size="sm"
+                fw={600}
+                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'}
+                mb="xs"
+              >
+                {groupName}
+              </Text>
+              <Group gap="xs" style={{ flexWrap: 'wrap' }}>
+                {groupOptions.map((option) => (
+                  <Button
+                    key={option.value}
+                    data-testid={`format-option-${option.value}`}
+                    variant={value === option.value ? "filled" : "outline"}
+                    size="sm"
+                    onClick={() => handleOptionSelect(option.value)}
+                    disabled={option.enabled === false}
+                    style={{
+                      fontSize: '0.75rem',
+                      height: '2rem',
+                      padding: '0 0.75rem',
+                      flexShrink: 0
+                    }}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </Group>
+            </Box>
+          ))}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+export default GroupedFormatDropdown;

frontend/src/core/components/tools/crop/CropAreaSelector.tsx

@@ -0,0 +1,301 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { Box, useMantineTheme, MantineTheme } from '@mantine/core';
+import {
+  PDFBounds,
+  Rectangle,
+  domToPDFCoordinates,
+  pdfToDOMCoordinates,
+  constrainDOMRectToThumbnail,
+  isPointInThumbnail
+} from '@app/utils/cropCoordinates';
+import { type ResizeHandle } from '@app/constants/cropConstants';
+
+interface CropAreaSelectorProps {
+  /** PDF bounds for coordinate conversion */
+  pdfBounds: PDFBounds;
+  /** Current crop area in PDF coordinates */
+  cropArea: Rectangle;
+  /** Callback when crop area changes */
+  onCropAreaChange: (cropArea: Rectangle) => void;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** Child content (typically the PDF thumbnail) */
+  children: React.ReactNode;
+}
+
+const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
+  pdfBounds,
+  cropArea,
+  onCropAreaChange,
+  disabled = false,
+  children
+}) => {
+  const theme = useMantineTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState<ResizeHandle>(null);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [initialCropArea, setInitialCropArea] = useState<Rectangle>(cropArea);
+
+  // Convert PDF crop area to DOM coordinates for display
+  const domRect = pdfToDOMCoordinates(cropArea, pdfBounds);
+
+  // Handle mouse down on overlay (start dragging or resizing)
+  const handleOverlayMouseDown = useCallback((e: React.MouseEvent) => {
+    if (disabled || !containerRef.current) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Check if we're clicking on a resize handle first (higher priority)
+    const handle = getResizeHandle(x, y, domRect);
+
+    if (handle) {
+      setIsResizing(handle);
+      setInitialCropArea(cropArea);
+      setIsDragging(false); // Ensure we're not dragging when resizing
+    } else if (isPointInCropArea(x, y, domRect)) {
+      // Only allow dragging if we're not on a resize handle
+      setIsDragging(true);
+      setIsResizing(null); // Ensure we're not resizing when dragging
+      setDragStart({ x: x - domRect.x, y: y - domRect.y });
+    }
+  }, [disabled, cropArea, domRect]);
+
+  // Handle mouse down on container (start new selection)
+  const handleContainerMouseDown = useCallback((e: React.MouseEvent) => {
+    if (disabled || !containerRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Only start new selection if clicking within thumbnail area
+    if (!isPointInThumbnail(x, y, pdfBounds)) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Start new crop selection
+    const newDomRect: Rectangle = { x, y, width: 20, height: 20 };
+    const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+    const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+
+    onCropAreaChange(newCropArea);
+    setIsResizing('se'); // Start resizing from the southeast corner
+    setInitialCropArea(newCropArea);
+  }, [disabled, pdfBounds, onCropAreaChange]);
+
+  // Handle mouse move
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (disabled || !containerRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    if (isDragging) {
+      // Dragging the entire crop area
+      const newX = x - dragStart.x;
+      const newY = y - dragStart.y;
+
+      const newDomRect: Rectangle = {
+        x: newX,
+        y: newY,
+        width: domRect.width,
+        height: domRect.height
+      };
+
+      const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+      const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+      onCropAreaChange(newCropArea);
+
+    } else if (isResizing) {
+      // Resizing the crop area
+      const newDomRect = calculateResizedRect(isResizing, domRect, x, y);
+      const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+      const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+      onCropAreaChange(newCropArea);
+    }
+  }, [disabled, isDragging, isResizing, dragStart, domRect, initialCropArea, pdfBounds, onCropAreaChange]);
+
+  // Handle mouse up
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsResizing(null);
+  }, []);
+
+  // Add global mouse event listeners
+  useEffect(() => {
+    if (isDragging || isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
+
+  return (
+    <Box
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        cursor: 'crosshair',
+        userSelect: 'none'
+      }}
+      onMouseDown={handleContainerMouseDown}
+    >
+      {/* PDF Thumbnail Content */}
+      {children}
+
+      {/* Crop Area Overlay */}
+      {!disabled && (
+        <Box
+          ref={overlayRef}
+          style={{
+            position: 'absolute',
+            left: domRect.x,
+            top: domRect.y,
+            width: domRect.width,
+            height: domRect.height,
+            border: `2px solid ${theme.other.crop.overlayBorder}`,
+            backgroundColor: theme.other.crop.overlayBackground,
+            cursor: 'move',
+            pointerEvents: 'auto',
+            transition: (isDragging || isResizing) ? undefined : 'all 1s ease-in-out'
+          }}
+          onMouseDown={handleOverlayMouseDown}
+        >
+          {/* Resize Handles */}
+          {renderResizeHandles(disabled, theme)}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// Helper functions
+
+function getResizeHandle(x: number, y: number, domRect: Rectangle): ResizeHandle {
+  const handleSize = 8;
+  const tolerance = handleSize;
+
+  // Corner handles (check these first, they have priority)
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y, tolerance)) return 'nw';
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y, tolerance)) return 'ne';
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 'sw';
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 'se';
+
+  // Edge handles (only if not in corner area)
+  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y, tolerance)) return 'n';
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return 'e';
+  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 's';
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return 'w';
+
+  return null;
+}
+
+function isNear(a: number, b: number, tolerance: number): boolean {
+  return Math.abs(a - b) <= tolerance;
+}
+
+function isPointInCropArea(x: number, y: number, domRect: Rectangle): boolean {
+  return x >= domRect.x && x <= domRect.x + domRect.width &&
+         y >= domRect.y && y <= domRect.y + domRect.height;
+}
+
+function calculateResizedRect(
+  handle: ResizeHandle,
+  currentRect: Rectangle,
+  mouseX: number,
+  mouseY: number,
+): Rectangle {
+  let { x, y, width, height } = currentRect;
+
+  switch (handle) {
+    case 'nw':
+      width += x - mouseX;
+      height += y - mouseY;
+      x = mouseX;
+      y = mouseY;
+      break;
+    case 'ne':
+      width = mouseX - x;
+      height += y - mouseY;
+      y = mouseY;
+      break;
+    case 'sw':
+      width += x - mouseX;
+      height = mouseY - y;
+      x = mouseX;
+      break;
+    case 'se':
+      width = mouseX - x;
+      height = mouseY - y;
+      break;
+    case 'n':
+      height += y - mouseY;
+      y = mouseY;
+      break;
+    case 'e':
+      width = mouseX - x;
+      break;
+    case 's':
+      height = mouseY - y;
+      break;
+    case 'w':
+      width += x - mouseX;
+      x = mouseX;
+      break;
+  }
+
+  // Enforce minimum size
+  width = Math.max(10, width);
+  height = Math.max(10, height);
+
+  return { x, y, width, height };
+}
+
+function renderResizeHandles(disabled: boolean, theme: MantineTheme) {
+  if (disabled) return null;
+
+  const handleSize = 8;
+  const handleStyle = {
+    position: 'absolute' as const,
+    width: handleSize,
+    height: handleSize,
+    backgroundColor: theme.other.crop.handleColor,
+    border: `1px solid ${theme.other.crop.handleBorder}`,
+    borderRadius: '2px',
+    pointerEvents: 'auto' as const
+  };
+
+  return (
+    <>
+      {/* Corner handles */}
+      <Box style={{ ...handleStyle, left: -handleSize/2, top: -handleSize/2, cursor: 'nw-resize' }} />
+      <Box style={{ ...handleStyle, right: -handleSize/2, top: -handleSize/2, cursor: 'ne-resize' }} />
+      <Box style={{ ...handleStyle, left: -handleSize/2, bottom: -handleSize/2, cursor: 'sw-resize' }} />
+      <Box style={{ ...handleStyle, right: -handleSize/2, bottom: -handleSize/2, cursor: 'se-resize' }} />
+
+      {/* Edge handles */}
+      <Box style={{ ...handleStyle, left: '50%', marginLeft: -handleSize/2, top: -handleSize/2, cursor: 'n-resize' }} />
+      <Box style={{ ...handleStyle, right: -handleSize/2, top: '50%', marginTop: -handleSize/2, cursor: 'e-resize' }} />
+      <Box style={{ ...handleStyle, left: '50%', marginLeft: -handleSize/2, bottom: -handleSize/2, cursor: 's-resize' }} />
+      <Box style={{ ...handleStyle, left: -handleSize/2, top: '50%', marginTop: -handleSize/2, cursor: 'w-resize' }} />
+    </>
+  );
+}
+
+export default CropAreaSelector;

frontend/src/core/components/tools/crop/CropAutomationSettings.tsx

@@ -0,0 +1,41 @@
+/**
+ * CropAutomationSettings - Used for automation only
+ *
+ * Simplified crop settings for automation that doesn't require a file preview.
+ * Allows users to manually enter crop coordinates and dimensions.
+ */
+
+import { Stack } from "@mantine/core";
+import { CropParameters } from "@app/hooks/tools/crop/useCropParameters";
+import { Rectangle } from "@app/utils/cropCoordinates";
+import CropCoordinateInputs from "@app/components/tools/crop/CropCoordinateInputs";
+
+interface CropAutomationSettingsProps {
+  parameters: CropParameters;
+  onParameterChange: <K extends keyof CropParameters>(key: K, value: CropParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const CropAutomationSettings = ({ parameters, onParameterChange, disabled = false }: CropAutomationSettingsProps) => {
+  // Handle coordinate changes
+  const handleCoordinateChange = (field: keyof Rectangle, value: number | string) => {
+    const numValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(numValue)) return;
+
+    const newCropArea = { ...parameters.cropArea, [field]: numValue };
+    onParameterChange('cropArea', newCropArea);
+  };
+
+  return (
+    <Stack gap="md">
+      <CropCoordinateInputs
+        cropArea={parameters.cropArea}
+        onCoordinateChange={handleCoordinateChange}
+        disabled={disabled}
+        showAutomationInfo={true}
+      />
+    </Stack>
+  );
+};
+
+export default CropAutomationSettings;

frontend/src/core/components/tools/crop/CropCoordinateInputs.tsx

@@ -0,0 +1,101 @@
+import { Stack, Text, Group, NumberInput, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Rectangle, PDFBounds } from "@app/utils/cropCoordinates";
+
+interface CropCoordinateInputsProps {
+  cropArea: Rectangle;
+  onCoordinateChange: (field: keyof Rectangle, value: number | string) => void;
+  disabled?: boolean;
+  pdfBounds?: PDFBounds;
+  showAutomationInfo?: boolean;
+}
+
+const CropCoordinateInputs = ({
+  cropArea,
+  onCoordinateChange,
+  disabled = false,
+  pdfBounds,
+  showAutomationInfo = false
+}: CropCoordinateInputsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="xs">
+      {showAutomationInfo && (
+        <Alert color="blue" variant="light">
+          <Text size="xs">
+            {t("crop.automation.info", "Enter crop coordinates in PDF points. Origin (0,0) is at bottom-left. These values will be applied to all PDFs processed in this automation.")}
+          </Text>
+        </Alert>
+      )}
+
+      <Text size="sm" fw={500}>
+        {t("crop.coordinates.title", "Position and Size")}
+      </Text>
+
+      <Group grow>
+        <NumberInput
+          label={t("crop.coordinates.x.label", "X Position")}
+          description={showAutomationInfo ? t("crop.coordinates.x.desc", "Left edge (points)") : undefined}
+          value={Math.round(cropArea.x * 10) / 10}
+          onChange={(value) => onCoordinateChange('x', value)}
+          disabled={disabled}
+          min={0}
+          max={pdfBounds?.actualWidth}
+          step={0.1}
+          decimalScale={1}
+          size={showAutomationInfo ? "sm" : "xs"}
+        />
+        <NumberInput
+          label={t("crop.coordinates.y.label", "Y Position")}
+          description={showAutomationInfo ? t("crop.coordinates.y.desc", "Bottom edge (points)") : undefined}
+          value={Math.round(cropArea.y * 10) / 10}
+          onChange={(value) => onCoordinateChange('y', value)}
+          disabled={disabled}
+          min={0}
+          max={pdfBounds?.actualHeight}
+          step={0.1}
+          decimalScale={1}
+          size={showAutomationInfo ? "sm" : "xs"}
+        />
+      </Group>
+
+      <Group grow>
+        <NumberInput
+          label={t("crop.coordinates.width.label", "Width")}
+          description={showAutomationInfo ? t("crop.coordinates.width.desc", "Crop width (points)") : undefined}
+          value={Math.round(cropArea.width * 10) / 10}
+          onChange={(value) => onCoordinateChange('width', value)}
+          disabled={disabled}
+          min={0.1}
+          max={pdfBounds?.actualWidth}
+          step={0.1}
+          decimalScale={1}
+          size={showAutomationInfo ? "sm" : "xs"}
+        />
+        <NumberInput
+          label={t("crop.coordinates.height.label", "Height")}
+          description={showAutomationInfo ? t("crop.coordinates.height.desc", "Crop height (points)") : undefined}
+          value={Math.round(cropArea.height * 10) / 10}
+          onChange={(value) => onCoordinateChange('height', value)}
+          disabled={disabled}
+          min={0.1}
+          max={pdfBounds?.actualHeight}
+          step={0.1}
+          decimalScale={1}
+          size={showAutomationInfo ? "sm" : "xs"}
+        />
+      </Group>
+
+      {showAutomationInfo && (
+        <Alert color="gray" variant="light">
+          <Text size="xs">
+            {t("crop.automation.reference", "Reference: A4 page is 595.28 × 841.89 points (210mm × 297mm). 1 inch = 72 points.")}
+          </Text>
+        </Alert>
+      )}
+    </Stack>
+  );
+};
+
+export default CropCoordinateInputs;

frontend/src/core/components/tools/crop/CropSettings.tsx

@@ -0,0 +1,227 @@
+import { useMemo, useState, useEffect } from "react";
+import { Stack, Text, Box, Group, ActionIcon, Center, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import { CropParametersHook } from "@app/hooks/tools/crop/useCropParameters";
+import { useSelectedFiles } from "@app/contexts/file/fileHooks";
+import CropAreaSelector from "@app/components/tools/crop/CropAreaSelector";
+import CropCoordinateInputs from "@app/components/tools/crop/CropCoordinateInputs";
+import { DEFAULT_CROP_AREA } from "@app/constants/cropConstants";
+import { PAGE_SIZES } from "@app/constants/pageSizeConstants";
+import {
+  calculatePDFBounds,
+  PDFBounds,
+  Rectangle
+} from "@app/utils/cropCoordinates";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
+
+interface CropSettingsProps {
+  parameters: CropParametersHook;
+  disabled?: boolean;
+}
+
+const CONTAINER_SIZE = 250; // Fit within actual pane width
+
+const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
+  const { t } = useTranslation();
+  const { selectedFiles, selectedFileStubs } = useSelectedFiles();
+
+  // Get the first selected file for preview
+  const selectedStub = useMemo(() => {
+    return selectedFileStubs.length > 0 ? selectedFileStubs[0] : null;
+  }, [selectedFileStubs]);
+
+  // Get the first selected file for PDF processing
+  const selectedFile = useMemo(() => {
+    return selectedFiles.length > 0 ? selectedFiles[0] : null;
+  }, [selectedFiles]);
+
+  // Get thumbnail for the selected file
+  const [thumbnail, setThumbnail] = useState<string | null>(null);
+  const [pdfBounds, setPdfBounds] = useState<PDFBounds | null>(null);
+
+  useEffect(() => {
+    const loadPDFDimensions = async () => {
+      if (!selectedStub || !selectedFile) {
+        setPdfBounds(null);
+        setThumbnail(null);
+        return;
+      }
+
+      setThumbnail(selectedStub.thumbnailUrl || null);
+
+      try {
+        // Get PDF dimensions from the actual file
+        const arrayBuffer = await selectedFile.arrayBuffer();
+
+        // Load PDF to get actual dimensions
+        const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
+          disableAutoFetch: true,
+          disableStream: true,
+          stopAtErrors: false
+        });
+
+        const firstPage = await pdf.getPage(1);
+        const viewport = firstPage.getViewport({ scale: 1 });
+
+        const pdfWidth = viewport.width;
+        const pdfHeight = viewport.height;
+
+        const bounds = calculatePDFBounds(pdfWidth, pdfHeight, CONTAINER_SIZE, CONTAINER_SIZE);
+        setPdfBounds(bounds);
+
+        // Initialize crop area to full PDF if parameters are still default
+        if (parameters.parameters.cropArea === DEFAULT_CROP_AREA) {
+          parameters.resetToFullPDF(bounds);
+        }
+
+        // Cleanup PDF
+        pdfWorkerManager.destroyDocument(pdf);
+      } catch (error) {
+        console.error('Failed to load PDF dimensions:', error);
+        // Fallback to A4 dimensions if PDF loading fails
+        const bounds = calculatePDFBounds(PAGE_SIZES.A4.width, PAGE_SIZES.A4.height, CONTAINER_SIZE, CONTAINER_SIZE);
+        setPdfBounds(bounds);
+
+        if (parameters.parameters.cropArea.width === PAGE_SIZES.A4.width && parameters.parameters.cropArea.height === PAGE_SIZES.A4.height) {
+          parameters.resetToFullPDF(bounds);
+        }
+      }
+    };
+
+    loadPDFDimensions();
+  }, [selectedStub, selectedFile, parameters]);
+
+  // Listen for tour events to set crop area
+  useEffect(() => {
+    const handleSetCropArea = (event: Event) => {
+      const customEvent = event as CustomEvent<Rectangle>;
+      if (customEvent.detail && pdfBounds) {
+        parameters.setCropArea(customEvent.detail, pdfBounds);
+      }
+    };
+
+    window.addEventListener('tour:setCropArea', handleSetCropArea);
+    return () => window.removeEventListener('tour:setCropArea', handleSetCropArea);
+  }, [parameters, pdfBounds]);
+
+  // Current crop area
+  const cropArea = parameters.getCropArea();
+
+
+  // Handle crop area changes from the selector
+  const handleCropAreaChange = (newCropArea: Rectangle) => {
+    if (pdfBounds) {
+      parameters.setCropArea(newCropArea, pdfBounds);
+    }
+  };
+
+  // Handle manual coordinate input changes
+  const handleCoordinateChange = (field: keyof Rectangle, value: number | string) => {
+    const numValue = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(numValue)) return;
+
+    const newCropArea = { ...cropArea, [field]: numValue };
+    if (pdfBounds) {
+      parameters.setCropArea(newCropArea, pdfBounds);
+    }
+  };
+
+  // Reset to full PDF
+  const handleReset = () => {
+    if (pdfBounds) {
+      parameters.resetToFullPDF(pdfBounds);
+    }
+  };
+
+
+  if (!selectedStub || !pdfBounds) {
+    return (
+      <Center style={{ height: '200px' }}>
+        <Text color="dimmed">
+          {t("crop.noFileSelected", "Select a PDF file to begin cropping")}
+        </Text>
+      </Center>
+    );
+  }
+
+  const isCropValid = parameters.isCropAreaValid(pdfBounds);
+  const isFullCrop = parameters.isFullPDFCrop(pdfBounds);
+
+  return (
+    <Stack gap="md" data-tour="crop-settings">
+      {/* PDF Preview with Crop Selector */}
+      <Stack gap="xs">
+        <Group justify="space-between" align="center">
+          <Text size="sm" fw={500}>
+            {t("crop.preview.title", "Crop Area Selection")}
+          </Text>
+          <ActionIcon
+            variant="outline"
+            onClick={handleReset}
+            disabled={disabled || isFullCrop}
+            title={t("crop.reset", "Reset to full PDF")}
+            aria-label={t("crop.reset", "Reset to full PDF")}
+          >
+            <RestartAltIcon style={{ fontSize: '1rem' }} />
+          </ActionIcon>
+        </Group>
+
+        <Center>
+          <Box
+            style={{
+              width: CONTAINER_SIZE,
+              height: CONTAINER_SIZE,
+              border: '1px solid var(--mantine-color-gray-3)',
+              borderRadius: '8px',
+              backgroundColor: 'var(--mantine-color-gray-0)',
+              overflow: 'hidden',
+              position: 'relative'
+            }}
+          >
+            <CropAreaSelector
+              pdfBounds={pdfBounds}
+              cropArea={cropArea}
+              onCropAreaChange={handleCropAreaChange}
+              disabled={disabled}
+            >
+              <DocumentThumbnail
+                file={selectedStub}
+                thumbnail={thumbnail}
+                style={{
+                  width: pdfBounds.thumbnailWidth,
+                  height: pdfBounds.thumbnailHeight,
+                  position: 'absolute',
+                  left: pdfBounds.offsetX,
+                  top: pdfBounds.offsetY
+                }}
+              />
+            </CropAreaSelector>
+          </Box>
+        </Center>
+
+      </Stack>
+
+      {/* Manual Coordinate Input */}
+      <CropCoordinateInputs
+        cropArea={cropArea}
+        onCoordinateChange={handleCoordinateChange}
+        disabled={disabled}
+        pdfBounds={pdfBounds}
+        showAutomationInfo={false}
+      />
+
+      {/* Validation Alert */}
+      {!isCropValid && (
+        <Alert color="red" variant="light">
+          <Text size="xs">
+            {t("crop.error.invalidArea", "Crop area extends beyond PDF boundaries")}
+          </Text>
+        </Alert>
+      )}
+    </Stack>
+  );
+};
+
+export default CropSettings;

frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+import { Stack, Select, Checkbox } from '@mantine/core';
+import { ExtractImagesParameters } from '@app/hooks/tools/extractImages/useExtractImagesParameters';
+
+interface ExtractImagesSettingsProps {
+  parameters: ExtractImagesParameters;
+  onParameterChange: <K extends keyof ExtractImagesParameters>(key: K, value: ExtractImagesParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ExtractImagesSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ExtractImagesSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Select
+        label={t('extractImages.selectText', 'Output Format')}
+        value={parameters.format}
+        onChange={(value) => {
+          const allowedFormats = ['png', 'jpg', 'gif'] as const;
+          const format = allowedFormats.includes(value as any) ? (value as typeof allowedFormats[number]) : 'png';
+          onParameterChange('format', format);
+        }}
+        data={[
+          { value: 'png', label: 'PNG' },
+          { value: 'jpg', label: 'JPG' },
+          { value: 'gif', label: 'GIF' },
+        ]}
+        disabled={disabled}
+      />
+
+      <Checkbox
+        label={t('extractImages.allowDuplicates', 'Allow Duplicate Images')}
+        checked={parameters.allowDuplicates}
+        onChange={(event) => onParameterChange('allowDuplicates', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ExtractImagesSettings;

frontend/src/core/components/tools/flatten/FlattenSettings.tsx

@@ -0,0 +1,35 @@
+import { Stack, Text, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { FlattenParameters } from "@app/hooks/tools/flatten/useFlattenParameters";
+
+interface FlattenSettingsProps {
+  parameters: FlattenParameters;
+  onParameterChange: <K extends keyof FlattenParameters>(key: K, value: FlattenParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: FlattenSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Stack gap="sm">
+        <Checkbox
+          checked={parameters.flattenOnlyForms}
+          onChange={(event) => onParameterChange('flattenOnlyForms', event.currentTarget.checked)}
+          disabled={disabled}
+          label={
+            <div>
+              <Text size="sm">{t('flatten.options.flattenOnlyForms', 'Flatten only forms')}</Text>
+              <Text size="xs" c="dimmed">
+                {t('flatten.options.flattenOnlyForms.desc', 'Only flatten form fields, leaving other interactive elements intact')}
+              </Text>
+            </div>
+          }
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default FlattenSettings;

frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@app/components/shared/Tooltip';
+import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
+import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
+import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from '@app/components/tools/fullscreen/shared';
+
+interface CompactToolItemProps {
+  id: string;
+  tool: ToolRegistryEntry;
+  isSelected: boolean;
+  onClick: () => void;
+  tooltipPortalTarget?: HTMLElement | undefined;
+}
+
+const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected, onClick, tooltipPortalTarget }) => {
+  const { t } = useTranslation();
+  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+  const categoryColor = getSubcategoryColor(tool.subcategoryId);
+  const iconBg = getIconBackground(categoryColor, false);
+  const iconClasses = 'tool-panel__fullscreen-list-icon';
+
+  let iconNode: React.ReactNode = null;
+  if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
+    const element = tool.icon as React.ReactElement<{ style?: React.CSSProperties }>;
+    iconNode = React.cloneElement(element, {
+      style: {
+        ...(element.props.style || {}),
+        fontSize: '1.5rem',
+      },
+    });
+  } else {
+    iconNode = tool.icon;
+  }
+
+  const compactButton = (
+    <button
+      type="button"
+      className={`tool-panel__fullscreen-list-item ${getItemClasses(false)} ${isSelected ? 'tool-panel__fullscreen-list-item--selected' : ''} ${!disabled ? 'tool-panel__fullscreen-list-item--with-star' : ''}`}
+      onClick={onClick}
+      aria-disabled={disabled}
+      disabled={disabled}
+      data-tour={`tool-button-${id}`}
+    >
+      {tool.icon ? (
+        <span
+          className={iconClasses}
+          aria-hidden
+          style={{
+            background: iconBg,
+            ...getIconStyle(),
+          }}
+        >
+          {iconNode}
+        </span>
+      ) : null}
+      <span className="tool-panel__fullscreen-list-body">
+        <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
+          {tool.name}
+        </Text>
+      </span>
+      {!disabled && (
+        <div className="tool-panel__fullscreen-star-compact">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="xs"
+          />
+        </div>
+      )}
+    </button>
+  );
+
+  const tooltipContent = disabled
+    ? (
+      <span><strong>{t('toolPanel.fullscreen.comingSoon', 'Coming soon:')}</strong> {tool.description}</span>
+    )
+    : (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+        <span>{tool.description}</span>
+        {binding && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem' }}>
+            <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500 }}>
+              {t('settings.hotkeys.shortcut', 'Shortcut')}
+            </span>
+            <HotkeyDisplay binding={binding} />
+          </div>
+        )}
+      </div>
+    );
+
+  return (
+    <Tooltip
+      content={tooltipContent}
+      position="top"
+      portalTarget={tooltipPortalTarget}
+      arrow
+      delay={80}
+    >
+      {compactButton}
+    </Tooltip>
+  );
+};
+
+export default CompactToolItem;
+
+

frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
+import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
+import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
+import { getIconBackground, getIconStyle, getItemClasses, useToolMeta } from '@app/components/tools/fullscreen/shared';
+
+interface DetailedToolItemProps {
+  id: string;
+  tool: ToolRegistryEntry;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelected, onClick }) => {
+  const { t } = useTranslation();
+  const { binding, isFav, toggleFavorite, disabled } = useToolMeta(id, tool);
+
+  const categoryColor = getSubcategoryColor(tool.subcategoryId);
+  const iconBg = getIconBackground(categoryColor, true);
+  const iconClasses = 'tool-panel__fullscreen-icon';
+
+  let iconNode: React.ReactNode = null;
+  if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
+    const element = tool.icon as React.ReactElement<{ style?: React.CSSProperties }>;
+    iconNode = React.cloneElement(element, {
+      style: {
+        ...(element.props.style || {}),
+        fontSize: '1.75rem',
+      },
+    });
+  } else {
+    iconNode = tool.icon;
+  }
+
+  return (
+    <button
+      type="button"
+      className={`tool-panel__fullscreen-item ${getItemClasses(true)} ${isSelected ? 'tool-panel__fullscreen-item--selected' : ''} tool-panel__fullscreen-item--with-star`}
+      onClick={onClick}
+      aria-disabled={disabled}
+      disabled={disabled}
+      data-tour={`tool-button-${id}`}
+    >
+      {tool.icon ? (
+        <span
+          className={iconClasses}
+          aria-hidden
+          style={{
+            background: iconBg,
+            ...getIconStyle(),
+          }}
+        >
+          {iconNode}
+        </span>
+      ) : null}
+      <span className="tool-panel__fullscreen-body">
+        <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
+          {tool.name}
+        </Text>
+        <Text size="sm" c="dimmed" className="tool-panel__fullscreen-description">
+          {tool.description}
+        </Text>
+        {binding && (
+          <div className="tool-panel__fullscreen-shortcut">
+            <span style={{ color: 'var(--mantine-color-dimmed)', fontSize: '0.75rem' }}>
+              {t('settings.hotkeys.shortcut', 'Shortcut')}
+            </span>
+            <HotkeyDisplay binding={binding} size="sm" />
+          </div>
+        )}
+      </span>
+      {!disabled && (
+        <div className="tool-panel__fullscreen-star">
+          <FavoriteStar
+            isFavorite={isFav}
+            onToggle={toggleFavorite}
+            size="sm"
+          />
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default DetailedToolItem;
+
+

frontend/src/core/components/tools/fullscreen/shared.ts

@@ -0,0 +1,45 @@
+import { useHotkeys } from '@app/contexts/HotkeyContext';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+
+export const getItemClasses = (isDetailed: boolean): string => {
+  return isDetailed ? 'tool-panel__fullscreen-item--detailed' : '';
+};
+
+export const getIconBackground = (categoryColor: string, isDetailed: boolean): string => {
+  const baseColor = isDetailed ? 'var(--fullscreen-bg-icon-detailed)' : 'var(--fullscreen-bg-icon-compact)';
+  const blend1 = isDetailed ? '18%' : '15%';
+  const blend2 = isDetailed ? '8%' : '6%';
+
+  return `linear-gradient(135deg,
+    color-mix(in srgb, ${categoryColor} ${blend1}, ${baseColor}),
+    color-mix(in srgb, ${categoryColor} ${blend2}, ${baseColor})
+  )`;
+};
+
+export const getIconStyle = (): Record<string, string> => {
+  return {};
+};
+
+export const isToolDisabled = (id: string, tool: ToolRegistryEntry): boolean => {
+  return !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
+};
+
+export function useToolMeta(id: string, tool: ToolRegistryEntry) {
+  const { hotkeys } = useHotkeys();
+  const { isFavorite, toggleFavorite } = useToolWorkflow();
+
+  const isFav = isFavorite(id as ToolId);
+  const binding = hotkeys[id as ToolId];
+  const disabled = isToolDisabled(id, tool);
+
+  return {
+    binding,
+    isFav,
+    toggleFavorite: () => toggleFavorite(id as ToolId),
+    disabled,
+  };
+}
+
+

frontend/src/core/components/tools/merge/MergeFileSorter.test.tsx

@@ -0,0 +1,182 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import MergeFileSorter from '@app/components/tools/merge/MergeFileSorter';
+
+// Mock useTranslation with predictable return values
+const mockT = vi.fn((key: string) => `mock-${key}`);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('MergeFileSorter', () => {
+  const mockOnSortFiles = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render sort options dropdown, direction toggle, and sort button', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    // Should have a select dropdown (Mantine Select uses textbox role)
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+    // Should have direction toggle button
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2); // ActionIcon + Sort Button
+
+    // Should have sort button with text
+    expect(screen.getByText('mock-merge.sortBy.sort')).toBeInTheDocument();
+  });
+
+  test('should render description text', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    expect(screen.getByText('mock-merge.sortBy.description')).toBeInTheDocument();
+  });
+
+  test('should have filename selected by default', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    const select = screen.getByRole('textbox');
+    expect(select).toHaveValue('mock-merge.sortBy.filename');
+  });
+
+  test('should show ascending direction by default', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    // Should show ascending arrow icon
+    const directionButton = screen.getAllByRole('button')[0];
+    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+  });
+
+  test('should toggle direction when direction button is clicked', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    const directionButton = screen.getAllByRole('button')[0];
+
+    // Initially ascending
+    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+
+    // Click to toggle to descending
+    fireEvent.click(directionButton);
+    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.descending');
+
+    // Click again to toggle back to ascending
+    fireEvent.click(directionButton);
+    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+  });
+
+  test('should call onSortFiles with correct parameters when sort button is clicked', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    fireEvent.click(sortButton);
+
+    // Should be called with default values (filename, ascending)
+    expect(mockOnSortFiles).toHaveBeenCalledWith('filename', true);
+  });
+
+  test('should call onSortFiles with dateModified when dropdown is changed', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    // Open the dropdown by clicking on the current selected value
+    const currentSelection = screen.getByText('mock-merge.sortBy.filename');
+    fireEvent.mouseDown(currentSelection);
+    
+    // Click on the dateModified option
+    const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified');
+    fireEvent.click(dateModifiedOption);
+
+    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    fireEvent.click(sortButton);
+
+    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true);
+  });
+
+  test('should call onSortFiles with descending direction when toggled', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    const directionButton = screen.getAllByRole('button')[0];
+    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+
+    // Toggle to descending
+    fireEvent.click(directionButton);
+
+    // Click sort
+    fireEvent.click(sortButton);
+
+    expect(mockOnSortFiles).toHaveBeenCalledWith('filename', false);
+  });
+
+  test('should handle complex user interaction sequence', () => {
+    render(
+      <TestWrapper>
+        <MergeFileSorter onSortFiles={mockOnSortFiles} />
+      </TestWrapper>
+    );
+
+    const directionButton = screen.getAllByRole('button')[0];
+    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+
+    // 1. Change to dateModified
+    const currentSelection = screen.getByText('mock-merge.sortBy.filename');
+    fireEvent.mouseDown(currentSelection);
+    const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified');
+    fireEvent.click(dateModifiedOption);
+
+    // 2. Toggle to descending
+    fireEvent.click(directionButton);
+
+    // 3. Click sort
+    fireEvent.click(sortButton);
+
+    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', false);
+
+    // 4. Toggle back to ascending
+    fireEvent.click(directionButton);
+
+    // 5. Sort again
+    fireEvent.click(sortButton);
+
+    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true);
+  });
+});

frontend/src/core/components/tools/merge/MergeFileSorter.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import SortIcon from '@mui/icons-material/Sort';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+
+interface MergeFileSorterProps {
+  onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void;
+  disabled?: boolean;
+}
+
+const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
+  onSortFiles,
+  disabled = false,
+}) => {
+  const { t } = useTranslation();
+  const [sortType, setSortType] = useState<'filename' | 'dateModified'>('filename');
+  const [ascending, setAscending] = useState(true);
+
+  const sortOptions = [
+    { value: 'filename', label: t('merge.sortBy.filename', 'File Name') },
+    { value: 'dateModified', label: t('merge.sortBy.dateModified', 'Date Modified') },
+  ];
+
+  const handleSort = () => {
+    onSortFiles(sortType, ascending);
+  };
+
+  const handleDirectionToggle = () => {
+    setAscending(!ascending);
+  };
+
+  return (
+    <Stack gap="xs">
+      <Text size="sm" fw={500}>
+        {t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or sort below.")}
+      </Text>
+      <Stack gap="xs">
+        <Group gap="xs" align="end" justify="space-between">
+          <Select
+            data={sortOptions}
+            value={sortType}
+            onChange={(value) => setSortType(value as 'filename' | 'dateModified')}
+            disabled={disabled}
+            label={t('merge.sortBy.label', 'Sort By')}
+            size='xs'
+            style={{ flex: 1 }}
+          />
+
+          <ActionIcon
+            variant="light"
+            size="md"
+            onClick={handleDirectionToggle}
+            disabled={disabled}
+            title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')}
+          >
+            {ascending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+          </ActionIcon>
+        </Group>
+
+        <Button
+          variant="light"
+          size="xs"
+          leftSection={<SortIcon />}
+          onClick={handleSort}
+          disabled={disabled}
+          fullWidth
+        >
+          {t('merge.sortBy.sort', 'Sort')}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default MergeFileSorter;

frontend/src/core/components/tools/merge/MergeSettings.test.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import MergeSettings from '@app/components/tools/merge/MergeSettings';
+import { MergeParameters } from '@app/hooks/tools/merge/useMergeParameters';
+
+// Mock useTranslation with predictable return values
+const mockT = vi.fn((key: string) => `mock-${key}`);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('MergeSettings', () => {
+  const defaultParameters: MergeParameters = {
+    removeDigitalSignature: false,
+    generateTableOfContents: false,
+  };
+
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render both merge option checkboxes', () => {
+    render(
+      <TestWrapper>
+        <MergeSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Should render one checkbox for each parameter
+    const expectedCheckboxCount = Object.keys(defaultParameters).length;
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(expectedCheckboxCount);
+  });
+
+  test('should show correct initial checkbox states based on parameters', () => {
+    render(
+      <TestWrapper>
+        <MergeSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+
+    // Both checkboxes should be unchecked initially
+    checkboxes.forEach(checkbox => {
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  test('should call onParameterChange with correct parameters when checkboxes are clicked', () => {
+    render(
+      <TestWrapper>
+        <MergeSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+
+    // Click the first checkbox (removeDigitalSignature - should toggle from false to true)
+    fireEvent.click(checkboxes[0]);
+    expect(mockOnParameterChange).toHaveBeenCalledWith('removeDigitalSignature', true);
+
+    // Click the second checkbox (generateTableOfContents - should toggle from false to true)
+    fireEvent.click(checkboxes[1]);
+    expect(mockOnParameterChange).toHaveBeenCalledWith('generateTableOfContents', true);
+  });
+
+  test('should call translation function with correct keys', () => {
+    render(
+      <TestWrapper>
+        <MergeSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Verify that translation keys are being called
+    expect(mockT).toHaveBeenCalledWith('merge.removeDigitalSignature', 'Remove digital signature in the merged file?');
+    expect(mockT).toHaveBeenCalledWith('merge.generateTableOfContents', 'Generate table of contents in the merged file?');
+  });
+  
+});

frontend/src/core/components/tools/merge/MergeSettings.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Stack, Checkbox } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { MergeParameters } from '@app/hooks/tools/merge/useMergeParameters';
+
+interface MergeSettingsProps {
+  parameters: MergeParameters;
+  onParameterChange: <K extends keyof MergeParameters>(key: K, value: MergeParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const MergeSettings: React.FC<MergeSettingsProps> = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Checkbox
+        label={t('merge.removeDigitalSignature', 'Remove digital signature in the merged file?')}
+        checked={parameters.removeDigitalSignature}
+        onChange={(event) => onParameterChange('removeDigitalSignature', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+
+      <Checkbox
+        label={t('merge.generateTableOfContents', 'Generate table of contents in the merged file?')}
+        checked={parameters.generateTableOfContents}
+        onChange={(event) => onParameterChange('generateTableOfContents', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default MergeSettings;

frontend/src/core/components/tools/ocr/AdvancedOCRSettings.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Stack, Text, Checkbox } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { OCRParameters } from '@app/hooks/tools/ocr/useOCRParameters';
+
+export interface AdvancedOCRParameters {
+  advancedOptions: string[];
+}
+
+interface AdvancedOption {
+  value: string;
+  label: string;
+  isSpecial: boolean;
+}
+
+interface AdvancedOCRSettingsProps {
+  advancedOptions: string[];
+  ocrRenderType?: string;
+  onParameterChange: <K extends keyof OCRParameters>(key: K, value: OCRParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AdvancedOCRSettings: React.FC<AdvancedOCRSettingsProps> = ({
+  advancedOptions,
+  ocrRenderType = 'hocr',
+  onParameterChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+
+  // Define the advanced options available
+  const advancedOptionsData: AdvancedOption[] = [
+    { value: 'compatibilityMode', label: t('ocr.settings.compatibilityMode.label', 'Compatibility Mode'), isSpecial: true },
+    { value: 'sidecar', label: t('ocr.settings.advancedOptions.sidecar', 'Create a text file'), isSpecial: false },
+    { value: 'deskew', label: t('ocr.settings.advancedOptions.deskew', 'Deskew pages'), isSpecial: false },
+    { value: 'clean', label: t('ocr.settings.advancedOptions.clean', 'Clean input file'), isSpecial: false },
+    { value: 'cleanFinal', label: t('ocr.settings.advancedOptions.cleanFinal', 'Clean final output'), isSpecial: false },
+  ];
+
+  // Handle individual checkbox changes
+  const handleCheckboxChange = (optionValue: string, checked: boolean) => {
+    const option = advancedOptionsData.find(opt => opt.value === optionValue);
+
+    if (option?.isSpecial) {
+      // Handle special options (like compatibility mode) differently
+      if (optionValue === 'compatibilityMode') {
+        onParameterChange('ocrRenderType', checked ? 'sandwich' : 'hocr');
+      }
+    } else {
+      // Handle regular advanced options
+      const newOptions = checked
+        ? [...advancedOptions, optionValue]
+        : advancedOptions.filter(option => option !== optionValue);
+      onParameterChange('additionalOptions', newOptions);
+    }
+  };
+
+  // Check if a special option is selected
+  const isSpecialOptionSelected = (optionValue: string) => {
+    if (optionValue === 'compatibilityMode') {
+      return ocrRenderType === 'sandwich';
+    }
+    return false;
+  };
+
+  return (
+    <Stack gap="md">
+      <div>
+        <Text size="sm" fw={500} mb="md">
+          {t('ocr.settings.advancedOptions.label', 'Processing Options')}
+        </Text>
+
+        <Stack gap="sm">
+          {advancedOptionsData.map((option) => (
+            <Checkbox
+              key={option.value}
+              checked={option.isSpecial ? isSpecialOptionSelected(option.value) : advancedOptions.includes(option.value)}
+              onChange={(event) => handleCheckboxChange(option.value, event.currentTarget.checked)}
+              label={option.label}
+              disabled={disabled}
+              size="sm"
+            />
+          ))}
+        </Stack>
+      </div>
+    </Stack>
+  );
+};
+
+export default AdvancedOCRSettings;

frontend/src/core/components/tools/ocr/LanguagePicker.module.css

@@ -0,0 +1,126 @@
+/* Language Picker Component */
+.languagePicker {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center; /* Center align items vertically */
+  height: 32px;
+  border: 1px solid var(--border-default);
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* Dark mode background */
+[data-mantine-color-scheme="dark"] .languagePicker {
+  background-color: var(--mantine-color-dark-6); /* Use Mantine dark color instead of hardcoded */
+}
+
+.languagePicker:hover {
+  border-color: var(--border-strong);
+  background-color: var(--mantine-color-gray-0); /* Light gray on hover for light mode */
+}
+
+/* Dark mode hover */
+[data-mantine-color-scheme="dark"] .languagePicker:hover {
+  background-color: var(--mantine-color-dark-5); /* Use Mantine color variable */
+}
+
+.languagePicker:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.languagePickerIcon {
+  font-size: 16px;
+  color: var(--text-muted);
+  margin-left: auto;
+  display: flex;
+  align-items: center; /* Center the icon vertically */
+}
+
+.languagePickerDropdown {
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+}
+
+/* Dark mode dropdown background */
+[data-mantine-color-scheme="dark"] .languagePickerDropdown {
+  background-color: var(--mantine-color-dark-6);
+}
+
+.languagePickerOption {
+  padding: 6px 10px;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  font-size: 13px;
+  color: var(--text-primary);
+  transition: background-color 0.2s ease;
+}
+
+.languagePickerOptionWithCheckbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.languagePickerCheckbox {
+  margin-left: auto;
+}
+
+.languagePickerOption:hover {
+  background-color: var(--mantine-color-gray-0); /* Light gray on hover for light mode */
+}
+
+/* Dark mode option hover */
+[data-mantine-color-scheme="dark"] .languagePickerOption:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+
+
+
+/* Additional helper classes for the component */
+.languagePickerTarget {
+  width: 100%;
+}
+
+.languagePickerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.languagePickerText {
+  flex: 1;
+  text-align: left;
+}
+
+.languagePickerScrollArea {
+  max-height: 180px;
+  border-bottom: 1px solid var(--border-default);
+  padding-bottom: 8px;
+}
+
+.languagePickerFooter {
+  padding: 8px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.languagePickerLink {
+  color: var(--mantine-color-blue-6);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* Dark mode link */
+[data-mantine-color-scheme="dark"] .languagePickerLink {
+  color: var(--mantine-color-blue-4);
+} 

frontend/src/core/components/tools/ocr/LanguagePicker.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Loader } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { tempOcrLanguages, getAutoOcrLanguage } from '@app/utils/languageMapping';
+import DropdownListWithFooter, { DropdownItem } from '@app/components/shared/DropdownListWithFooter';
+
+export interface LanguageOption {
+  value: string;
+  label: string;
+}
+
+export interface LanguagePickerProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  label?: string;
+  languagesEndpoint?: string;
+  autoFillFromBrowserLanguage?: boolean;
+}
+
+const LanguagePicker: React.FC<LanguagePickerProps> = ({
+  value,
+  onChange,
+  placeholder = 'Select languages',
+  disabled = false,
+  label,
+  languagesEndpoint = '/api/v1/ui-data/ocr-pdf',
+  autoFillFromBrowserLanguage = true,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [availableLanguages, setAvailableLanguages] = useState<DropdownItem[]>([]);
+  const [isLoadingLanguages, setIsLoadingLanguages] = useState(true);
+  const [hasAutoFilled, setHasAutoFilled] = useState(false);
+
+  useEffect(() => {
+    // Fetch available languages from backend
+    const fetchLanguages = async () => {
+      try {
+        const response = await fetch(languagesEndpoint);
+
+
+        if (response.ok) {
+          const data: { languages: string[] } = await response.json();
+          const languages = data.languages;
+
+
+          const languageOptions = languages.map(lang => {
+            // TODO: Use actual language translations when they become available
+            // For now, use temporary English translations
+            const translatedName = tempOcrLanguages.lang[lang as keyof typeof tempOcrLanguages.lang] || lang;
+            const displayName = translatedName;
+
+            return {
+              value: lang,
+              name: displayName
+            };
+          });
+
+          setAvailableLanguages(languageOptions);
+        } else {
+          console.error('[LanguagePicker] Response not OK:', response.status, response.statusText);
+          const errorText = await response.text();
+          console.error('[LanguagePicker] Error response body:', errorText);
+        }
+      } catch (error) {
+        console.error('[LanguagePicker] Fetch failed with error:', error);
+        console.error('[LanguagePicker] Error details:', {
+          name: error instanceof Error ? error.name : 'Unknown',
+          message: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined
+        });
+      } finally {
+        setIsLoadingLanguages(false);
+      }
+    };
+
+    fetchLanguages();
+  }, [languagesEndpoint]);
+
+  // Auto-fill OCR language based on browser language when languages are loaded
+  useEffect(() => {
+    const shouldAutoFillLanguage = autoFillFromBrowserLanguage && !isLoadingLanguages && availableLanguages.length > 0 && !hasAutoFilled && value.length === 0;
+
+    if (shouldAutoFillLanguage) {
+      // Use the comprehensive language mapping from languageMapping.ts
+      const suggestedOcrLanguages = getAutoOcrLanguage(i18n.language);
+      
+      if (suggestedOcrLanguages.length > 0) {
+        // Find the first suggested language that's available in the backend
+        const matchingLanguage = availableLanguages.find(lang => 
+          suggestedOcrLanguages.includes(lang.value)
+        );
+        
+        if (matchingLanguage) {
+          onChange([matchingLanguage.value]);
+        }
+      }
+      
+      setHasAutoFilled(true);
+    }
+  }, [autoFillFromBrowserLanguage, isLoadingLanguages, availableLanguages, hasAutoFilled, value.length, i18n.language, onChange]);
+
+  if (isLoadingLanguages) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Loader size="xs" />
+        <Text size="sm">Loading available languages...</Text>
+      </div>
+    );
+  }
+
+  const footer = (
+    <>
+    <div className="flex flex-col items-center gap-1 text-center">
+      <Text size="xs" c="dimmed" className="text-center">
+        {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')}
+      </Text>
+      <Text 
+        size="xs" 
+        style={{ 
+          color: '#3b82f6', 
+          cursor: 'pointer',
+          textDecoration: 'underline',
+          textAlign: 'center'
+        }}
+        onClick={() => window.open('https://docs.stirlingpdf.com/Advanced%20Configuration/OCR', '_blank')}
+      >
+        {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')}
+      </Text>
+    </div>
+    </>
+  );
+
+  return (
+    <DropdownListWithFooter
+      value={value}
+      onChange={(newValue) => onChange(newValue as string[])}
+      items={availableLanguages}
+      placeholder={placeholder}
+      disabled={disabled}
+      label={label}
+      footer={footer}
+      multiSelect={true}
+      maxHeight={300}
+      searchable={true}
+    />
+  );
+};
+
+export default LanguagePicker; 

frontend/src/core/components/tools/ocr/OCRSettings.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Stack, Select, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import LanguagePicker from '@app/components/tools/ocr/LanguagePicker';
+import { OCRParameters } from '@app/hooks/tools/ocr/useOCRParameters';
+
+interface OCRSettingsProps {
+  parameters: OCRParameters;
+  onParameterChange: <K extends keyof OCRParameters>(key: K, value: OCRParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const OCRSettings: React.FC<OCRSettingsProps> = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+
+      <Select
+        label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
+        value={parameters.ocrType}
+        onChange={(value) => onParameterChange('ocrType', value || 'skip-text')}
+        data={[
+          { value: 'skip-text', label: t('ocr.settings.ocrMode.auto', 'Auto (skip text layers)') },
+          { value: 'force-ocr', label: t('ocr.settings.ocrMode.force', 'Force (re-OCR all, replace text)') },
+          { value: 'Normal', label: t('ocr.settings.ocrMode.strict', 'Strict (abort if text found)') },
+        ]}
+        disabled={disabled}
+      />
+
+      <Divider />
+
+      <LanguagePicker
+        value={parameters.languages || []}
+        onChange={(value) => onParameterChange('languages', value)}
+        placeholder={t('ocr.settings.languages.placeholder', 'Select languages')}
+        disabled={disabled}
+        label={t('ocr.settings.languages.label', 'Languages')}
+      />
+    </Stack>
+  );
+};
+
+export default OCRSettings;

frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.module.css

@@ -0,0 +1,50 @@
+.fileListContainer {
+  max-height: 16.25rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.fileItem {
+  border: 1px solid var(--mantine-color-gray-3);
+  border-radius: var(--mantine-radius-sm);
+  align-items: center;
+  width: 100%;
+}
+
+.fileNameContainer {
+  flex: 1;
+  min-width: 0;
+}
+
+.fileName {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 400;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.fileSize {
+  flex-shrink: 0;
+}
+
+.removeButton {
+  flex-shrink: 0;
+}
+
+.countLabel {
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.fileGroup {
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+}

frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx

@@ -0,0 +1,178 @@
+import { Stack, Text, Group, Select, SegmentedControl, NumberInput, Button, ActionIcon, Divider } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { type OverlayPdfsParameters, type OverlayMode } from '@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters';
+import LocalIcon from '@app/components/shared/LocalIcon';
+import { useFilesModalContext } from '@app/contexts/FilesModalContext';
+import styles from '@app/components/tools/overlayPdfs/OverlayPdfsSettings.module.css';
+
+interface OverlayPdfsSettingsProps {
+  parameters: OverlayPdfsParameters;
+  onParameterChange: <K extends keyof OverlayPdfsParameters>(key: K, value: OverlayPdfsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function OverlayPdfsSettings({ parameters, onParameterChange, disabled = false }: OverlayPdfsSettingsProps) {
+  const { t } = useTranslation();
+  const { openFilesModal } = useFilesModalContext();
+
+  const handleOverlayFilesChange = (files: File[]) => {
+    onParameterChange('overlayFiles', files);
+    // Reset counts to match number of files if in FixedRepeatOverlay
+    if (parameters.overlayMode === 'FixedRepeatOverlay') {
+      const nextCounts = files.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1);
+      onParameterChange('counts', nextCounts);
+    }
+  };
+
+  const handleModeChange = (mode: OverlayMode) => {
+    onParameterChange('overlayMode', mode);
+    if (mode !== 'FixedRepeatOverlay') {
+      onParameterChange('counts', []);
+    } else if (parameters.overlayFiles?.length > 0) {
+      onParameterChange('counts', parameters.overlayFiles.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1));
+    }
+  };
+
+  const handleOpenOverlayFilesModal = () => {
+    if (disabled) return;
+    openFilesModal({
+      customHandler: (files: File[]) => {
+        handleOverlayFilesChange([...(parameters.overlayFiles || []), ...files]);
+      }
+    });
+  };
+
+  return (
+    <Stack gap="md">
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.mode.label', 'Overlay Mode')}</Text>
+        <Select
+          data={[
+            { value: 'SequentialOverlay', label: t('overlay-pdfs.mode.sequential', 'Sequential Overlay') },
+            { value: 'InterleavedOverlay', label: t('overlay-pdfs.mode.interleaved', 'Interleaved Overlay') },
+            { value: 'FixedRepeatOverlay', label: t('overlay-pdfs.mode.fixedRepeat', 'Fixed Repeat Overlay') },
+          ]}
+          value={parameters.overlayMode}
+          onChange={(v) => handleModeChange((v || 'SequentialOverlay') as OverlayMode)}
+          disabled={disabled}
+        />
+      </Stack>
+
+      <Divider />
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.position.label', 'Overlay Position')}</Text>
+        <SegmentedControl
+          value={String(parameters.overlayPosition)}
+          onChange={(v) => onParameterChange('overlayPosition', (v === '1' ? 1 : 0) as 0 | 1)}
+          data={[
+            { label: t('overlay-pdfs.position.foreground', 'Foreground'), value: '0' },
+            { label: t('overlay-pdfs.position.background', 'Background'), value: '1' },
+          ]}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {parameters.overlayMode === 'FixedRepeatOverlay' && (
+        <>
+          <Divider />
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>{t('overlay-pdfs.counts.label', 'Overlay Counts')}</Text>
+            {parameters.overlayFiles?.length > 0 ? (
+              <Stack gap="xs">
+                {parameters.overlayFiles.map((_, index) => (
+                  <Group key={index} gap="xs" wrap="nowrap">
+                    <Text size="sm" className={styles.countLabel}>
+                      {t('overlay-pdfs.counts.item', 'Count for file')} {index + 1}
+                    </Text>
+                    <NumberInput
+                      min={1}
+                      step={1}
+                      value={parameters.counts[index] ?? 1}
+                      onChange={(value) => {
+                        const next = [...(parameters.counts || [])];
+                        next[index] = Number(value) || 1;
+                        onParameterChange('counts', next);
+                      }}
+                      disabled={disabled}
+                    />
+                  </Group>
+                ))}
+              </Stack>
+            ) : (
+              <Text size="sm" c="dimmed">
+                {t('overlay-pdfs.counts.noFiles', 'Add overlay files to configure counts')}
+              </Text>
+            )}
+          </Stack>
+        </>
+      )}
+
+      <Divider />
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>{t('overlay-pdfs.overlayFiles.label', 'Overlay Files')}</Text>
+        <Button
+          size="xs"
+          color="blue"
+          onClick={handleOpenOverlayFilesModal}
+          disabled={disabled}
+          leftSection={<LocalIcon icon="add" width="14" height="14" />}
+          fullWidth
+        >
+          {parameters.overlayFiles?.length > 0
+            ? t('overlay-pdfs.overlayFiles.addMore', 'Add more PDFs...')
+            : t('overlay-pdfs.overlayFiles.placeholder', 'Choose PDF(s)...')}
+        </Button>
+
+        {parameters.overlayFiles?.length > 0 && (() => {
+          return (
+            <div className={styles.fileListContainer}>
+              <Stack gap="xs">
+                {parameters.overlayFiles.map((file, index) => (
+                  <Group
+                    key={index}
+                    justify="space-between"
+                    p="xs"
+                    className={styles.fileItem}
+                  >
+                    <Group gap="xs" className={styles.fileGroup}>
+                      <div className={styles.fileNameContainer}>
+                        <div
+                          className={styles.fileName}
+                          title={file.name}
+                        >
+                          {file.name}
+                        </div>
+                      </div>
+                      <Text size="xs" c="dimmed" className={styles.fileSize}>
+                        ({(file.size / 1024).toFixed(1)} KB)
+                      </Text>
+                    </Group>
+                    <ActionIcon
+                      size="sm"
+                      variant="subtle"
+                      color="red"
+                      className={styles.removeButton}
+                      onClick={() => {
+                        const next = (parameters.overlayFiles || []).filter((_, i) => i !== index);
+                        handleOverlayFilesChange(next);
+                      }}
+                      disabled={disabled}
+                    >
+                      <LocalIcon icon="close-rounded" width="14" height="14" />
+                    </ActionIcon>
+                  </Group>
+                ))}
+              </Stack>
+            </div>
+          );
+        })()}
+      </Stack>
+
+    </Stack>
+  );
+}
+
+

frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx

@@ -0,0 +1,61 @@
+import { Divider, Select, Stack, Switch } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
+import { getPagesPerSheetOptions } from '@app/components/tools/pageLayout/constants';
+
+export default function PageLayoutSettings({
+  parameters,
+  onParameterChange,
+  disabled,
+}: {
+  parameters: PageLayoutParameters;
+  onParameterChange: <K extends keyof PageLayoutParameters>(
+    key: K,
+    value: PageLayoutParameters[K]
+  ) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const options = getPagesPerSheetOptions(t);
+  const selected = options.find((o) => o.value === parameters.pagesPerSheet) || options[0];
+
+  return (
+    <Stack gap="sm">
+      <Select
+        label={t('pageLayout.pagesPerSheet', 'Pages per sheet:')}
+        data={options.map(o => ({ value: String(o.value), label: o.label }))}
+        value={String(parameters.pagesPerSheet)}
+        onChange={(v) => onParameterChange('pagesPerSheet', Number(v))}
+        disabled={disabled}
+      />
+
+      {selected && (
+        <div
+          style={{
+            backgroundColor: 'var(--information-text-bg)',
+            color: 'var(--information-text-color)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            marginTop: '4px',
+            fontSize: '0.75rem',
+            textAlign: 'center',
+          }}
+        >
+          {selected.description}
+        </div>
+      )}
+
+      <Divider />
+
+      <Switch
+        checked={parameters.addBorder}
+        onChange={(e) => onParameterChange('addBorder', e.currentTarget.checked)}
+        label={t('pageLayout.addBorder', 'Add Borders')}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+}
+
+

frontend/src/core/components/tools/pageLayout/constants.ts

@@ -0,0 +1,37 @@
+import { TFunction } from 'i18next';
+
+export type PagesPerSheetOption = {
+  value: number;
+  label: string;
+  description: string;
+};
+
+export const getPagesPerSheetOptions = (t: TFunction): PagesPerSheetOption[] => [
+  {
+    value: 2,
+    label: '2',
+    description: t('pageLayout.desc.2', 'Place 2 pages side-by-side on a single sheet.')
+  },
+  {
+    value: 3,
+    label: '3',
+    description: t('pageLayout.desc.3', 'Place 3 pages on a single sheet in a single row.')
+  },
+  {
+    value: 4,
+    label: '4',
+    description: t('pageLayout.desc.4', 'Place 4 pages on a single sheet (2 × 2 grid).')
+  },
+  {
+    value: 9,
+    label: '9',
+    description: t('pageLayout.desc.9', 'Place 9 pages on a single sheet (3 × 3 grid).')
+  },
+  {
+    value: 16,
+    label: '16',
+    description: t('pageLayout.desc.16', 'Place 16 pages on a single sheet (4 × 4 grid).')
+  },
+];
+
+

frontend/src/core/components/tools/redact/RedactAdvancedSettings.test.tsx

@@ -0,0 +1,211 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import RedactAdvancedSettings from '@app/components/tools/redact/RedactAdvancedSettings';
+import { defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+
+// Mock useTranslation
+const mockT = vi.fn((_key: string, fallback: string) => fallback);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: mockT })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('RedactAdvancedSettings', () => {
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render all advanced settings controls', () => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.getByText('Box Colour')).toBeInTheDocument();
+    expect(screen.getByText('Custom Extra Padding')).toBeInTheDocument();
+    expect(screen.getByText('Use Regex')).toBeInTheDocument();
+    expect(screen.getByText('Whole Word Search')).toBeInTheDocument();
+    expect(screen.getByText('Convert PDF to PDF-Image (Used to remove text behind the box)')).toBeInTheDocument();
+  });
+
+  test('should display current parameter values', () => {
+    const customParameters = {
+      ...defaultParameters,
+      redactColor: '#FF0000',
+      customPadding: 0.5,
+      useRegex: true,
+      wholeWordSearch: true,
+      convertPDFToImage: false,
+    };
+
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={customParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Check color input value
+    const colorInput = screen.getByDisplayValue('#FF0000');
+    expect(colorInput).toBeInTheDocument();
+
+    // Check number input value
+    const paddingInput = screen.getByDisplayValue('0.5');
+    expect(paddingInput).toBeInTheDocument();
+
+    // Check checkbox states
+    const useRegexCheckbox = screen.getByLabelText('Use Regex');
+    const wholeWordCheckbox = screen.getByLabelText('Whole Word Search');
+    const convertCheckbox = screen.getByLabelText('Convert PDF to PDF-Image (Used to remove text behind the box)');
+
+    expect(useRegexCheckbox).toBeChecked();
+    expect(wholeWordCheckbox).toBeChecked();
+    expect(convertCheckbox).not.toBeChecked();
+  });
+
+  test('should call onParameterChange when color is changed', () => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const colorInput = screen.getByDisplayValue('#000000');
+    fireEvent.change(colorInput, { target: { value: '#FF0000' } });
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('redactColor', '#FF0000');
+  });
+
+  test('should call onParameterChange when padding is changed', () => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const paddingInput = screen.getByDisplayValue('0.1');
+    fireEvent.change(paddingInput, { target: { value: '0.5' } });
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('customPadding', 0.5);
+  });
+
+  test('should handle invalid padding values', () => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const paddingInput = screen.getByDisplayValue('0.1');
+
+    // Simulate NumberInput onChange with invalid value (empty string)
+    const numberInput = paddingInput.closest('.mantine-NumberInput-root');
+    if (numberInput) {
+      // Find the input and trigger change with empty value
+      fireEvent.change(paddingInput, { target: { value: '' } });
+
+      // The component should default to 0.1 for invalid values
+      expect(mockOnParameterChange).toHaveBeenCalledWith('customPadding', 0.1);
+    }
+  });
+
+  test.each([
+    {
+      paramName: 'useRegex' as const,
+      label: 'Use Regex',
+      initialValue: false,
+      expectedValue: true,
+    },
+    {
+      paramName: 'wholeWordSearch' as const,
+      label: 'Whole Word Search',
+      initialValue: false,
+      expectedValue: true,
+    },
+    {
+      paramName: 'convertPDFToImage' as const,
+      label: 'Convert PDF to PDF-Image (Used to remove text behind the box)',
+      initialValue: true,
+      expectedValue: false,
+    },
+  ])('should call onParameterChange when $paramName checkbox is toggled', ({ paramName, label, initialValue, expectedValue }) => {
+    const customParameters = {
+      ...defaultParameters,
+      [paramName]: initialValue,
+    };
+
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={customParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    const checkbox = screen.getByLabelText(label);
+    fireEvent.click(checkbox);
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith(paramName, expectedValue);
+  });
+
+  test.each([
+    { controlType: 'color input', getValue: () => screen.getByDisplayValue('#000000') },
+    { controlType: 'padding input', getValue: () => screen.getByDisplayValue('0.1') },
+    { controlType: 'useRegex checkbox', getValue: () => screen.getByLabelText('Use Regex') },
+    { controlType: 'wholeWordSearch checkbox', getValue: () => screen.getByLabelText('Whole Word Search') },
+    { controlType: 'convertPDFToImage checkbox', getValue: () => screen.getByLabelText('Convert PDF to PDF-Image (Used to remove text behind the box)') },
+  ])('should disable $controlType when disabled prop is true', ({ getValue }) => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+          disabled={true}
+        />
+      </TestWrapper>
+    );
+
+    const control = getValue();
+    expect(control).toBeDisabled();
+  });
+
+  test('should have correct padding input constraints', () => {
+    render(
+      <TestWrapper>
+        <RedactAdvancedSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // NumberInput in Mantine might not expose these attributes directly on the input element
+    // Instead, check that the NumberInput component is rendered with correct placeholder
+    const paddingInput = screen.getByPlaceholderText('0.1');
+    expect(paddingInput).toBeInTheDocument();
+    expect(paddingInput).toHaveDisplayValue('0.1');
+  });
+});

frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx

@@ -0,0 +1,69 @@
+import { Stack, NumberInput, ColorInput, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
+
+interface RedactAdvancedSettingsProps {
+  parameters: RedactParameters;
+  onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = false }: RedactAdvancedSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Box Color */}
+      <ColorInput
+        label={t('redact.auto.colorLabel', 'Box Colour')}
+        value={parameters.redactColor}
+        onChange={(value) => onParameterChange('redactColor', value)}
+        disabled={disabled}
+        size="sm"
+        format="hex"
+      />
+
+      {/* Box Padding */}
+      <NumberInput
+        label={t('redact.auto.customPaddingLabel', 'Custom Extra Padding')}
+        value={parameters.customPadding}
+        onChange={(value) => onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)}
+        min={0}
+        max={10}
+        step={0.1}
+        disabled={disabled}
+        size="sm"
+        placeholder="0.1"
+      />
+
+      {/* Use Regex */}
+      <Checkbox
+        label={t('redact.auto.useRegexLabel', 'Use Regex')}
+        checked={parameters.useRegex}
+        onChange={(e) => onParameterChange('useRegex', e.currentTarget.checked)}
+        disabled={disabled}
+        size="sm"
+      />
+
+      {/* Whole Word Search */}
+      <Checkbox
+        label={t('redact.auto.wholeWordSearchLabel', 'Whole Word Search')}
+        checked={parameters.wholeWordSearch}
+        onChange={(e) => onParameterChange('wholeWordSearch', e.currentTarget.checked)}
+        disabled={disabled}
+        size="sm"
+      />
+
+      {/* Convert PDF to PDF-Image */}
+      <Checkbox
+        label={t('redact.auto.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')}
+        checked={parameters.convertPDFToImage}
+        onChange={(e) => onParameterChange('convertPDFToImage', e.currentTarget.checked)}
+        disabled={disabled}
+        size="sm"
+      />
+    </Stack>
+  );
+};
+
+export default RedactAdvancedSettings;

frontend/src/core/components/tools/redact/RedactModeSelector.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+import { RedactMode } from '@app/hooks/tools/redact/useRedactParameters';
+import ButtonSelector from '@app/components/shared/ButtonSelector';
+
+interface RedactModeSelectorProps {
+  mode: RedactMode;
+  onModeChange: (mode: RedactMode) => void;
+  disabled?: boolean;
+}
+
+export default function RedactModeSelector({ mode, onModeChange, disabled }: RedactModeSelectorProps) {
+  const { t } = useTranslation();
+
+  return (
+    <ButtonSelector
+      label={t('redact.modeSelector.mode', 'Mode')}
+      value={mode}
+      onChange={onModeChange}
+      options={[
+        {
+          value: 'automatic' as const,
+          label: t('redact.modeSelector.automatic', 'Automatic'),
+        },
+        {
+          value: 'manual' as const,
+          label: t('redact.modeSelector.manual', 'Manual'),
+          disabled: true, // Keep manual mode disabled until implemented
+        },
+      ]}
+      disabled={disabled}
+    />
+  );
+}

frontend/src/core/components/tools/redact/RedactSingleStepSettings.test.tsx

@@ -0,0 +1,183 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import RedactSingleStepSettings from '@app/components/tools/redact/RedactSingleStepSettings';
+import { defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+
+// Mock useTranslation
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) })
+}));
+
+// Wrapper component to provide Mantine context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);
+
+describe('RedactSingleStepSettings', () => {
+  const mockOnParameterChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should render mode selector', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.getByText('Mode')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Automatic' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Manual' })).toBeInTheDocument();
+  });
+
+  test('should render automatic mode settings when mode is automatic', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Default mode is automatic, so these should be visible
+    expect(screen.getByText('Words to Redact')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a word')).toBeInTheDocument();
+    expect(screen.getByText('Box Colour')).toBeInTheDocument();
+    expect(screen.getByText('Use Regex')).toBeInTheDocument();
+  });
+
+  test('should render manual mode settings when mode is manual', () => {
+    const manualParameters = {
+      ...defaultParameters,
+      mode: 'manual' as const,
+    };
+
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={manualParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Manual mode should show placeholder text
+    expect(screen.getByText('Manual redaction interface will be available here when implemented.')).toBeInTheDocument();
+
+    // Automatic mode settings should not be visible
+    expect(screen.queryByText('Words to Redact')).not.toBeInTheDocument();
+  });
+
+  test('should pass through parameter changes from automatic settings', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Test adding a word
+    const input = screen.getByPlaceholderText('Enter a word');
+    const addButton = screen.getByRole('button', { name: '+ Add' });
+
+    fireEvent.change(input, { target: { value: 'TestWord' } });
+    fireEvent.click(addButton);
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('wordsToRedact', ['TestWord']);
+  });
+
+  test('should pass through parameter changes from advanced settings', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Test changing color
+    const colorInput = screen.getByDisplayValue('#000000');
+    fireEvent.change(colorInput, { target: { value: '#FF0000' } });
+
+    expect(mockOnParameterChange).toHaveBeenCalledWith('redactColor', '#FF0000');
+  });
+
+  test('should disable all controls when disabled prop is true', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+          disabled={true}
+        />
+      </TestWrapper>
+    );
+
+    // Mode selector buttons should be disabled
+    expect(screen.getByRole('button', { name: 'Automatic' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Manual' })).toBeDisabled();
+
+    // Automatic settings controls should be disabled
+    expect(screen.getByPlaceholderText('Enter a word')).toBeDisabled();
+    expect(screen.getByRole('button', { name: '+ Add' })).toBeDisabled();
+    expect(screen.getByDisplayValue('#000000')).toBeDisabled();
+  });
+
+  test('should show current parameter values in automatic mode', () => {
+    const customParameters = {
+      ...defaultParameters,
+      wordsToRedact: ['Word1', 'Word2'],
+      redactColor: '#FF0000',
+      useRegex: true,
+      customPadding: 0.5,
+    };
+
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={customParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Check that word tags are displayed
+    expect(screen.getByText('Word1')).toBeInTheDocument();
+    expect(screen.getByText('Word2')).toBeInTheDocument();
+
+    // Check that color is displayed
+    expect(screen.getByDisplayValue('#FF0000')).toBeInTheDocument();
+
+    // Check that regex checkbox is checked
+    const useRegexCheckbox = screen.getByLabelText('Use Regex');
+    expect(useRegexCheckbox).toBeChecked();
+
+    // Check that padding value is displayed
+    expect(screen.getByDisplayValue('0.5')).toBeInTheDocument();
+  });
+
+  test('should maintain consistent spacing and layout', () => {
+    render(
+      <TestWrapper>
+        <RedactSingleStepSettings
+          parameters={defaultParameters}
+          onParameterChange={mockOnParameterChange}
+        />
+      </TestWrapper>
+    );
+
+    // Check that the Stack container exists
+    const container = screen.getByText('Mode').closest('.mantine-Stack-root');
+    expect(container).toBeInTheDocument();
+  });
+});

frontend/src/core/components/tools/redact/RedactSingleStepSettings.tsx

@@ -0,0 +1,61 @@
+import { Stack, Divider } from "@mantine/core";
+import { RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
+import RedactModeSelector from "@app/components/tools/redact/RedactModeSelector";
+import WordsToRedactInput from "@app/components/tools/redact/WordsToRedactInput";
+import RedactAdvancedSettings from "@app/components/tools/redact/RedactAdvancedSettings";
+
+interface RedactSingleStepSettingsProps {
+  parameters: RedactParameters;
+  onParameterChange: <K extends keyof RedactParameters>(key: K, value: RedactParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const RedactSingleStepSettings = ({ parameters, onParameterChange, disabled = false }: RedactSingleStepSettingsProps) => {
+  return (
+    <Stack gap="md">
+      {/* Mode Selection */}
+      <RedactModeSelector
+        mode={parameters.mode}
+        onModeChange={(mode) => onParameterChange('mode', mode)}
+        disabled={disabled}
+      />
+
+      {/* Automatic Mode Settings */}
+      {parameters.mode === 'automatic' && (
+        <>
+          <Divider />
+
+          {/* Words to Redact */}
+          <WordsToRedactInput
+            wordsToRedact={parameters.wordsToRedact}
+            onWordsChange={(words) => onParameterChange('wordsToRedact', words)}
+            disabled={disabled}
+          />
+
+          <Divider />
+
+          {/* Advanced Settings */}
+          <RedactAdvancedSettings
+            parameters={parameters}
+            onParameterChange={onParameterChange}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+      {/* Manual Mode Placeholder */}
+      {parameters.mode === 'manual' && (
+        <>
+          <Divider />
+          <Stack gap="md">
+            <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
+              Manual redaction interface will be available here when implemented.
+            </div>
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default RedactSingleStepSettings;