From f1cb8ce5b37ca5764e2bf6f37b441d7b064b0600 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Tue, 19 Aug 2025 18:00:50 +0100
Subject: [PATCH 01/11] V2 Repair tool (#4234)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../public/locales/en-GB/translation.json     | 13 ++-
 .../public/locales/en-US/translation.json     | 13 ++-
 .../tools/repair/RepairSettings.tsx           | 27 +++++++
 .../src/data/useTranslatedToolRegistry.tsx    |  7 +-
 .../hooks/tools/repair/useRepairOperation.ts  | 23 ++++++
 .../hooks/tools/repair/useRepairParameters.ts | 20 +++++
 .../hooks/tools/shared/useBaseParameters.ts   | 46 +++++++++++
 frontend/src/tools/Repair.tsx                 | 80 +++++++++++++++++++
 frontend/src/types/fileContext.ts             |  3 +-
 frontend/src/types/parameters.ts              |  7 ++
 10 files changed, 234 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/tools/repair/RepairSettings.tsx
 create mode 100644 frontend/src/hooks/tools/repair/useRepairOperation.ts
 create mode 100644 frontend/src/hooks/tools/repair/useRepairParameters.ts
 create mode 100644 frontend/src/hooks/tools/shared/useBaseParameters.ts
 create mode 100644 frontend/src/tools/Repair.tsx
 create mode 100644 frontend/src/types/parameters.ts

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 7d01af4f5..13d686f88 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1188,7 +1188,18 @@
     "tags": "fix,restore,correction,recover",
     "title": "Repair",
     "header": "Repair PDFs",
-    "submit": "Repair"
+    "submit": "Repair",
+    "description": "This tool will attempt to repair corrupted or damaged PDF files. No additional settings are required.",
+    "filenamePrefix": "repaired",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred whilst repairing the PDF."
+    },
+    "results": {
+      "title": "Repair Results"
+    }
   },
   "removeBlanks": {
     "tags": "cleanup,streamline,non-content,organize",
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index af7188944..eb5d2e04e 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -915,7 +915,18 @@
     "tags": "fix,restore,correction,recover",
     "title": "Repair",
     "header": "Repair PDFs",
-    "submit": "Repair"
+    "submit": "Repair",
+    "description": "This tool will attempt to repair corrupted or damaged PDF files. No additional settings are required.",
+    "filenamePrefix": "repaired",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred while repairing the PDF."
+    },
+    "results": {
+      "title": "Repair Results"
+    }
   },
   "removeBlanks": {
     "tags": "cleanup,streamline,non-content,organize",
diff --git a/frontend/src/components/tools/repair/RepairSettings.tsx b/frontend/src/components/tools/repair/RepairSettings.tsx
new file mode 100644
index 000000000..15078defb
--- /dev/null
+++ b/frontend/src/components/tools/repair/RepairSettings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RepairParameters } from '../../../hooks/tools/repair/useRepairParameters';
+
+interface RepairSettingsProps {
+  parameters: RepairParameters;
+  onParameterChange: <K extends keyof RepairParameters>(parameter: K, value: RepairParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const RepairSettings: React.FC<RepairSettingsProps> = ({ 
+  parameters, 
+  onParameterChange, 
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="repair-settings">
+      <p className="text-muted">
+        {t('repair.description', 'This tool will attempt to repair corrupted or damaged PDF files. No additional settings are required.')}
+      </p>
+    </div>
+  );
+};
+
+export default RepairSettings;
\ No newline at end of file
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 5f6460217..1a53cf651 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -10,6 +10,7 @@ import ChangePermissions from '../tools/ChangePermissions';
 import RemovePassword from '../tools/RemovePassword';
 import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
+import Repair from '../tools/Repair';
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
@@ -384,11 +385,13 @@ export function useFlatToolRegistry(): ToolRegistry {
     "repair": {
         icon: <span className="material-symbols-rounded">build</span>,
         name: t("home.repair.title", "Repair"),
-        component: null,
+        component: Repair,
         view: "format",
         description: t("home.repair.desc", "Repair corrupted or damaged PDF files"),
         category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        subcategory: SubcategoryId.ADVANCED_FORMATTING,
+        maxFiles: -1,
+        endpoints: ["repair"]
     },
     "detect-split-scanned-photos": {
         icon: <span className="material-symbols-rounded">scanner</span>,
diff --git a/frontend/src/hooks/tools/repair/useRepairOperation.ts b/frontend/src/hooks/tools/repair/useRepairOperation.ts
new file mode 100644
index 000000000..b547bbd8f
--- /dev/null
+++ b/frontend/src/hooks/tools/repair/useRepairOperation.ts
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { RepairParameters } from './useRepairParameters';
+
+export const useRepairOperation = () => {
+  const { t } = useTranslation();
+
+  const buildFormData = (parameters: RepairParameters, file: File): FormData => {
+    const formData = new FormData();
+    formData.append("fileInput", file);
+    return formData;
+  };
+
+  return useToolOperation<RepairParameters>({
+    operationType: 'repair',
+    endpoint: '/api/v1/misc/repair',
+    buildFormData,
+    filePrefix: t('repair.filenamePrefix', 'repaired') + '_',
+    multiFileEndpoint: false,
+    getErrorMessage: createStandardErrorHandler(t('repair.error.failed', 'An error occurred while repairing the PDF.'))
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/repair/useRepairParameters.ts b/frontend/src/hooks/tools/repair/useRepairParameters.ts
new file mode 100644
index 000000000..5c924de93
--- /dev/null
+++ b/frontend/src/hooks/tools/repair/useRepairParameters.ts
@@ -0,0 +1,20 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+
+export interface RepairParameters extends BaseParameters {
+  // Extends BaseParameters - ready for future parameter additions if needed
+}
+
+export const defaultParameters: RepairParameters = {
+  // No parameters needed
+};
+
+export type RepairParametersHook = BaseParametersHook<RepairParameters>;
+
+export const useRepairParameters = (): RepairParametersHook => {
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'repair',
+    // validateFn: optional custom validation if needed in future
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/shared/useBaseParameters.ts b/frontend/src/hooks/tools/shared/useBaseParameters.ts
new file mode 100644
index 000000000..af244e6f9
--- /dev/null
+++ b/frontend/src/hooks/tools/shared/useBaseParameters.ts
@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react';
+
+export interface BaseParametersHook<T> {
+  parameters: T;
+  updateParameter: <K extends keyof T>(parameter: K, value: T[K]) => void;
+  resetParameters: () => void;
+  validateParameters: () => boolean;
+  getEndpointName: () => string;
+}
+
+export interface BaseParametersConfig<T> {
+  defaultParameters: T;
+  endpointName: string;
+  validateFn?: (params: T) => boolean;
+}
+
+export function useBaseParameters<T>(config: BaseParametersConfig<T>): BaseParametersHook<T> {
+  const [parameters, setParameters] = useState<T>(config.defaultParameters);
+
+  const updateParameter = useCallback(<K extends keyof T>(parameter: K, value: T[K]) => {
+    setParameters(prev => ({
+      ...prev,
+      [parameter]: value,
+    }));
+  }, []);
+
+  const resetParameters = useCallback(() => {
+    setParameters(config.defaultParameters);
+  }, [config.defaultParameters]);
+
+  const validateParameters = useCallback(() => {
+    return config.validateFn ? config.validateFn(parameters) : true;
+  }, [parameters, config.validateFn]);
+
+  const getEndpointName = useCallback(() => {
+    return config.endpointName;
+  }, [config.endpointName]);
+
+  return {
+    parameters,
+    updateParameter,
+    resetParameters,
+    validateParameters,
+    getEndpointName,
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/tools/Repair.tsx b/frontend/src/tools/Repair.tsx
new file mode 100644
index 000000000..a3b63f591
--- /dev/null
+++ b/frontend/src/tools/Repair.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+
+import { useRepairParameters } from "../hooks/tools/repair/useRepairParameters";
+import { useRepairOperation } from "../hooks/tools/repair/useRepairOperation";
+import { BaseToolProps } from "../types/tool";
+
+const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const repairParams = useRepairParameters();
+  const repairOperation = useRepairOperation();
+
+  // Endpoint validation
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(repairParams.getEndpointName());
+
+  useEffect(() => {
+    repairOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [repairParams.parameters]);
+
+  const handleRepair = async () => {
+    try {
+      await repairOperation.executeOperation(repairParams.parameters, selectedFiles);
+      if (repairOperation.files && onComplete) {
+        onComplete(repairOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : t("repair.error.failed", "Repair operation failed"));
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem("previousMode", "repair");
+    setCurrentMode("viewer");
+  };
+
+  const handleSettingsReset = () => {
+    repairOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode("repair");
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = repairOperation.files.length > 0 || repairOperation.downloadUrl !== null;
+
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles || hasResults,
+      placeholder: t("repair.files.placeholder", "Select a PDF file in the main view to get started"),
+    },
+    steps: [],
+    executeButton: {
+      text: t("repair.submit", "Repair PDF"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleRepair,
+      disabled: !repairParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: repairOperation,
+      title: t("repair.results.title", "Repair Results"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
+
+export default Repair;
\ No newline at end of file
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index 0b5552c4f..1c513b523 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -18,7 +18,8 @@ export type ModeType =
   | 'addPassword'
   | 'changePermissions'
   | 'watermark'
-  | 'removePassword';
+  | 'removePassword'
+  | 'repair';
 
 export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
 
diff --git a/frontend/src/types/parameters.ts b/frontend/src/types/parameters.ts
new file mode 100644
index 000000000..6f8856a8b
--- /dev/null
+++ b/frontend/src/types/parameters.ts
@@ -0,0 +1,7 @@
+// Base parameter interfaces for reusable patterns
+
+export interface BaseParameters {
+  // Base interface that all tool parameters should extend
+  // Provides a foundation for adding common properties across all tools
+  // Examples of future additions: userId, sessionId, commonFlags, etc.
+}
\ No newline at end of file

From d74c3f4598860ed447ec682cd23edfc0acc01e81 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 20 Aug 2025 11:30:57 +0100
Subject: [PATCH 02/11] V2 remove cert (#4239)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../public/locales/en-GB/translation.json     | 13 ++-
 .../public/locales/en-US/translation.json     | 13 ++-
 .../RemoveCertificateSignSettings.tsx         | 27 +++++++
 .../src/data/useTranslatedToolRegistry.tsx    |  7 +-
 .../useRemoveCertificateSignOperation.ts      | 23 ++++++
 .../useRemoveCertificateSignParameters.ts     | 19 +++++
 frontend/src/tools/RemoveCertificateSign.tsx  | 80 +++++++++++++++++++
 frontend/src/types/fileContext.ts             |  3 +-
 8 files changed, 180 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
 create mode 100644 frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
 create mode 100644 frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
 create mode 100644 frontend/src/tools/RemoveCertificateSign.tsx

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 13d686f88..a9d38b142 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1268,7 +1268,18 @@
     "title": "Remove Certificate Signature",
     "header": "Remove the digital certificate from the PDF",
     "selectPDF": "Select a PDF file:",
-    "submit": "Remove Signature"
+    "submit": "Remove Signature",
+    "description": "This tool will remove digital certificate signatures from your PDF document.",
+    "filenamePrefix": "unsigned",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred whilst removing certificate signatures."
+    },
+    "results": {
+      "title": "Certificate Removal Results"
+    }
   },
   "pageLayout": {
     "tags": "merge,composite,single-view,organize",
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index eb5d2e04e..43fbd72f1 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -995,7 +995,18 @@
     "title": "Remove Certificate Signature",
     "header": "Remove the digital certificate from the PDF",
     "selectPDF": "Select a PDF file:",
-    "submit": "Remove Signature"
+    "submit": "Remove Signature",
+    "description": "This tool will remove digital certificate signatures from your PDF document.",
+    "filenamePrefix": "unsigned",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred while removing certificate signatures."
+    },
+    "results": {
+      "title": "Certificate Removal Results"
+    }
   },
   "pageLayout": {
     "tags": "merge,composite,single-view,organize",
diff --git a/frontend/src/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx b/frontend/src/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
new file mode 100644
index 000000000..f34e3f2e6
--- /dev/null
+++ b/frontend/src/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RemoveCertificateSignParameters } from '../../../hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters';
+
+interface RemoveCertificateSignSettingsProps {
+  parameters: RemoveCertificateSignParameters;
+  onParameterChange: <K extends keyof RemoveCertificateSignParameters>(parameter: K, value: RemoveCertificateSignParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const RemoveCertificateSignSettings: React.FC<RemoveCertificateSignSettingsProps> = ({ 
+  parameters, 
+  onParameterChange, // Unused - kept for interface consistency and future extensibility
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="remove-certificate-sign-settings">
+      <p className="text-muted">
+        {t('removeCertSign.description', 'This tool will remove digital certificate signatures from your PDF document.')}
+      </p>
+    </div>
+  );
+};
+
+export default RemoveCertificateSignSettings;
\ No newline at end of file
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 1a53cf651..364c54211 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -11,6 +11,7 @@ import RemovePassword from '../tools/RemovePassword';
 import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
+import RemoveCertificateSign from '../tools/RemoveCertificateSign';
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
@@ -323,11 +324,13 @@ export function useFlatToolRegistry(): ToolRegistry {
     "remove-certificate-sign": {
         icon: <span className="material-symbols-rounded">remove_moderator</span>,
         name: t("home.removeCertSign.title", "Remove Certificate Signatures"),
-        component: null,
+        component: RemoveCertificateSign,
         view: "security",
         description: t("home.removeCertSign.desc", "Remove digital signatures from PDF documents"),
         category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        subcategory: SubcategoryId.REMOVAL,
+        maxFiles: -1,
+        endpoints: ["remove-certificate-sign"]
     },
 
 
diff --git a/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
new file mode 100644
index 000000000..5987944ec
--- /dev/null
+++ b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { RemoveCertificateSignParameters } from './useRemoveCertificateSignParameters';
+
+export const useRemoveCertificateSignOperation = () => {
+  const { t } = useTranslation();
+
+  const buildFormData = (parameters: RemoveCertificateSignParameters, file: File): FormData => {
+    const formData = new FormData();
+    formData.append("fileInput", file);
+    return formData;
+  };
+
+  return useToolOperation<RemoveCertificateSignParameters>({
+    operationType: 'removeCertificateSign',
+    endpoint: '/api/v1/security/remove-cert-sign',
+    buildFormData,
+    filePrefix: t('removeCertSign.filenamePrefix', 'unsigned') + '_',
+    multiFileEndpoint: false,
+    getErrorMessage: createStandardErrorHandler(t('removeCertSign.error.failed', 'An error occurred while removing certificate signatures.'))
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
new file mode 100644
index 000000000..59903ccfc
--- /dev/null
+++ b/frontend/src/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
@@ -0,0 +1,19 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+
+export interface RemoveCertificateSignParameters extends BaseParameters {
+  // Extends BaseParameters - ready for future parameter additions if needed
+}
+
+export const defaultParameters: RemoveCertificateSignParameters = {
+  // No parameters needed
+};
+
+export type RemoveCertificateSignParametersHook = BaseParametersHook<RemoveCertificateSignParameters>;
+
+export const useRemoveCertificateSignParameters = (): RemoveCertificateSignParametersHook => {
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'remove-certificate-sign',
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/tools/RemoveCertificateSign.tsx b/frontend/src/tools/RemoveCertificateSign.tsx
new file mode 100644
index 000000000..e33675625
--- /dev/null
+++ b/frontend/src/tools/RemoveCertificateSign.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+
+import { useRemoveCertificateSignParameters } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters";
+import { useRemoveCertificateSignOperation } from "../hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation";
+import { BaseToolProps } from "../types/tool";
+
+const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const removeCertificateSignParams = useRemoveCertificateSignParameters();
+  const removeCertificateSignOperation = useRemoveCertificateSignOperation();
+
+  // Endpoint validation
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(removeCertificateSignParams.getEndpointName());
+
+  useEffect(() => {
+    removeCertificateSignOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [removeCertificateSignParams.parameters]);
+
+  const handleRemoveSignature = async () => {
+    try {
+      await removeCertificateSignOperation.executeOperation(removeCertificateSignParams.parameters, selectedFiles);
+      if (removeCertificateSignOperation.files && onComplete) {
+        onComplete(removeCertificateSignOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : t("removeCertSign.error.failed", "Remove certificate signature operation failed"));
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem("previousMode", "removeCertificateSign");
+    setCurrentMode("viewer");
+  };
+
+  const handleSettingsReset = () => {
+    removeCertificateSignOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode("removeCertificateSign");
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = removeCertificateSignOperation.files.length > 0 || removeCertificateSignOperation.downloadUrl !== null;
+
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles || hasResults,
+      placeholder: t("removeCertSign.files.placeholder", "Select a PDF file in the main view to get started"),
+    },
+    steps: [],
+    executeButton: {
+      text: t("removeCertSign.submit", "Remove Signature"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleRemoveSignature,
+      disabled: !removeCertificateSignParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: removeCertificateSignOperation,
+      title: t("removeCertSign.results.title", "Certificate Removal Results"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
+
+export default RemoveCertificateSign;
\ No newline at end of file
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index 1c513b523..b868bf0e6 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -19,7 +19,8 @@ export type ModeType =
   | 'changePermissions'
   | 'watermark'
   | 'removePassword'
-  | 'repair';
+  | 'repair'
+  | 'removeCertificateSign';
 
 export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
 

From 857b2b5c53cc1e3bf1b4a9bf8ece6d130bdceaa3 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 20 Aug 2025 11:34:28 +0100
Subject: [PATCH 03/11] V2 Unlock forms (#4237)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../public/locales/en-GB/translation.json     | 13 ++-
 .../public/locales/en-US/translation.json     | 13 ++-
 .../unlockPdfForms/UnlockPdfFormsSettings.tsx | 27 +++++++
 .../src/data/useTranslatedToolRegistry.tsx    |  8 +-
 .../useUnlockPdfFormsOperation.ts             | 23 ++++++
 .../useUnlockPdfFormsParameters.ts            | 19 +++++
 frontend/src/tools/UnlockPdfForms.tsx         | 80 +++++++++++++++++++
 frontend/src/types/fileContext.ts             |  1 +
 8 files changed, 180 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
 create mode 100644 frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
 create mode 100644 frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
 create mode 100644 frontend/src/tools/UnlockPdfForms.tsx

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index a9d38b142..e3bb3c0c6 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1020,7 +1020,18 @@
     "tags": "remove,delete,form,field,readonly",
     "title": "Remove Read-Only from Form Fields",
     "header": "Unlock PDF Forms",
-    "submit": "Remove"
+    "submit": "Unlock Forms",
+    "description": "This tool will remove read-only restrictions from PDF form fields, making them editable and fillable.",
+    "filenamePrefix": "unlocked_forms",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred whilst unlocking PDF forms."
+    },
+    "results": {
+      "title": "Unlocked Forms Results"
+    }
   },
   "changeMetadata": {
     "tags": "Title,author,date,creation,time,publisher,producer,stats",
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index 43fbd72f1..541c19fb5 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -747,7 +747,18 @@
     "tags": "remove,delete,form,field,readonly",
     "title": "Remove Read-Only from Form Fields",
     "header": "Unlock PDF Forms",
-    "submit": "Remove"
+    "submit": "Unlock Forms",
+    "description": "This tool will remove read-only restrictions from PDF form fields, making them editable and fillable.",
+    "filenamePrefix": "unlocked_forms",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred while unlocking PDF forms."
+    },
+    "results": {
+      "title": "Unlocked Forms Results"
+    }
   },
   "changeMetadata": {
     "tags": "Title,author,date,creation,time,publisher,producer,stats",
diff --git a/frontend/src/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx b/frontend/src/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
new file mode 100644
index 000000000..cc8697d7a
--- /dev/null
+++ b/frontend/src/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UnlockPdfFormsParameters } from '../../../hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters';
+
+interface UnlockPdfFormsSettingsProps {
+  parameters: UnlockPdfFormsParameters;
+  onParameterChange: <K extends keyof UnlockPdfFormsParameters>(parameter: K, value: UnlockPdfFormsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const UnlockPdfFormsSettings: React.FC<UnlockPdfFormsSettingsProps> = ({ 
+  parameters, 
+  onParameterChange, // Unused - kept for interface consistency and future extensibility
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="unlock-pdf-forms-settings">
+      <p className="text-muted">
+        {t('unlockPDFForms.description', 'This tool will remove read-only restrictions from PDF form fields, making them editable and fillable.')}
+      </p>
+    </div>
+  );
+};
+
+export default UnlockPdfFormsSettings;
\ No newline at end of file
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 364c54211..db6aca089 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -11,8 +11,10 @@ import RemovePassword from '../tools/RemovePassword';
 import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
+import UnlockPdfForms from '../tools/UnlockPdfForms';
 import RemoveCertificateSign from '../tools/RemoveCertificateSign';
 
+
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
     const { t } = useTranslation();
@@ -96,11 +98,13 @@ export function useFlatToolRegistry(): ToolRegistry {
     "unlock-pdf-forms": {
         icon: <span className="material-symbols-rounded">preview_off</span>,
         name: t("home.unlockPDFForms.title", "Unlock PDF Forms"),
-        component: null,
+        component: UnlockPdfForms,
         view: "security",
         description: t("home.unlockPDFForms.desc", "Remove read-only property of form fields in a PDF document."),
         category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        maxFiles: -1,
+        endpoints: ["unlock-pdf-forms"]
     },
     "manage-certificates": {
         icon: <span className="material-symbols-rounded">license</span>,
diff --git a/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
new file mode 100644
index 000000000..3b648762b
--- /dev/null
+++ b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { UnlockPdfFormsParameters } from './useUnlockPdfFormsParameters';
+
+export const useUnlockPdfFormsOperation = () => {
+  const { t } = useTranslation();
+
+  const buildFormData = (parameters: UnlockPdfFormsParameters, file: File): FormData => {
+    const formData = new FormData();
+    formData.append("fileInput", file);
+    return formData;
+  };
+
+  return useToolOperation<UnlockPdfFormsParameters>({
+    operationType: 'unlockPdfForms',
+    endpoint: '/api/v1/misc/unlock-pdf-forms',
+    buildFormData,
+    filePrefix: t('unlockPDFForms.filenamePrefix', 'unlocked_forms') + '_',
+    multiFileEndpoint: false,
+    getErrorMessage: createStandardErrorHandler(t('unlockPDFForms.error.failed', 'An error occurred while unlocking PDF forms.'))
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
new file mode 100644
index 000000000..ad2536643
--- /dev/null
+++ b/frontend/src/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
@@ -0,0 +1,19 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+
+export interface UnlockPdfFormsParameters extends BaseParameters {
+  // Extends BaseParameters - ready for future parameter additions if needed
+}
+
+export const defaultParameters: UnlockPdfFormsParameters = {
+  // No parameters needed
+};
+
+export type UnlockPdfFormsParametersHook = BaseParametersHook<UnlockPdfFormsParameters>;
+
+export const useUnlockPdfFormsParameters = (): UnlockPdfFormsParametersHook => {
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'unlock-pdf-forms',
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/tools/UnlockPdfForms.tsx b/frontend/src/tools/UnlockPdfForms.tsx
new file mode 100644
index 000000000..b8aee7894
--- /dev/null
+++ b/frontend/src/tools/UnlockPdfForms.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+
+import { useUnlockPdfFormsParameters } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters";
+import { useUnlockPdfFormsOperation } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation";
+import { BaseToolProps } from "../types/tool";
+
+const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const unlockPdfFormsParams = useUnlockPdfFormsParameters();
+  const unlockPdfFormsOperation = useUnlockPdfFormsOperation();
+
+  // Endpoint validation
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(unlockPdfFormsParams.getEndpointName());
+
+  useEffect(() => {
+    unlockPdfFormsOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [unlockPdfFormsParams.parameters]);
+
+  const handleUnlock = async () => {
+    try {
+      await unlockPdfFormsOperation.executeOperation(unlockPdfFormsParams.parameters, selectedFiles);
+      if (unlockPdfFormsOperation.files && onComplete) {
+        onComplete(unlockPdfFormsOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : t("unlockPDFForms.error.failed", "Unlock PDF forms operation failed"));
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem("previousMode", "unlockPdfForms");
+    setCurrentMode("viewer");
+  };
+
+  const handleSettingsReset = () => {
+    unlockPdfFormsOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode("unlockPdfForms");
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = unlockPdfFormsOperation.files.length > 0 || unlockPdfFormsOperation.downloadUrl !== null;
+
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles || hasResults,
+      placeholder: t("unlockPDFForms.files.placeholder", "Select a PDF file in the main view to get started"),
+    },
+    steps: [],
+    executeButton: {
+      text: t("unlockPDFForms.submit", "Unlock Forms"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleUnlock,
+      disabled: !unlockPdfFormsParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: unlockPdfFormsOperation,
+      title: t("unlockPDFForms.results.title", "Unlocked Forms Results"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
+
+export default UnlockPdfForms;
\ No newline at end of file
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index b868bf0e6..6e2a2ef93 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -20,6 +20,7 @@ export type ModeType =
   | 'watermark'
   | 'removePassword'
   | 'repair'
+  | 'unlockPdfForms'
   | 'removeCertificateSign';
 
 export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';

From d1cb3f0b300bbedbf786f82fbad6171b4e60f635 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 20 Aug 2025 11:38:41 +0100
Subject: [PATCH 04/11] V2 PDF to large page (#4236)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../public/locales/en-GB/translation.json     | 13 ++-
 .../public/locales/en-US/translation.json     | 13 ++-
 .../SingleLargePageSettings.tsx               | 27 +++++++
 .../src/data/useTranslatedToolRegistry.tsx    |  8 +-
 .../useSingleLargePageOperation.ts            | 23 ++++++
 .../useSingleLargePageParameters.ts           | 19 +++++
 frontend/src/tools/SingleLargePage.tsx        | 80 +++++++++++++++++++
 frontend/src/types/fileContext.ts             |  1 +
 8 files changed, 180 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/tools/singleLargePage/SingleLargePageSettings.tsx
 create mode 100644 frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
 create mode 100644 frontend/src/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
 create mode 100644 frontend/src/tools/SingleLargePage.tsx

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e3bb3c0c6..333f6ca8b 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1618,7 +1618,18 @@
   "pdfToSinglePage": {
     "title": "PDF To Single Page",
     "header": "PDF To Single Page",
-    "submit": "Convert To Single Page"
+    "submit": "Convert To Single Page",
+    "description": "This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.",
+    "filenamePrefix": "single_page",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred whilst converting to single page."
+    },
+    "results": {
+      "title": "Single Page Results"
+    }
   },
   "pageExtracter": {
     "title": "Extract Pages",
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index 541c19fb5..0638d78d3 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -1345,7 +1345,18 @@
   "pdfToSinglePage": {
     "title": "PDF To Single Page",
     "header": "PDF To Single Page",
-    "submit": "Convert To Single Page"
+    "submit": "Convert To Single Page",
+    "description": "This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.",
+    "filenamePrefix": "single_page",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "error": {
+      "failed": "An error occurred while converting to single page."
+    },
+    "results": {
+      "title": "Single Page Results"
+    }
   },
   "pageExtracter": {
     "title": "Extract Pages",
diff --git a/frontend/src/components/tools/singleLargePage/SingleLargePageSettings.tsx b/frontend/src/components/tools/singleLargePage/SingleLargePageSettings.tsx
new file mode 100644
index 000000000..87dfef926
--- /dev/null
+++ b/frontend/src/components/tools/singleLargePage/SingleLargePageSettings.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SingleLargePageParameters } from '../../../hooks/tools/singleLargePage/useSingleLargePageParameters';
+
+interface SingleLargePageSettingsProps {
+  parameters: SingleLargePageParameters;
+  onParameterChange: <K extends keyof SingleLargePageParameters>(parameter: K, value: SingleLargePageParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const SingleLargePageSettings: React.FC<SingleLargePageSettingsProps> = ({ 
+  parameters, 
+  onParameterChange, 
+  disabled = false 
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="single-large-page-settings">
+      <p className="text-muted">
+        {t('pdfToSinglePage.description', 'This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.')}
+      </p>
+    </div>
+  );
+};
+
+export default SingleLargePageSettings;
\ No newline at end of file
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index db6aca089..359cf6d35 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -11,10 +11,12 @@ import RemovePassword from '../tools/RemovePassword';
 import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
+import SingleLargePage from '../tools/SingleLargePage';
 import UnlockPdfForms from '../tools/UnlockPdfForms';
 import RemoveCertificateSign from '../tools/RemoveCertificateSign';
 
 
+
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
     const { t } = useTranslation();
@@ -236,11 +238,13 @@ export function useFlatToolRegistry(): ToolRegistry {
     "single-large-page": {
         icon: <span className="material-symbols-rounded">looks_one</span>,
         name: t("home.PdfToSinglePage.title", "PDF to Single Large Page"),
-        component: null,
+        component: SingleLargePage,
         view: "format",
         description: t("home.PdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
         category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        subcategory: SubcategoryId.PAGE_FORMATTING,
+        maxFiles: -1,
+        endpoints: ["pdf-to-single-page"]
     },
     "add-attachments": {
         icon: <span className="material-symbols-rounded">attachment</span>,
diff --git a/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
new file mode 100644
index 000000000..e73944864
--- /dev/null
+++ b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { SingleLargePageParameters } from './useSingleLargePageParameters';
+
+export const useSingleLargePageOperation = () => {
+  const { t } = useTranslation();
+
+  const buildFormData = (parameters: SingleLargePageParameters, file: File): FormData => {
+    const formData = new FormData();
+    formData.append("fileInput", file);
+    return formData;
+  };
+
+  return useToolOperation<SingleLargePageParameters>({
+    operationType: 'singleLargePage',
+    endpoint: '/api/v1/general/pdf-to-single-page',
+    buildFormData,
+    filePrefix: t('pdfToSinglePage.filenamePrefix', 'single_page') + '_',
+    multiFileEndpoint: false,
+    getErrorMessage: createStandardErrorHandler(t('pdfToSinglePage.error.failed', 'An error occurred while converting to single page.'))
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/singleLargePage/useSingleLargePageParameters.ts b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
new file mode 100644
index 000000000..df401b1a4
--- /dev/null
+++ b/frontend/src/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
@@ -0,0 +1,19 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+
+export interface SingleLargePageParameters extends BaseParameters {
+  // Extends BaseParameters - ready for future parameter additions if needed
+}
+
+export const defaultParameters: SingleLargePageParameters = {
+  // No parameters needed
+};
+
+export type SingleLargePageParametersHook = BaseParametersHook<SingleLargePageParameters>;
+
+export const useSingleLargePageParameters = (): SingleLargePageParametersHook => {
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'pdf-to-single-page',
+  });
+};
\ No newline at end of file
diff --git a/frontend/src/tools/SingleLargePage.tsx b/frontend/src/tools/SingleLargePage.tsx
new file mode 100644
index 000000000..0c4fb96db
--- /dev/null
+++ b/frontend/src/tools/SingleLargePage.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";
+
+import { createToolFlow } from "../components/tools/shared/createToolFlow";
+
+import { useSingleLargePageParameters } from "../hooks/tools/singleLargePage/useSingleLargePageParameters";
+import { useSingleLargePageOperation } from "../hooks/tools/singleLargePage/useSingleLargePageOperation";
+import { BaseToolProps } from "../types/tool";
+
+const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();
+
+  const singleLargePageParams = useSingleLargePageParameters();
+  const singleLargePageOperation = useSingleLargePageOperation();
+
+  // Endpoint validation
+  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(singleLargePageParams.getEndpointName());
+
+  useEffect(() => {
+    singleLargePageOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [singleLargePageParams.parameters]);
+
+  const handleConvert = async () => {
+    try {
+      await singleLargePageOperation.executeOperation(singleLargePageParams.parameters, selectedFiles);
+      if (singleLargePageOperation.files && onComplete) {
+        onComplete(singleLargePageOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : t("pdfToSinglePage.error.failed", "Single large page operation failed"));
+      }
+    }
+  };
+
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem("previousMode", "single-large-page");
+    setCurrentMode("viewer");
+  };
+
+  const handleSettingsReset = () => {
+    singleLargePageOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode("single-large-page");
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = singleLargePageOperation.files.length > 0 || singleLargePageOperation.downloadUrl !== null;
+
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: hasFiles || hasResults,
+      placeholder: t("pdfToSinglePage.files.placeholder", "Select a PDF file in the main view to get started"),
+    },
+    steps: [],
+    executeButton: {
+      text: t("pdfToSinglePage.submit", "Convert To Single Page"),
+      isVisible: !hasResults,
+      loadingText: t("loading"),
+      onClick: handleConvert,
+      disabled: !singleLargePageParams.validateParameters() || !hasFiles || !endpointEnabled,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: singleLargePageOperation,
+      title: t("pdfToSinglePage.results.title", "Single Page Results"),
+      onFileClick: handleThumbnailClick,
+    },
+  });
+};
+
+export default SingleLargePage;
\ No newline at end of file
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index 6e2a2ef93..d9dde75b7 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -19,6 +19,7 @@ export type ModeType =
   | 'changePermissions'
   | 'watermark'
   | 'removePassword'
+  | 'single-large-page'
   | 'repair'
   | 'unlockPdfForms'
   | 'removeCertificateSign';

From eada9e43ec6e6cf57f238d72f4b3e273ad08008a Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Wed, 20 Aug 2025 14:12:12 +0100
Subject: [PATCH 05/11] tooltip (#4242)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---
 .../public/locales/en-GB/translation.json     | 44 +++++++++++-
 .../public/locales/en-US/translation.json     | 67 ++++++++++++++++++-
 .../tooltips/usePageSelectionTips.tsx         | 62 +++++++++++++++++
 3 files changed, 171 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/tooltips/usePageSelectionTips.tsx

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 333f6ca8b..64cd9408d 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1011,7 +1011,49 @@
     "submit": "Change"
   },
   "removePages": {
-    "tags": "Remove pages,delete pages"
+    "tags": "Remove pages,delete pages",
+    "title": "Remove Pages",
+    "pageNumbers": "Pages to Remove",
+    "pageNumbersPlaceholder": "e.g. 1,3,5-7",
+    "pageNumbersHelp": "Enter page numbers separated by commas, or ranges like 1-5. Example: 1,3,5-7",
+    "filenamePrefix": "pages_removed",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "settings": {
+      "title": "Page Selection"
+    },
+    "error": {
+      "failed": "An error occurred whilst removing pages."
+    },
+    "results": {
+      "title": "Page Removal Results"
+    },
+    "submit": "Remove Pages"
+  },
+  "pageSelection": {
+    "tooltip": {
+      "header": {
+        "title": "Page Selection Guide"
+      },
+      "basic": {
+        "title": "Basic Usage",
+        "text": "Select specific pages from your PDF document using simple syntax.",
+        "bullet1": "Individual pages: 1,3,5",
+        "bullet2": "Page ranges: 3-6 or 10-15",
+        "bullet3": "All pages: all"
+      },
+      "advanced": {
+        "title": "Advanced Features"
+      },
+      "tips": {
+        "title": "Tips",
+        "text": "Keep these guidelines in mind:",
+        "bullet1": "Page numbers start from 1 (not 0)",
+        "bullet2": "Spaces are automatically removed",
+        "bullet3": "Invalid expressions are ignored"
+      }
+    }
   },
   "compressPdfs": {
     "tags": "squish,small,tiny"
diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json
index 0638d78d3..358ccd53a 100644
--- a/frontend/public/locales/en-US/translation.json
+++ b/frontend/public/locales/en-US/translation.json
@@ -738,7 +738,72 @@
     "submit": "Change"
   },
   "removePages": {
-    "tags": "Remove pages,delete pages"
+    "tags": "Remove pages,delete pages",
+    "title": "Remove Pages",
+    "pageNumbers": "Pages to Remove",
+    "pageNumbersPlaceholder": "e.g. 1,3,5-7",
+    "pageNumbersHelp": "Enter page numbers separated by commas, or ranges like 1-5. Example: 1,3,5-7",
+    "filenamePrefix": "pages_removed",
+    "files": {
+      "placeholder": "Select a PDF file in the main view to get started"
+    },
+    "settings": {
+      "title": "Page Selection"
+    },
+    "error": {
+      "failed": "An error occurred while removing pages."
+    },
+    "results": {
+      "title": "Page Removal Results"
+    },
+    "submit": "Remove Pages"
+  },
+  "pageSelection": {
+    "tooltip": {
+      "header": {
+        "title": "Page Selection Guide"
+      },
+      "basic": {
+        "title": "Basic Usage",
+        "text": "Select specific pages from your PDF document using simple syntax.",
+        "bullet1": "Individual pages: 1,3,5",
+        "bullet2": "Page ranges: 3-6 or 10-15",
+        "bullet3": "All pages: all"
+      },
+      "advanced": {
+        "title": "Advanced Features",
+        "expandText": "▶ Show advanced options",
+        "collapseText": "▼ Hide advanced options",
+        "mathematical": {
+          "title": "Mathematical Functions",
+          "text": "Use mathematical expressions to select page patterns:",
+          "bullet1": "2n - all even pages (2, 4, 6, 8...)",
+          "bullet2": "2n+1 - all odd pages (1, 3, 5, 7...)",
+          "bullet3": "3n - every 3rd page (3, 6, 9, 12...)",
+          "bullet4": "4n-1 - pages 3, 7, 11, 15..."
+        },
+        "ranges": {
+          "title": "Open-ended Ranges",
+          "text": "Select from a starting point to the end:",
+          "bullet1": "5- selects pages 5 to end of document",
+          "bullet2": "10- selects pages 10 to end"
+        },
+        "combinations": {
+          "title": "Complex Combinations",
+          "text": "Combine different selection methods:",
+          "bullet1": "1,3-5,8,2n - pages 1, 3-5, 8, and all even pages",
+          "bullet2": "10-,2n+1 - pages 10 to end plus all odd pages",
+          "bullet3": "1-5,15-,3n - pages 1-5, 15 to end, and every 3rd page"
+        }
+      },
+      "tips": {
+        "title": "Tips",
+        "text": "Keep these guidelines in mind:",
+        "bullet1": "Page numbers start from 1 (not 0)",
+        "bullet2": "Spaces are automatically removed",
+        "bullet3": "Invalid expressions are ignored"
+      }
+    }
   },
   "compressPdfs": {
     "tags": "squish,small,tiny"
diff --git a/frontend/src/components/tooltips/usePageSelectionTips.tsx b/frontend/src/components/tooltips/usePageSelectionTips.tsx
new file mode 100644
index 000000000..d51034992
--- /dev/null
+++ b/frontend/src/components/tooltips/usePageSelectionTips.tsx
@@ -0,0 +1,62 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+/**
+ * Reusable tooltip for page selection functionality.
+ * Can be used by any tool that uses the GeneralUtils.parsePageList syntax.
+ */
+export const usePageSelectionTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("pageSelection.tooltip.header.title", "Page Selection Guide")
+    },
+    tips: [
+      {
+        description: t("pageSelection.tooltip.description", "Choose which pages to use for the operation. Supports single pages, ranges, formulas, and the all keyword.")
+      },
+      {
+        title: t("pageSelection.tooltip.individual.title", "Individual Pages"),
+        description: t("pageSelection.tooltip.individual.description", "Enter numbers separated by commas."),
+        bullets: [
+          t("pageSelection.tooltip.individual.bullet1", "<strong>1,3,5</strong> → selects pages 1, 3, 5"),
+          t("pageSelection.tooltip.individual.bullet2", "<strong>2,7,12</strong> → selects pages 2, 7, 12")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.ranges.title", "Page Ranges"),
+        description: t("pageSelection.tooltip.ranges.description", "Use - for consecutive pages."),
+        bullets: [
+          t("pageSelection.tooltip.ranges.bullet1", "<strong>3-6</strong> → selects pages 3–6"),
+          t("pageSelection.tooltip.ranges.bullet2", "<strong>10-15</strong> → selects pages 10–15"),
+          t("pageSelection.tooltip.ranges.bullet3", "<strong>5-</strong> → selects pages 5 to end")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.mathematical.title", "Mathematical Functions"),
+        description: t("pageSelection.tooltip.mathematical.description", "Use n in formulas for patterns."),
+        bullets: [
+		  t("pageSelection.tooltip.mathematical.bullet2", "<strong>2n-1</strong> → all odd pages (1, 3, 5…)"),
+          t("pageSelection.tooltip.mathematical.bullet1", "<strong>2n</strong> → all even pages (2, 4, 6…)"),
+          t("pageSelection.tooltip.mathematical.bullet3", "<strong>3n</strong> → every 3rd page (3, 6, 9…)"),
+          t("pageSelection.tooltip.mathematical.bullet4", "<strong>4n-1</strong> → pages 3, 7, 11, 15…")
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.special.title", "Special Keywords"),
+        bullets: [
+          t("pageSelection.tooltip.special.bullet1", "<strong>all</strong> → selects all pages"),
+        ]
+      },
+      {
+        title: t("pageSelection.tooltip.complex.title", "Complex Combinations"),
+        description: t("pageSelection.tooltip.complex.description", "Mix different types."),
+        bullets: [
+          t("pageSelection.tooltip.complex.bullet1", "<strong>1,3-5,8,2n</strong> → pages 1, 3–5, 8, plus evens"),
+          t("pageSelection.tooltip.complex.bullet2", "<strong>10-,2n-1</strong> → from page 10 to end + odd pages")
+        ]
+      }
+    ]
+  };
+};
\ No newline at end of file

From cd2b82d614b57b6024a6c2ee1f8602ea7f2634b2 Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Wed, 20 Aug 2025 16:51:55 +0100
Subject: [PATCH 06/11] Feature/v2/filemanagerimprovements (#4243)

- Select all/deselect all
- Delete Selected
- Download  Selected
- Recent file delete -> menu button with drop down for delete and
download
- Shift click selection added
<img width="1220" height="751"
alt="{330DF96D-7040-4CCB-B089-523F370E3185}"
src="https://github.com/user-attachments/assets/976e42cc-2124-4e62-83a8-25f184e8da3b"
/>
<img width="1160" height="749"
alt="{2D2F4876-7D35-45C3-B0CD-3127EEEEF7B5}"
src="https://github.com/user-attachments/assets/6879a174-a135-41f4-a876-984e7c2f96e2"
/>

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
---
 .../public/locales/en-GB/translation.json     |   9 +-
 .../components/fileManager/DesktopLayout.tsx  |  63 ++++----
 .../components/fileManager/FileActions.tsx    | 115 +++++++++++++
 .../components/fileManager/FileListArea.tsx   |  16 +-
 .../components/fileManager/FileListItem.tsx   | 107 ++++++++----
 .../components/fileManager/MobileLayout.tsx   |  26 ++-
 frontend/src/contexts/FileManagerContext.tsx  | 148 ++++++++++++++---
 frontend/src/theme/mantineTheme.ts            |  13 ++
 frontend/src/utils/downloadUtils.ts           | 152 ++++++++++++++++++
 9 files changed, 558 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/fileManager/FileActions.tsx
 create mode 100644 frontend/src/utils/downloadUtils.ts

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 64cd9408d..efcc3de0c 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -2031,7 +2031,14 @@
     "fileSize": "Size",
     "fileVersion": "Version",
     "totalSelected": "Total Selected",
-    "dropFilesHere": "Drop files here"
+    "dropFilesHere": "Drop files here",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "deleteSelected": "Delete Selected",
+    "downloadSelected": "Download Selected",
+    "selectedCount": "{{count}} selected",
+    "download": "Download",
+    "delete": "Delete"
   },
   "storage": {
     "temporaryNotice": "Files are stored temporarily in your browser and may be cleared automatically",
diff --git a/frontend/src/components/fileManager/DesktopLayout.tsx b/frontend/src/components/fileManager/DesktopLayout.tsx
index be701ff20..8d1e32ffc 100644
--- a/frontend/src/components/fileManager/DesktopLayout.tsx
+++ b/frontend/src/components/fileManager/DesktopLayout.tsx
@@ -4,6 +4,7 @@ import FileSourceButtons from './FileSourceButtons';
 import FileDetails from './FileDetails';
 import SearchInput from './SearchInput';
 import FileListArea from './FileListArea';
+import FileActions from './FileActions';
 import HiddenFileInput from './HiddenFileInput';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
 
@@ -17,27 +18,27 @@ const DesktopLayout: React.FC = () => {
   return (
     <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
       {/* Column 1: File Sources */}
-      <Grid.Col span="content" p="lg" style={{ 
-        minWidth: '13.625rem', 
-        width: '13.625rem', 
-        flexShrink: 0, 
+      <Grid.Col span="content" p="lg" style={{
+        minWidth: '13.625rem',
+        width: '13.625rem',
+        flexShrink: 0,
         height: '100%',
       }}>
         <FileSourceButtons />
       </Grid.Col>
-      
+
       {/* Column 2: File List */}
-      <Grid.Col span="auto" style={{ 
-        display: 'flex', 
-        flexDirection: 'column', 
-        height: '100%', 
+      <Grid.Col span="auto" style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
         minHeight: 0,
         minWidth: 0,
         flex: '1 1 0px'
       }}>
-        <div style={{ 
-          flex: 1, 
-          display: 'flex', 
+        <div style={{
+          flex: 1,
+          display: 'flex',
           flexDirection: 'column',
           backgroundColor: 'var(--bg-file-list)',
           border: '1px solid var(--mantine-color-gray-2)',
@@ -45,18 +46,26 @@ const DesktopLayout: React.FC = () => {
           overflow: 'hidden'
         }}>
           {activeSource === 'recent' && (
-            <div style={{ 
-              flexShrink: 0,
-              borderBottom: '1px solid var(--mantine-color-gray-3)'
-            }}>
-              <SearchInput />
-            </div>
+            <>
+              <div style={{
+                flexShrink: 0,
+                borderBottom: '1px solid var(--mantine-color-gray-3)'
+              }}>
+                <SearchInput />
+              </div>
+              <div style={{
+                flexShrink: 0,
+                borderBottom: '1px solid var(--mantine-color-gray-3)'
+              }}>
+                <FileActions />
+              </div>
+            </>
           )}
-          
+
           <div style={{ flex: 1, minHeight: 0 }}>
             <FileListArea
               scrollAreaHeight={`calc(${modalHeight} )`}
-              scrollAreaStyle={{ 
+              scrollAreaStyle={{
                 height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
                 backgroundColor: 'transparent',
                 border: 'none',
@@ -66,12 +75,12 @@ const DesktopLayout: React.FC = () => {
           </div>
         </div>
       </Grid.Col>
-      
+
       {/* Column 3: File Details */}
-      <Grid.Col p="xl" span="content" style={{ 
-        minWidth: '25rem', 
-        width: '25rem', 
-        flexShrink: 0, 
+      <Grid.Col p="xl" span="content" style={{
+        minWidth: '25rem',
+        width: '25rem',
+        flexShrink: 0,
         height: '100%',
         maxWidth: '18rem'
       }}>
@@ -79,11 +88,11 @@ const DesktopLayout: React.FC = () => {
           <FileDetails />
         </div>
       </Grid.Col>
-      
+
       {/* Hidden file input for local file selection */}
       <HiddenFileInput />
     </Grid>
   );
 };
 
-export default DesktopLayout;
\ No newline at end of file
+export default DesktopLayout;
diff --git a/frontend/src/components/fileManager/FileActions.tsx b/frontend/src/components/fileManager/FileActions.tsx
new file mode 100644
index 000000000..7bc8d27bc
--- /dev/null
+++ b/frontend/src/components/fileManager/FileActions.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Group, Text, ActionIcon, Tooltip } from "@mantine/core";
+import SelectAllIcon from "@mui/icons-material/SelectAll";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "../../contexts/FileManagerContext";
+
+const FileActions: React.FC = () => {
+  const { t } = useTranslation();
+  const { recentFiles, selectedFileIds, filteredFiles, onSelectAll, onDeleteSelected, onDownloadSelected } =
+    useFileManagerContext();
+
+  const handleSelectAll = () => {
+    onSelectAll();
+  };
+
+  const handleDeleteSelected = () => {
+    if (selectedFileIds.length > 0) {
+      onDeleteSelected();
+    }
+  };
+
+  const handleDownloadSelected = () => {
+    if (selectedFileIds.length > 0) {
+      onDownloadSelected();
+    }
+  };
+
+  // Only show actions if there are files
+  if (recentFiles.length === 0) {
+    return null;
+  }
+
+  const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
+  const hasSelection = selectedFileIds.length > 0;
+
+  return (
+    <div
+      style={{
+        padding: "0.75rem 1rem",
+        backgroundColor: "var(--mantine-color-gray-1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        minHeight: "3rem",
+        position: "relative",
+      }}
+    >
+      {/* Left: Select All */}
+      <div>
+        <Tooltip
+          label={allFilesSelected ? t("fileManager.deselectAll", "Deselect All") : t("fileManager.selectAll", "Select All")}
+        >
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleSelectAll}
+            disabled={filteredFiles.length === 0}
+            radius="sm"
+          >
+            <SelectAllIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      {/* Center: Selected count */}
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          transform: "translateX(-50%)",
+        }}
+      >
+        {hasSelection && (
+          <Text size="sm" c="dimmed" fw={500}>
+            {t("fileManager.selectedCount", "{{count}} selected", { count: selectedFileIds.length })}
+          </Text>
+        )}
+      </div>
+
+      {/* Right: Delete and Download */}
+      <Group gap="xs">
+        <Tooltip label={t("fileManager.deleteSelected", "Delete Selected")}>
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleDeleteSelected}
+            disabled={!hasSelection}
+            radius="sm"
+          >
+            <DeleteIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("fileManager.downloadSelected", "Download Selected")}>
+          <ActionIcon
+            variant="light"
+            size="sm"
+            color="dimmed"
+            onClick={handleDownloadSelected}
+            disabled={!hasSelection}
+            radius="sm"
+          >
+            <DownloadIcon style={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+    </div>
+  );
+};
+
+export default FileActions;
diff --git a/frontend/src/components/fileManager/FileListArea.tsx b/frontend/src/components/fileManager/FileListArea.tsx
index 8e1975137..fd9357a94 100644
--- a/frontend/src/components/fileManager/FileListArea.tsx
+++ b/frontend/src/components/fileManager/FileListArea.tsx
@@ -19,22 +19,23 @@ const FileListArea: React.FC<FileListAreaProps> = ({
     activeSource,
     recentFiles,
     filteredFiles,
-    selectedFileIds,
+    selectedFilesSet,
     onFileSelect,
     onFileRemove,
     onFileDoubleClick,
+    onDownloadSingle,
     isFileSupported,
   } = useFileManagerContext();
   const { t } = useTranslation();
 
   if (activeSource === 'recent') {
     return (
-      <ScrollArea 
+      <ScrollArea
         h={scrollAreaHeight}
-        style={{ 
+        style={{
           ...scrollAreaStyle
         }}
-        type="always" 
+        type="always"
         scrollbarSize={8}
       >
         <Stack gap={0}>
@@ -53,10 +54,11 @@ const FileListArea: React.FC<FileListAreaProps> = ({
               <FileListItem
                 key={file.id || file.name}
                 file={file}
-                isSelected={selectedFileIds.includes(file.id || file.name)}
+                isSelected={selectedFilesSet.has(file.id || file.name)}
                 isSupported={isFileSupported(file.name)}
-                onSelect={() => onFileSelect(file)}
+                onSelect={(shiftKey) => onFileSelect(file, index, shiftKey)}
                 onRemove={() => onFileRemove(index)}
+                onDownload={() => onDownloadSingle(file)}
                 onDoubleClick={() => onFileDoubleClick(file)}
               />
             ))
@@ -77,4 +79,4 @@ const FileListArea: React.FC<FileListAreaProps> = ({
   );
 };
 
-export default FileListArea;
\ No newline at end of file
+export default FileListArea;
diff --git a/frontend/src/components/fileManager/FileListItem.tsx b/frontend/src/components/fileManager/FileListItem.tsx
index 147133009..4b0e408d1 100644
--- a/frontend/src/components/fileManager/FileListItem.tsx
+++ b/frontend/src/components/fileManager/FileListItem.tsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
-import { Group, Box, Text, ActionIcon, Checkbox, Divider } from '@mantine/core';
+import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu } from '@mantine/core';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
+import { useTranslation } from 'react-i18next';
 import { getFileSize, getFileDate } from '../../utils/fileUtils';
 import { FileWithUrl } from '../../types/file';
 
@@ -8,33 +11,44 @@ interface FileListItemProps {
   file: FileWithUrl;
   isSelected: boolean;
   isSupported: boolean;
-  onSelect: () => void;
+  onSelect: (shiftKey?: boolean) => void;
   onRemove: () => void;
+  onDownload?: () => void;
   onDoubleClick?: () => void;
   isLast?: boolean;
 }
 
-const FileListItem: React.FC<FileListItemProps> = ({ 
-  file, 
-  isSelected, 
-  isSupported, 
-  onSelect, 
-  onRemove, 
+const FileListItem: React.FC<FileListItemProps> = ({
+  file,
+  isSelected,
+  isSupported,
+  onSelect,
+  onRemove,
+  onDownload,
   onDoubleClick
 }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { t } = useTranslation();
+
+  // Keep item in hovered state if menu is open
+  const shouldShowHovered = isHovered || isMenuOpen;
 
   return (
     <>
-      <Box 
-        p="sm" 
-        style={{ 
+      <Box
+        p="sm"
+        style={{
           cursor: 'pointer',
-          backgroundColor: isSelected ? 'var(--mantine-color-gray-0)' : (isHovered ? 'var(--mantine-color-gray-0)' : 'var(--bg-file-list)'),
+          backgroundColor: isSelected ? 'var(--mantine-color-gray-1)' : (shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'var(--bg-file-list)'),
           opacity: isSupported ? 1 : 0.5,
-          transition: 'background-color 0.15s ease'
+          transition: 'background-color 0.15s ease',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          MozUserSelect: 'none',
+          msUserSelect: 'none'
         }}
-        onClick={onSelect}
+        onClick={(e) => onSelect(e.shiftKey)}
         onDoubleClick={onDoubleClick}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -54,26 +68,59 @@ const FileListItem: React.FC<FileListItemProps> = ({
               }}
             />
           </Box>
-       
+
           <Box style={{ flex: 1, minWidth: 0 }}>
             <Text size="sm" fw={500} truncate>{file.name}</Text>
             <Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
           </Box>
-          {/* Delete button - fades in/out on hover */}
-          <ActionIcon 
-            variant="subtle" 
-            c="dimmed"
-            size="md"
-            onClick={(e) => { e.stopPropagation(); onRemove(); }}
-            style={{
-              opacity: isHovered ? 1 : 0,
-              transform: isHovered ? 'scale(1)' : 'scale(0.8)',
-              transition: 'opacity 0.3s ease, transform 0.3s ease',
-              pointerEvents: isHovered ? 'auto' : 'none'
-            }}
+
+          {/* Three dots menu - fades in/out on hover */}
+          <Menu
+            position="bottom-end"
+            withinPortal
+            onOpen={() => setIsMenuOpen(true)}
+            onClose={() => setIsMenuOpen(false)}
           >
-            <DeleteIcon style={{ fontSize: 20 }} />
-          </ActionIcon>
+            <Menu.Target>
+              <ActionIcon
+                variant="subtle"
+                c="dimmed"
+                size="md"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  opacity: shouldShowHovered ? 1 : 0,
+                  transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)',
+                  transition: 'opacity 0.3s ease, transform 0.3s ease',
+                  pointerEvents: shouldShowHovered ? 'auto' : 'none'
+                }}
+              >
+                <MoreVertIcon style={{ fontSize: 20 }} />
+              </ActionIcon>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              {onDownload && (
+                <Menu.Item
+                  leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDownload();
+                  }}
+                >
+                  {t('fileManager.download', 'Download')}
+                </Menu.Item>
+              )}
+              <Menu.Item
+                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemove();
+                }}
+              >
+                {t('fileManager.delete', 'Delete')}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
         </Group>
       </Box>
       { <Divider color="var(--mantine-color-gray-3)" />}
@@ -81,4 +128,4 @@ const FileListItem: React.FC<FileListItemProps> = ({
   );
 };
 
-export default FileListItem;
\ No newline at end of file
+export default FileListItem;
diff --git a/frontend/src/components/fileManager/MobileLayout.tsx b/frontend/src/components/fileManager/MobileLayout.tsx
index 30d1ad6b9..5201aafb4 100644
--- a/frontend/src/components/fileManager/MobileLayout.tsx
+++ b/frontend/src/components/fileManager/MobileLayout.tsx
@@ -4,6 +4,7 @@ import FileSourceButtons from './FileSourceButtons';
 import FileDetails from './FileDetails';
 import SearchInput from './SearchInput';
 import FileListArea from './FileListArea';
+import FileActions from './FileActions';
 import HiddenFileInput from './HiddenFileInput';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
 
@@ -22,10 +23,11 @@ const MobileLayout: React.FC = () => {
     // Estimate heights of fixed components
     const fileSourceHeight = '3rem'; // FileSourceButtons height
     const fileDetailsHeight = selectedFiles.length > 0 ? '10rem' : '8rem'; // FileDetails compact height
+    const fileActionsHeight = activeSource === 'recent' ? '3rem' : '0rem'; // FileActions height (now at bottom)
     const searchHeight = activeSource === 'recent' ? '3rem' : '0rem'; // SearchInput height
-    const gapHeight = activeSource === 'recent' ? '3rem' : '2rem'; // Stack gaps
+    const gapHeight = activeSource === 'recent' ? '3.75rem' : '2rem'; // Stack gaps
     
-    return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${searchHeight} - ${gapHeight})`;
+    return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${fileActionsHeight} - ${searchHeight} - ${gapHeight})`;
   };
 
   return (
@@ -51,12 +53,20 @@ const MobileLayout: React.FC = () => {
         minHeight: 0
       }}>
         {activeSource === 'recent' && (
-          <Box style={{ 
-            flexShrink: 0,
-            borderBottom: '1px solid var(--mantine-color-gray-2)'
-          }}>
-            <SearchInput />
-          </Box>
+          <>
+            <Box style={{ 
+              flexShrink: 0,
+              borderBottom: '1px solid var(--mantine-color-gray-2)'
+            }}>
+              <SearchInput />
+            </Box>
+            <Box style={{ 
+              flexShrink: 0,
+              borderBottom: '1px solid var(--mantine-color-gray-2)'
+            }}>
+              <FileActions />
+            </Box>
+          </>
         )}
         
         <Box style={{ flex: 1, minHeight: 0 }}>
diff --git a/frontend/src/contexts/FileManagerContext.tsx b/frontend/src/contexts/FileManagerContext.tsx
index 98b93cf0b..4115e873d 100644
--- a/frontend/src/contexts/FileManagerContext.tsx
+++ b/frontend/src/contexts/FileManagerContext.tsx
@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { FileWithUrl } from '../types/file';
-import { StoredFile } from '../services/fileStorage';
+import { StoredFile, fileStorage } from '../services/fileStorage';
+import { downloadFiles } from '../utils/downloadUtils';
 
 // Type for the context value - now contains everything directly
 interface FileManagerContextValue {
@@ -11,16 +12,21 @@ interface FileManagerContextValue {
   selectedFiles: FileWithUrl[];
   filteredFiles: FileWithUrl[];
   fileInputRef: React.RefObject<HTMLInputElement | null>;
+  selectedFilesSet: Set<string>;
 
   // Handlers
   onSourceChange: (source: 'recent' | 'local' | 'drive') => void;
   onLocalFileClick: () => void;
-  onFileSelect: (file: FileWithUrl) => void;
+  onFileSelect: (file: FileWithUrl, index: number, shiftKey?: boolean) => void;
   onFileRemove: (index: number) => void;
   onFileDoubleClick: (file: FileWithUrl) => void;
   onOpenFiles: () => void;
   onSearchChange: (value: string) => void;
   onFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onSelectAll: () => void;
+  onDeleteSelected: () => void;
+  onDownloadSelected: () => void;
+  onDownloadSingle: (file: FileWithUrl) => void;
 
   // External props
   recentFiles: FileWithUrl[];
@@ -60,22 +66,29 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   const [activeSource, setActiveSource] = useState<'recent' | 'local' | 'drive'>('recent');
   const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
+  const [lastClickedIndex, setLastClickedIndex] = useState<number | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Track blob URLs for cleanup
   const createdBlobUrls = useRef<Set<string>>(new Set());
 
   // Computed values (with null safety)
-  const selectedFiles = (recentFiles || []).filter(file => selectedFileIds.includes(file.id || file.name));
-  const filteredFiles = (recentFiles || []).filter(file =>
-    file.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const selectedFilesSet = new Set(selectedFileIds);
+  
+  const selectedFiles = selectedFileIds.length === 0 ? [] : 
+    (recentFiles || []).filter(file => selectedFilesSet.has(file.id || file.name));
+  
+  const filteredFiles = !searchTerm ? recentFiles || [] :
+    (recentFiles || []).filter(file =>
+      file.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
 
   const handleSourceChange = useCallback((source: 'recent' | 'local' | 'drive') => {
     setActiveSource(source);
     if (source !== 'recent') {
       setSelectedFileIds([]);
       setSearchTerm('');
+      setLastClickedIndex(null);
     }
   }, []);
 
@@ -83,19 +96,46 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileSelect = useCallback((file: FileWithUrl) => {
-    setSelectedFileIds(prev => {
-      if (file.id) {
-        if (prev.includes(file.id)) {
-          return prev.filter(id => id !== file.id);
-        } else {
-          return [...prev, file.id];
+  const handleFileSelect = useCallback((file: FileWithUrl, currentIndex: number, shiftKey?: boolean) => {
+    const fileId = file.id || file.name;
+    if (!fileId) return;
+    
+    if (shiftKey && lastClickedIndex !== null) {
+      // Range selection with shift-click
+      const startIndex = Math.min(lastClickedIndex, currentIndex);
+      const endIndex = Math.max(lastClickedIndex, currentIndex);
+      
+      setSelectedFileIds(prev => {
+        const selectedSet = new Set(prev);
+        
+        // Add all files in the range to selection
+        for (let i = startIndex; i <= endIndex; i++) {
+          const rangeFileId = filteredFiles[i]?.id || filteredFiles[i]?.name;
+          if (rangeFileId) {
+            selectedSet.add(rangeFileId);
+          }
         }
-      } else {
-        return prev;
-      }
-    });
-  }, []);
+        
+        return Array.from(selectedSet);
+      });
+    } else {
+      // Normal click behavior - optimized with Set for O(1) lookup
+      setSelectedFileIds(prev => {
+        const selectedSet = new Set(prev);
+        
+        if (selectedSet.has(fileId)) {
+          selectedSet.delete(fileId);
+        } else {
+          selectedSet.add(fileId);
+        }
+        
+        return Array.from(selectedSet);
+      });
+      
+      // Update last clicked index for future range selections
+      setLastClickedIndex(currentIndex);
+    }
+  }, [filteredFiles, lastClickedIndex]);
 
   const handleFileRemove = useCallback((index: number) => {
     const fileToRemove = filteredFiles[index];
@@ -152,6 +192,72 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     event.target.value = '';
   }, [storeFile, onFilesSelected, refreshRecentFiles, onClose]);
 
+  const handleSelectAll = useCallback(() => {
+    const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
+    if (allFilesSelected) {
+      // Deselect all
+      setSelectedFileIds([]);
+      setLastClickedIndex(null);
+    } else {
+      // Select all filtered files
+      setSelectedFileIds(filteredFiles.map(file => file.id || file.name));
+      setLastClickedIndex(null);
+    }
+  }, [filteredFiles, selectedFileIds]);
+
+  const handleDeleteSelected = useCallback(async () => {
+    if (selectedFileIds.length === 0) return;
+
+    try {
+      // Get files to delete based on current filtered view
+      const filesToDelete = filteredFiles.filter(file => 
+        selectedFileIds.includes(file.id || file.name)
+      );
+
+      // Delete files from storage
+      for (const file of filesToDelete) {
+        const lookupKey = file.id || file.name;
+        await fileStorage.deleteFile(lookupKey);
+      }
+
+      // Clear selection
+      setSelectedFileIds([]);
+
+      // Refresh the file list
+      await refreshRecentFiles();
+    } catch (error) {
+      console.error('Failed to delete selected files:', error);
+    }
+  }, [selectedFileIds, filteredFiles, refreshRecentFiles]);
+
+
+  const handleDownloadSelected = useCallback(async () => {
+    if (selectedFileIds.length === 0) return;
+
+    try {
+      // Get selected files
+      const selectedFilesToDownload = filteredFiles.filter(file => 
+        selectedFileIds.includes(file.id || file.name)
+      );
+
+      // Use generic download utility
+      await downloadFiles(selectedFilesToDownload, {
+        zipFilename: `selected-files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')}.zip`
+      });
+    } catch (error) {
+      console.error('Failed to download selected files:', error);
+    }
+  }, [selectedFileIds, filteredFiles]);
+
+  const handleDownloadSingle = useCallback(async (file: FileWithUrl) => {
+    try {
+      await downloadFiles([file]);
+    } catch (error) {
+      console.error('Failed to download file:', error);
+    }
+  }, []);
+
+
   // Cleanup blob URLs when component unmounts
   useEffect(() => {
     return () => {
@@ -169,6 +275,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
       setActiveSource('recent');
       setSelectedFileIds([]);
       setSearchTerm('');
+      setLastClickedIndex(null);
     }
   }, [isOpen]);
 
@@ -180,6 +287,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     selectedFiles,
     filteredFiles,
     fileInputRef,
+    selectedFilesSet,
 
     // Handlers
     onSourceChange: handleSourceChange,
@@ -190,6 +298,10 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     onOpenFiles: handleOpenFiles,
     onSearchChange: handleSearchChange,
     onFileInputChange: handleFileInputChange,
+    onSelectAll: handleSelectAll,
+    onDeleteSelected: handleDeleteSelected,
+    onDownloadSelected: handleDownloadSelected,
+    onDownloadSingle: handleDownloadSingle,
 
     // External props
     recentFiles,
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index 27e70d461..a8552b2bb 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/frontend/src/theme/mantineTheme.ts
@@ -191,6 +191,19 @@ export const mantineTheme = createTheme({
         },
       },
     },
+    Tooltip: {
+      styles: {
+        tooltip: {
+          backgroundColor: 'var( --tooltip-title-bg)',
+          color: 'var( --tooltip-title-color)',
+          border: '1px solid var(--tooltip-borderp)',
+          fontSize: '0.75rem',
+          fontWeight: '500',
+          boxShadow: 'var(--shadow-md)',
+          borderRadius: 'var(--radius-sm)',
+        },
+      },
+    },
 
     Checkbox: {
       styles: {
diff --git a/frontend/src/utils/downloadUtils.ts b/frontend/src/utils/downloadUtils.ts
new file mode 100644
index 000000000..1c411c87d
--- /dev/null
+++ b/frontend/src/utils/downloadUtils.ts
@@ -0,0 +1,152 @@
+import { FileWithUrl } from '../types/file';
+import { fileStorage } from '../services/fileStorage';
+import { zipFileService } from '../services/zipFileService';
+
+/**
+ * Downloads a blob as a file using browser download API
+ * @param blob - The blob to download
+ * @param filename - The filename for the download
+ */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  
+  // Clean up the blob URL
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Downloads a single file from IndexedDB storage
+ * @param file - The file object with storage information
+ * @throws Error if file cannot be retrieved from storage
+ */
+export async function downloadFileFromStorage(file: FileWithUrl): Promise<void> {
+  const lookupKey = file.id || file.name;
+  const storedFile = await fileStorage.getFile(lookupKey);
+  
+  if (!storedFile) {
+    throw new Error(`File "${file.name}" not found in storage`);
+  }
+  
+  const blob = new Blob([storedFile.data], { type: storedFile.type });
+  downloadBlob(blob, storedFile.name);
+}
+
+/**
+ * Downloads multiple files as individual downloads
+ * @param files - Array of files to download
+ */
+export async function downloadMultipleFiles(files: FileWithUrl[]): Promise<void> {
+  for (const file of files) {
+    await downloadFileFromStorage(file);
+  }
+}
+
+/**
+ * Downloads multiple files as a single ZIP archive
+ * @param files - Array of files to include in ZIP
+ * @param zipFilename - Optional custom ZIP filename (defaults to timestamped name)
+ */
+export async function downloadFilesAsZip(files: FileWithUrl[], zipFilename?: string): Promise<void> {
+  if (files.length === 0) {
+    throw new Error('No files provided for ZIP download');
+  }
+
+  // Convert stored files to File objects
+  const fileObjects: File[] = [];
+  for (const fileWithUrl of files) {
+    const lookupKey = fileWithUrl.id || fileWithUrl.name;
+    const storedFile = await fileStorage.getFile(lookupKey);
+    
+    if (storedFile) {
+      const file = new File([storedFile.data], storedFile.name, {
+        type: storedFile.type,
+        lastModified: storedFile.lastModified
+      });
+      fileObjects.push(file);
+    }
+  }
+  
+  if (fileObjects.length === 0) {
+    throw new Error('No valid files found in storage for ZIP download');
+  }
+
+  // Generate default filename if not provided
+  const finalZipFilename = zipFilename || 
+    `files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')}.zip`;
+  
+  // Create and download ZIP
+  const { zipFile } = await zipFileService.createZipFromFiles(fileObjects, finalZipFilename);
+  downloadBlob(zipFile, finalZipFilename);
+}
+
+/**
+ * Smart download function that handles single or multiple files appropriately
+ * - Single file: Downloads directly
+ * - Multiple files: Downloads as ZIP
+ * @param files - Array of files to download
+ * @param options - Download options
+ */
+export async function downloadFiles(
+  files: FileWithUrl[], 
+  options: {
+    forceZip?: boolean;
+    zipFilename?: string;
+    multipleAsIndividual?: boolean;
+  } = {}
+): Promise<void> {
+  if (files.length === 0) {
+    throw new Error('No files provided for download');
+  }
+
+  if (files.length === 1 && !options.forceZip) {
+    // Single file download
+    await downloadFileFromStorage(files[0]);
+  } else if (options.multipleAsIndividual) {
+    // Multiple individual downloads
+    await downloadMultipleFiles(files);
+  } else {
+    // ZIP download (default for multiple files)
+    await downloadFilesAsZip(files, options.zipFilename);
+  }
+}
+
+/**
+ * Downloads a File object directly (for files already in memory)
+ * @param file - The File object to download
+ * @param filename - Optional custom filename
+ */
+export function downloadFileObject(file: File, filename?: string): void {
+  downloadBlob(file, filename || file.name);
+}
+
+/**
+ * Downloads text content as a file
+ * @param content - Text content to download
+ * @param filename - Filename for the download
+ * @param mimeType - MIME type (defaults to text/plain)
+ */
+export function downloadTextAsFile(
+  content: string, 
+  filename: string, 
+  mimeType: string = 'text/plain'
+): void {
+  const blob = new Blob([content], { type: mimeType });
+  downloadBlob(blob, filename);
+}
+
+/**
+ * Downloads JSON data as a file
+ * @param data - Data to serialize and download
+ * @param filename - Filename for the download
+ */
+export function downloadJsonAsFile(data: any, filename: string): void {
+  const content = JSON.stringify(data, null, 2);
+  downloadTextAsFile(content, filename, 'application/json');
+}
\ No newline at end of file

From d06cbcaa91359cbd9efc6b0f2218b6125bd34920 Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Wed, 20 Aug 2025 16:54:30 +0100
Subject: [PATCH 07/11] V2 Files Selected indicator in toolstep (#4241)

Added back our files selected indicator in tools step

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
---
 .../tools/shared/FileStatusIndicator.tsx      | 22 ++++++++++++-------
 frontend/src/tools/AddPassword.tsx            |  2 +-
 frontend/src/tools/AddWatermark.tsx           |  2 +-
 frontend/src/tools/ChangePermissions.tsx      |  2 +-
 frontend/src/tools/Compress.tsx               |  2 +-
 frontend/src/tools/Convert.tsx                |  3 +--
 frontend/src/tools/OCR.tsx                    |  2 +-
 frontend/src/tools/RemovePassword.tsx         |  2 +-
 frontend/src/tools/Repair.tsx                 |  4 ++--
 frontend/src/tools/Sanitize.tsx               |  3 +--
 frontend/src/tools/Split.tsx                  |  3 +--
 11 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
index e6f0b2e2f..22a25e627 100644
--- a/frontend/src/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import { Text } from '@mantine/core';
+import React from "react";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: File[];
@@ -8,20 +9,25 @@ export interface FileStatusIndicatorProps {
 
 const FileStatusIndicator = ({
   selectedFiles = [],
-  placeholder = "Select a PDF file in the main view to get started"
+  placeholder,
 }: FileStatusIndicatorProps) => {
+  const { t } = useTranslation();
+  const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started");
   
   // Only show content when no files are selected
   if (selectedFiles.length === 0) {
     return (
       <Text size="sm" c="dimmed">
-        {placeholder}
+        {defaultPlaceholder}
       </Text>
     );
   }
 
-  // Return nothing when files are selected
-  return null;
-}
+  return (
+   <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>
+        ✓ {selectedFiles.length === 1 ? t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })}
+    </Text>
+  );
+};
 
-export default FileStatusIndicator;
\ No newline at end of file
+export default FileStatusIndicator;
diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx
index 35e97e1b4..20b603044 100644
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@@ -68,7 +68,7 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
     },
     steps: [
       {
diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx
index 3f2357a7e..01306e6f0 100644
--- a/frontend/src/tools/AddWatermark.tsx
+++ b/frontend/src/tools/AddWatermark.tsx
@@ -189,7 +189,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
     },
     steps: getSteps(),
     executeButton: {
diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx
index 9a9647759..928422059 100644
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@@ -64,7 +64,7 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
     },
     steps: [
       {
diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx
index ace479b8e..d7e0ebc2c 100644
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@@ -62,7 +62,7 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles && !hasResults,
+      isCollapsed: hasResults,
     },
     steps: [
       {
diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx
index 0bef140ba..e2616f4a4 100644
--- a/frontend/src/tools/Convert.tsx
+++ b/frontend/src/tools/Convert.tsx
@@ -34,7 +34,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = convertOperation.downloadUrl !== null;
-  const filesCollapsed = hasFiles;
   const settingsCollapsed = hasResults;
 
   useEffect(() => {
@@ -97,7 +96,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: filesCollapsed,
+      isCollapsed: hasResults,
       placeholder: t("convert.selectFilesPlaceholder", "Select files in the main view to get started"),
     },
     steps: [
diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx
index b44b349f7..72fac0b37 100644
--- a/frontend/src/tools/OCR.tsx
+++ b/frontend/src/tools/OCR.tsx
@@ -80,7 +80,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
     },
     steps: [
       {
diff --git a/frontend/src/tools/RemovePassword.tsx b/frontend/src/tools/RemovePassword.tsx
index 42f22ba9c..31744186b 100644
--- a/frontend/src/tools/RemovePassword.tsx
+++ b/frontend/src/tools/RemovePassword.tsx
@@ -62,7 +62,7 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
     },
     steps: [
       {
diff --git a/frontend/src/tools/Repair.tsx b/frontend/src/tools/Repair.tsx
index a3b63f591..fc30b9b95 100644
--- a/frontend/src/tools/Repair.tsx
+++ b/frontend/src/tools/Repair.tsx
@@ -57,7 +57,7 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: hasFiles || hasResults,
+      isCollapsed: hasResults,
       placeholder: t("repair.files.placeholder", "Select a PDF file in the main view to get started"),
     },
     steps: [],
@@ -77,4 +77,4 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 };
 
-export default Repair;
\ No newline at end of file
+export default Repair;
diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx
index 2874e54e4..258f0f930 100644
--- a/frontend/src/tools/Sanitize.tsx
+++ b/frontend/src/tools/Sanitize.tsx
@@ -55,13 +55,12 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = sanitizeOperation.files.length > 0;
-  const filesCollapsed = hasFiles || hasResults;
   const settingsCollapsed = !hasFiles || hasResults;
 
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: filesCollapsed,
+      isCollapsed: hasResults,
       placeholder: t("sanitize.files.placeholder", "Select a PDF file in the main view to get started"),
     },
     steps: [
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index f0e35dfb0..ea68404f0 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -54,13 +54,12 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   const hasFiles = selectedFiles.length > 0;
   const hasResults = splitOperation.downloadUrl !== null;
-  const filesCollapsed = hasFiles || hasResults;
   const settingsCollapsed = !hasFiles || hasResults;
 
   return createToolFlow({
     files: {
       selectedFiles,
-      isCollapsed: filesCollapsed,
+      isCollapsed: hasResults,
       placeholder: "Select a PDF file in the main view to get started",
     },
     steps: [

From a6706fcb0c1c8e0b7ebbfc6f37cad7ce981d56b2 Mon Sep 17 00:00:00 2001
From: James Brunton <jbrunton96@gmail.com>
Date: Thu, 21 Aug 2025 08:48:25 +0100
Subject: [PATCH 08/11] V2 reduce boilerplate in param hooks (#4246)

# Description of Changes
Extend the base params in all tools param hooks, reducing boilerplate
code.
---
 .../tools/compress/CompressSettings.tsx       |   2 +-
 .../tools/ocr/AdvancedOCRSettings.tsx         |   2 +-
 .../src/components/tools/ocr/OCRSettings.tsx  |  12 +-
 .../src/constants/addWatermarkConstants.ts    |  15 --
 .../addPassword/useAddPasswordParameters.ts   |  49 ++---
 .../addWatermark/useAddWatermarkParameters.ts |  66 +++----
 .../useChangePermissionsParameters.ts         |  49 +----
 .../tools/compress/useCompressOperation.ts    |  12 +-
 .../tools/compress/useCompressParameters.ts   |  58 ++----
 .../convert/useConvertParameters.test.ts      |  85 ++++----
 .../tools/convert/useConvertParameters.ts     | 184 ++++++++----------
 .../src/hooks/tools/ocr/useOCROperation.ts    |   2 +-
 .../src/hooks/tools/ocr/useOCRParameters.ts   |  50 ++---
 .../useRemovePasswordParameters.ts            |  49 ++---
 .../tools/sanitize/useSanitizeParameters.ts   |  45 ++---
 .../hooks/tools/shared/useBaseParameters.ts   |  22 ++-
 .../hooks/tools/split/useSplitParameters.ts   |  75 +++----
 .../ConvertSmartDetectionIntegration.test.tsx |   9 +-
 18 files changed, 308 insertions(+), 478 deletions(-)

diff --git a/frontend/src/components/tools/compress/CompressSettings.tsx b/frontend/src/components/tools/compress/CompressSettings.tsx
index 47ff4189e..d82a99453 100644
--- a/frontend/src/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/components/tools/compress/CompressSettings.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Button, Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { CompressParameters } from "../../../hooks/tools/compress/useCompressOperation";
+import { CompressParameters } from "../../../hooks/tools/compress/useCompressParameters";
 
 interface CompressSettingsProps {
   parameters: CompressParameters;
diff --git a/frontend/src/components/tools/ocr/AdvancedOCRSettings.tsx b/frontend/src/components/tools/ocr/AdvancedOCRSettings.tsx
index 3bd8c1569..a38926edf 100644
--- a/frontend/src/components/tools/ocr/AdvancedOCRSettings.tsx
+++ b/frontend/src/components/tools/ocr/AdvancedOCRSettings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stack, Text, Checkbox } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { OCRParameters } from './OCRSettings';
+import { OCRParameters } from '../../../hooks/tools/ocr/useOCRParameters';
 
 export interface AdvancedOCRParameters {
   advancedOptions: string[];
diff --git a/frontend/src/components/tools/ocr/OCRSettings.tsx b/frontend/src/components/tools/ocr/OCRSettings.tsx
index 588884889..b4d9aa766 100644
--- a/frontend/src/components/tools/ocr/OCRSettings.tsx
+++ b/frontend/src/components/tools/ocr/OCRSettings.tsx
@@ -2,13 +2,7 @@ import React from 'react';
 import { Stack, Select, Text, Divider } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import LanguagePicker from './LanguagePicker';
-
-export interface OCRParameters {
-  languages: string[];
-  ocrType: string;
-  ocrRenderType: string;
-  additionalOptions: string[];
-}
+import { OCRParameters } from '../../../hooks/tools/ocr/useOCRParameters';
 
 interface OCRSettingsProps {
   parameters: OCRParameters;
@@ -25,7 +19,7 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
 
   return (
     <Stack gap="md">
-      
+
       <Select
         label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
         value={parameters.ocrType}
@@ -51,4 +45,4 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
   );
 };
 
-export default OCRSettings; 
\ No newline at end of file
+export default OCRSettings;
diff --git a/frontend/src/constants/addWatermarkConstants.ts b/frontend/src/constants/addWatermarkConstants.ts
index 65d26e5ca..7ea1fe29c 100644
--- a/frontend/src/constants/addWatermarkConstants.ts
+++ b/frontend/src/constants/addWatermarkConstants.ts
@@ -1,5 +1,3 @@
-import { AddWatermarkParameters } from "../hooks/tools/addWatermark/useAddWatermarkParameters";
-
 export interface AlphabetOption {
   value: string;
   label: string;
@@ -13,16 +11,3 @@ export const alphabetOptions: AlphabetOption[] = [
   { value: "chinese", label: "简体中文" },
   { value: "thai", label: "ไทย" },
 ];
-
-export const defaultWatermarkParameters: AddWatermarkParameters = {
-  watermarkType: undefined,
-  watermarkText: '',
-  fontSize: 12,
-  rotation: 0,
-  opacity: 50,
-  widthSpacer: 50,
-  heightSpacer: 50,
-  alphabet: 'roman',
-  customColor: '#d3d3d3',
-  convertPDFToImage: false
-};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/addPassword/useAddPasswordParameters.ts b/frontend/src/hooks/tools/addPassword/useAddPasswordParameters.ts
index ad428ebd5..50fe74d56 100644
--- a/frontend/src/hooks/tools/addPassword/useAddPasswordParameters.ts
+++ b/frontend/src/hooks/tools/addPassword/useAddPasswordParameters.ts
@@ -1,7 +1,8 @@
-import { useState } from 'react';
 import { ChangePermissionsParameters, ChangePermissionsParametersHook, useChangePermissionsParameters } from '../changePermissions/useChangePermissionsParameters';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface AddPasswordParameters {
+export interface AddPasswordParameters extends BaseParameters {
   password: string;
   ownerPassword: string;
   keyLength: number;
@@ -11,14 +12,9 @@ export interface AddPasswordFullParameters extends AddPasswordParameters {
   permissions: ChangePermissionsParameters;
 }
 
-export interface AddPasswordParametersHook {
+export interface AddPasswordParametersHook extends BaseParametersHook<AddPasswordParameters> {
   fullParameters: AddPasswordFullParameters;
-  parameters: AddPasswordParameters;
   permissions: ChangePermissionsParametersHook;
-  updateParameter: <K extends keyof AddPasswordParameters>(parameter: K, value: AddPasswordParameters[K]) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
 }
 
 export const defaultParameters: AddPasswordParameters = {
@@ -28,42 +24,31 @@ export const defaultParameters: AddPasswordParameters = {
 };
 
 export const useAddPasswordParameters = (): AddPasswordParametersHook => {
-  const [parameters, setParameters] = useState<AddPasswordParameters>(defaultParameters);
   const permissions = useChangePermissionsParameters();
+
+  const baseHook = useBaseParameters({
+    defaultParameters,
+    endpointName: 'add-password',
+    validateFn: () => {
+      // No required parameters for Add Password. Defer to permissions validation.
+      return permissions.validateParameters();
+    },
+  });
+
   const fullParameters: AddPasswordFullParameters = {
-    ...parameters,
+    ...baseHook.parameters,
     permissions: permissions.parameters,
   };
 
-  const updateParameter = <K extends keyof AddPasswordParameters>(parameter: K, value: AddPasswordParameters[K]) => {
-    setParameters(prev => ({
-       ...prev,
-       [parameter]: value,
-      })
-    );
-  };
-
   const resetParameters = () => {
-    setParameters(defaultParameters);
+    baseHook.resetParameters();
     permissions.resetParameters();
   };
 
-  const validateParameters = () => {
-    // No required parameters for Add Password. Defer to permissions validation.
-    return permissions.validateParameters();
-  };
-
-  const getEndpointName = () => {
-    return 'add-password';
-  };
-
   return {
+    ...baseHook,
     fullParameters,
-    parameters,
     permissions,
-    updateParameter,
     resetParameters,
-    validateParameters,
-    getEndpointName,
   };
 };
diff --git a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts b/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
index aa2f3bdda..a7cb23430 100644
--- a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
+++ b/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts
@@ -1,7 +1,7 @@
-import { useState, useCallback } from 'react';
-import { defaultWatermarkParameters } from '../../../constants/addWatermarkConstants';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface AddWatermarkParameters {
+export interface AddWatermarkParameters extends BaseParameters {
   watermarkType?: 'text' | 'image';
   watermarkText: string;
   watermarkImage?: File;
@@ -15,36 +15,34 @@ export interface AddWatermarkParameters {
   convertPDFToImage: boolean;
 }
 
+export const defaultParameters: AddWatermarkParameters = {
+  watermarkType: undefined,
+  watermarkText: '',
+  fontSize: 12,
+  rotation: 0,
+  opacity: 50,
+  widthSpacer: 50,
+  heightSpacer: 50,
+  alphabet: 'roman',
+  customColor: '#d3d3d3',
+  convertPDFToImage: false
+};
 
-export const useAddWatermarkParameters = () => {
-  const [parameters, setParameters] = useState<AddWatermarkParameters>(defaultWatermarkParameters);
+export type AddWatermarkParametersHook = BaseParametersHook<AddWatermarkParameters>;
 
-  const updateParameter = useCallback(<K extends keyof AddWatermarkParameters>(
-    key: K,
-    value: AddWatermarkParameters[K]
-  ) => {
-    setParameters(prev => ({ ...prev, [key]: value }));
-  }, []);
-
-  const resetParameters = useCallback(() => {
-    setParameters(defaultWatermarkParameters);
-  }, []);
-
-  const validateParameters = useCallback((): boolean => {
-    if (!parameters.watermarkType) {
-      return false;
-    }
-    if (parameters.watermarkType === 'text') {
-      return parameters.watermarkText.trim().length > 0;
-    } else {
-      return parameters.watermarkImage !== undefined;
-    }
-  }, [parameters]);
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters
-  };
-};
\ No newline at end of file
+export const useAddWatermarkParameters = (): AddWatermarkParametersHook => {
+  return useBaseParameters({
+    defaultParameters: defaultParameters,
+    endpointName: 'add-watermark',
+    validateFn: (params): boolean => {
+      if (!params.watermarkType) {
+        return false;
+      }
+      if (params.watermarkType === 'text') {
+        return params.watermarkText.trim().length > 0;
+      } else {
+        return params.watermarkImage !== undefined;
+      }
+    },
+  });
+};
diff --git a/frontend/src/hooks/tools/changePermissions/useChangePermissionsParameters.ts b/frontend/src/hooks/tools/changePermissions/useChangePermissionsParameters.ts
index 43d21f36f..7092798b7 100644
--- a/frontend/src/hooks/tools/changePermissions/useChangePermissionsParameters.ts
+++ b/frontend/src/hooks/tools/changePermissions/useChangePermissionsParameters.ts
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface ChangePermissionsParameters {
+export interface ChangePermissionsParameters extends BaseParameters {
   preventAssembly: boolean;
   preventExtractContent: boolean;
   preventExtractForAccessibility: boolean;
@@ -11,14 +12,6 @@ export interface ChangePermissionsParameters {
   preventPrintingFaithful: boolean;
 }
 
-export interface ChangePermissionsParametersHook {
-  parameters: ChangePermissionsParameters;
-  updateParameter: (parameter: keyof ChangePermissionsParameters, value: boolean) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
-}
-
 export const defaultParameters: ChangePermissionsParameters = {
   preventAssembly: false,
   preventExtractContent: false,
@@ -30,35 +23,11 @@ export const defaultParameters: ChangePermissionsParameters = {
   preventPrintingFaithful: false,
 };
 
+export type ChangePermissionsParametersHook = BaseParametersHook<ChangePermissionsParameters>;
+
 export const useChangePermissionsParameters = (): ChangePermissionsParametersHook => {
-  const [parameters, setParameters] = useState<ChangePermissionsParameters>(defaultParameters);
-
-  const updateParameter = <K extends keyof ChangePermissionsParameters>(parameter: K, value: ChangePermissionsParameters[K]) => {
-    setParameters(prev => ({
-       ...prev,
-       [parameter]: value,
-      })
-    );
-  };
-
-  const resetParameters = () => {
-    setParameters(defaultParameters);
-  };
-
-  const validateParameters = () => {
-    // Always valid - any combination of permissions is allowed
-    return true;
-  };
-
-  const getEndpointName = () => {
-    return 'add-password'; // Change Permissions is a fake endpoint for the Add Password tool
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
-  };
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'add-password', // Change Permissions is a fake endpoint for the Add Password tool
+  });
 };
diff --git a/frontend/src/hooks/tools/compress/useCompressOperation.ts b/frontend/src/hooks/tools/compress/useCompressOperation.ts
index ebcac8b66..c93d4b9e7 100644
--- a/frontend/src/hooks/tools/compress/useCompressOperation.ts
+++ b/frontend/src/hooks/tools/compress/useCompressOperation.ts
@@ -1,15 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
+import { useToolOperation } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
-
-export interface CompressParameters {
-  compressionLevel: number;
-  grayscale: boolean;
-  expectedSize: string;
-  compressionMethod: 'quality' | 'filesize';
-  fileSizeValue: string;
-  fileSizeUnit: 'KB' | 'MB';
-}
+import { CompressParameters } from './useCompressParameters';
 
 const buildFormData = (parameters: CompressParameters, file: File): FormData => {
   const formData = new FormData();
diff --git a/frontend/src/hooks/tools/compress/useCompressParameters.ts b/frontend/src/hooks/tools/compress/useCompressParameters.ts
index bbd1a0994..b423bdbec 100644
--- a/frontend/src/hooks/tools/compress/useCompressParameters.ts
+++ b/frontend/src/hooks/tools/compress/useCompressParameters.ts
@@ -1,15 +1,16 @@
-import { useState } from 'react';
-import { CompressParameters } from './useCompressOperation';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface CompressParametersHook {
-  parameters: CompressParameters;
-  updateParameter: (parameter: keyof CompressParameters, value: string | boolean | number) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
+export interface CompressParameters extends BaseParameters {
+  compressionLevel: number;
+  grayscale: boolean;
+  expectedSize: string;
+  compressionMethod: 'quality' | 'filesize';
+  fileSizeValue: string;
+  fileSizeUnit: 'KB' | 'MB';
 }
 
-const initialParameters: CompressParameters = {
+const defaultParameters: CompressParameters = {
   compressionLevel: 5,
   grayscale: false,
   expectedSize: '',
@@ -18,32 +19,15 @@ const initialParameters: CompressParameters = {
   fileSizeUnit: 'MB',
 };
 
+export type CompressParametersHook = BaseParametersHook<CompressParameters>;
+
 export const useCompressParameters = (): CompressParametersHook => {
-  const [parameters, setParameters] = useState<CompressParameters>(initialParameters);
-
-  const updateParameter = (parameter: keyof CompressParameters, value: string | boolean | number) => {
-    setParameters(prev => ({ ...prev, [parameter]: value }));
-  };
-
-  const resetParameters = () => {
-    setParameters(initialParameters);
-  };
-
-  const validateParameters = () => {
-    // For compression, we only need to validate that compression level is within range
-    // and that at least one file is selected (at least, I think that's all we need to do here)
-    return parameters.compressionLevel >= 1 && parameters.compressionLevel <= 9;
-  };
-
-  const getEndpointName = () => {
-    return 'compress-pdf';
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
-  };
-};
\ No newline at end of file
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'compress-pdf',
+    validateFn: (params) => {
+      // For compression, we only need to validate that compression level is within range
+      return params.compressionLevel >= 1 && params.compressionLevel <= 9;
+    },
+  });
+};
diff --git a/frontend/src/hooks/tools/convert/useConvertParameters.test.ts b/frontend/src/hooks/tools/convert/useConvertParameters.test.ts
index b106c18cd..1c809c190 100644
--- a/frontend/src/hooks/tools/convert/useConvertParameters.test.ts
+++ b/frontend/src/hooks/tools/convert/useConvertParameters.test.ts
@@ -5,14 +5,15 @@
 import { describe, test, expect } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import { useConvertParameters } from './useConvertParameters';
+import { FIT_OPTIONS } from '../../../constants/convertConstants';
 
 describe('useConvertParameters', () => {
-  
+
   describe('Parameter Management', () => {
-    
+
     test('should initialize with default parameters', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       expect(result.current.parameters.fromExtension).toBe('');
       expect(result.current.parameters.toExtension).toBe('');
       expect(result.current.parameters.imageOptions.colorType).toBe('color');
@@ -28,46 +29,52 @@ describe('useConvertParameters', () => {
 
     test('should update individual parameters', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
       });
-      
+
       expect(result.current.parameters.fromExtension).toBe('pdf');
       expect(result.current.parameters.toExtension).toBe(''); // Should not affect other params
     });
 
     test('should update nested image options', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('imageOptions', {
           colorType: 'grayscale',
           dpi: 150,
-          singleOrMultiple: 'single'
+          singleOrMultiple: 'single',
+          fitOption: FIT_OPTIONS.FILL_PAGE,
+          autoRotate: false,
+          combineImages: false,
         });
       });
-      
+
       expect(result.current.parameters.imageOptions.colorType).toBe('grayscale');
       expect(result.current.parameters.imageOptions.dpi).toBe(150);
       expect(result.current.parameters.imageOptions.singleOrMultiple).toBe('single');
+      expect(result.current.parameters.imageOptions.fitOption).toBe(FIT_OPTIONS.FILL_PAGE);
+      expect(result.current.parameters.imageOptions.autoRotate).toBe(false);
+      expect(result.current.parameters.imageOptions.combineImages).toBe(false);
     });
 
     test('should update nested HTML options', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('htmlOptions', {
           zoomLevel: 1.5
         });
       });
-      
+
       expect(result.current.parameters.htmlOptions.zoomLevel).toBe(1.5);
     });
 
     test('should update nested email options', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('emailOptions', {
           includeAttachments: false,
@@ -76,7 +83,7 @@ describe('useConvertParameters', () => {
           includeAllRecipients: true
         });
       });
-      
+
       expect(result.current.parameters.emailOptions.includeAttachments).toBe(false);
       expect(result.current.parameters.emailOptions.maxAttachmentSizeMB).toBe(20);
       expect(result.current.parameters.emailOptions.downloadHtml).toBe(true);
@@ -85,49 +92,49 @@ describe('useConvertParameters', () => {
 
     test('should update nested PDF/A options', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('pdfaOptions', {
           outputFormat: 'pdfa'
         });
       });
-      
+
       expect(result.current.parameters.pdfaOptions.outputFormat).toBe('pdfa');
     });
 
     test('should reset parameters to defaults', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
         result.current.updateParameter('toExtension', 'png');
       });
-      
+
       expect(result.current.parameters.fromExtension).toBe('pdf');
-      
+
       act(() => {
         result.current.resetParameters();
       });
-      
+
       expect(result.current.parameters.fromExtension).toBe('');
       expect(result.current.parameters.toExtension).toBe('');
     });
   });
 
   describe('Parameter Validation', () => {
-    
+
     test('should validate parameters correctly', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       // No parameters - should be invalid
       expect(result.current.validateParameters()).toBe(false);
-      
+
       // Only fromExtension - should be invalid
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
       });
       expect(result.current.validateParameters()).toBe(false);
-      
+
       // Both extensions with supported conversion - should be valid
       act(() => {
         result.current.updateParameter('toExtension', 'png');
@@ -137,63 +144,63 @@ describe('useConvertParameters', () => {
 
     test('should validate unsupported conversions', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
         result.current.updateParameter('toExtension', 'unsupported');
       });
-      
+
       expect(result.current.validateParameters()).toBe(false);
     });
 
   });
 
   describe('Endpoint Generation', () => {
-    
+
     test('should generate correct endpoint names', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
         result.current.updateParameter('toExtension', 'png');
       });
-      
+
       const endpointName = result.current.getEndpointName();
       expect(endpointName).toBe('pdf-to-img');
     });
 
     test('should generate correct endpoint URLs', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'pdf');
         result.current.updateParameter('toExtension', 'png');
       });
-      
+
       const endpoint = result.current.getEndpoint();
       expect(endpoint).toBe('/api/v1/convert/pdf/img');
     });
 
     test('should return empty strings for invalid conversions', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       act(() => {
         result.current.updateParameter('fromExtension', 'invalid');
         result.current.updateParameter('toExtension', 'invalid');
       });
-      
+
       expect(result.current.getEndpointName()).toBe('');
       expect(result.current.getEndpoint()).toBe('');
     });
   });
 
   describe('Available Extensions', () => {
-    
+
     test('should return available extensions for valid source format', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       const availableExtensions = result.current.getAvailableToExtensions('pdf');
-      
+
       expect(availableExtensions.length).toBeGreaterThan(0);
       expect(availableExtensions.some(ext => ext.value === 'png')).toBe(true);
       expect(availableExtensions.some(ext => ext.value === 'jpg')).toBe(true);
@@ -201,9 +208,9 @@ describe('useConvertParameters', () => {
 
     test('should return empty array for invalid source format', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       const availableExtensions = result.current.getAvailableToExtensions('invalid');
-      
+
       expect(availableExtensions).toEqual([{
         "group": "Document",
         "label": "PDF",
@@ -213,11 +220,11 @@ describe('useConvertParameters', () => {
 
     test('should return empty array for empty source format', () => {
       const { result } = renderHook(() => useConvertParameters());
-      
+
       const availableExtensions = result.current.getAvailableToExtensions('');
-      
+
       expect(availableExtensions).toEqual([]);
     });
   });
 
-});
\ No newline at end of file
+});
diff --git a/frontend/src/hooks/tools/convert/useConvertParameters.ts b/frontend/src/hooks/tools/convert/useConvertParameters.ts
index 9843ef44f..64ba7a38e 100644
--- a/frontend/src/hooks/tools/convert/useConvertParameters.ts
+++ b/frontend/src/hooks/tools/convert/useConvertParameters.ts
@@ -1,6 +1,5 @@
-import { useState, useEffect } from 'react';
-import { 
-  COLOR_TYPES, 
+import {
+  COLOR_TYPES,
   OUTPUT_OPTIONS,
   FIT_OPTIONS,
   TO_FORMAT_OPTIONS,
@@ -11,8 +10,10 @@ import {
 } from '../../../constants/convertConstants';
 import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat, isWebFormat } from '../../../utils/convertUtils';
 import { detectFileExtension as detectFileExtensionUtil } from '../../../utils/fileUtils';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface ConvertParameters {
+export interface ConvertParameters extends BaseParameters {
   fromExtension: string;
   toExtension: string;
   imageOptions: {
@@ -39,18 +40,13 @@ export interface ConvertParameters {
   smartDetectionType: 'mixed' | 'images' | 'web' | 'none';
 }
 
-export interface ConvertParametersHook {
-  parameters: ConvertParameters;
-  updateParameter: (parameter: keyof ConvertParameters, value: any) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
+export interface ConvertParametersHook extends BaseParametersHook<ConvertParameters> {
   getEndpoint: () => string;
   getAvailableToExtensions: (fromExtension: string) => Array<{value: string, label: string, group: string}>;
   analyzeFileTypes: (files: Array<{name: string}>) => void;
 }
 
-const initialParameters: ConvertParameters = {
+const defaultParameters: ConvertParameters = {
   fromExtension: '',
   toExtension: '',
   imageOptions: {
@@ -77,67 +73,63 @@ const initialParameters: ConvertParameters = {
   smartDetectionType: 'none',
 };
 
-export const useConvertParameters = (): ConvertParametersHook => {
-  const [parameters, setParameters] = useState<ConvertParameters>(initialParameters);
+const validateParameters = (params: ConvertParameters): boolean => {
+  const { fromExtension, toExtension } = params;
 
-  const updateParameter = (parameter: keyof ConvertParameters, value: any) => {
-    setParameters(prev => ({ ...prev, [parameter]: value }));
-  };
+  if (!fromExtension || !toExtension) return false;
 
-  const resetParameters = () => {
-    setParameters(initialParameters);
-  };
+  // Handle dynamic format identifiers (file-<extension>)
+  let supportedToExtensions: string[] = [];
+  if (fromExtension.startsWith('file-')) {
+    // Dynamic format - use 'any' conversion options
+    supportedToExtensions = CONVERSION_MATRIX['any'] || [];
+  } else {
+    // Regular format - check conversion matrix
+    supportedToExtensions = CONVERSION_MATRIX[fromExtension] || [];
+  }
 
-  const validateParameters = () => {
-    const { fromExtension, toExtension } = parameters;
-    
-    if (!fromExtension || !toExtension) return false;
-    
-    // Handle dynamic format identifiers (file-<extension>)
-    let supportedToExtensions: string[] = [];
-    if (fromExtension.startsWith('file-')) {
-      // Dynamic format - use 'any' conversion options
-      supportedToExtensions = CONVERSION_MATRIX['any'] || [];
-    } else {
-      // Regular format - check conversion matrix
-      supportedToExtensions = CONVERSION_MATRIX[fromExtension] || [];
-    }
-    
-    if (!supportedToExtensions.includes(toExtension)) {
-      return false;
-    }
-    
-    return true;
-  };
+  if (!supportedToExtensions.includes(toExtension)) {
+    return false;
+  }
 
-  const getEndpointName = () => {
-    const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = parameters;
-    
-    if (isSmartDetection) {
-      if (smartDetectionType === 'mixed') {
-        // Mixed file types -> PDF using file-to-pdf endpoint
-        return 'file-to-pdf';
-      } else if (smartDetectionType === 'images') {
-        // All images -> PDF using img-to-pdf endpoint
-        return 'img-to-pdf';
-      } else if (smartDetectionType === 'web') {
-        // All web files -> PDF using html-to-pdf endpoint
-        return 'html-to-pdf';
-      }
-    }
-    
-    // Handle dynamic format identifiers (file-<extension>)
-    if (fromExtension.startsWith('file-')) {
-      // Dynamic format - use file-to-pdf endpoint
+  return true;
+};
+
+const getEndpointName = (params: ConvertParameters): string => {
+  const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = params;
+
+  if (isSmartDetection) {
+    if (smartDetectionType === 'mixed') {
+      // Mixed file types -> PDF using file-to-pdf endpoint
       return 'file-to-pdf';
+    } else if (smartDetectionType === 'images') {
+      // All images -> PDF using img-to-pdf endpoint
+      return 'img-to-pdf';
+    } else if (smartDetectionType === 'web') {
+      // All web files -> PDF using html-to-pdf endpoint
+      return 'html-to-pdf';
     }
-    
-    return getEndpointNameUtil(fromExtension, toExtension);
-  };
+  }
+
+  // Handle dynamic format identifiers (file-<extension>)
+  if (fromExtension.startsWith('file-')) {
+    // Dynamic format - use file-to-pdf endpoint
+    return 'file-to-pdf';
+  }
+
+  return getEndpointNameUtil(fromExtension, toExtension);
+};
+
+export const useConvertParameters = (): ConvertParametersHook => {
+  const baseHook = useBaseParameters({
+    defaultParameters,
+    endpointName: getEndpointName,
+    validateFn: validateParameters,
+  });
 
   const getEndpoint = () => {
-    const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = parameters;
-    
+    const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = baseHook.parameters;
+
     if (isSmartDetection) {
       if (smartDetectionType === 'mixed') {
         // Mixed file types -> PDF using file-to-pdf endpoint
@@ -150,37 +142,37 @@ export const useConvertParameters = (): ConvertParametersHook => {
         return '/api/v1/convert/html/pdf';
       }
     }
-    
+
     // Handle dynamic format identifiers (file-<extension>)
     if (fromExtension.startsWith('file-')) {
       // Dynamic format - use file-to-pdf endpoint
       return '/api/v1/convert/file/pdf';
     }
-    
+
     return getEndpointUrl(fromExtension, toExtension);
   };
 
   const getAvailableToExtensions = (fromExtension: string) => {
     if (!fromExtension) return [];
-    
+
     // Handle dynamic format identifiers (file-<extension>)
     if (fromExtension.startsWith('file-')) {
       // Dynamic format - use 'any' conversion options (file-to-pdf)
       const supportedExtensions = CONVERSION_MATRIX['any'] || [];
-      return TO_FORMAT_OPTIONS.filter(option => 
+      return TO_FORMAT_OPTIONS.filter(option =>
         supportedExtensions.includes(option.value)
       );
     }
-    
+
     let supportedExtensions = CONVERSION_MATRIX[fromExtension] || [];
-    
-    // If no explicit conversion exists, but file-to-pdf might be available, 
+
+    // If no explicit conversion exists, but file-to-pdf might be available,
     // fall back to 'any' conversion (which converts unknown files to PDF via file-to-pdf)
     if (supportedExtensions.length === 0 && fromExtension !== 'any') {
       supportedExtensions = CONVERSION_MATRIX['any'] || [];
     }
-    
-    return TO_FORMAT_OPTIONS.filter(option => 
+
+    return TO_FORMAT_OPTIONS.filter(option =>
       supportedExtensions.includes(option.value)
     );
   };
@@ -189,7 +181,7 @@ export const useConvertParameters = (): ConvertParametersHook => {
   const analyzeFileTypes = (files: Array<{name: string}>) => {
     if (files.length === 0) {
       // No files - only reset smart detection, keep user's format choices
-      setParameters(prev => ({
+      baseHook.setParameters(prev => ({
         ...prev,
         isSmartDetection: false,
         smartDetectionType: 'none'
@@ -197,13 +189,13 @@ export const useConvertParameters = (): ConvertParametersHook => {
       }));
       return;
     }
-    
+
     if (files.length === 1) {
       // Single file - use regular detection with smart target selection
       const detectedExt = detectFileExtensionUtil(files[0].name);
       let fromExt = detectedExt;
       let availableTargets = detectedExt ? CONVERSION_MATRIX[detectedExt] || [] : [];
-      
+
       // If no explicit conversion exists for this file type, create a dynamic format entry
       // and fall back to 'any' conversion logic for the actual endpoint
       if (availableTargets.length === 0 && detectedExt) {
@@ -214,21 +206,21 @@ export const useConvertParameters = (): ConvertParametersHook => {
         fromExt = 'any';
         availableTargets = CONVERSION_MATRIX['any'] || [];
       }
-      
-      setParameters(prev => {
+
+      baseHook.setParameters(prev => {
         // Check if current toExtension is still valid for the new fromExtension
         const currentToExt = prev.toExtension;
         const isCurrentToExtValid = availableTargets.includes(currentToExt);
-        
+
         // Auto-select target only if:
         // 1. No current target is set, OR
-        // 2. Current target is invalid for new source type, OR  
+        // 2. Current target is invalid for new source type, OR
         // 3. There's only one possible target (forced conversion)
         let newToExtension = currentToExt;
         if (!currentToExt || !isCurrentToExtValid) {
           newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
         }
-        
+
         return {
           ...prev,
           isSmartDetection: false,
@@ -249,27 +241,27 @@ export const useConvertParameters = (): ConvertParametersHook => {
       const detectedExt = uniqueExtensions[0];
       let fromExt = detectedExt;
       let availableTargets = CONVERSION_MATRIX[detectedExt] || [];
-      
+
       // If no explicit conversion exists for this file type, fall back to 'any'
       if (availableTargets.length === 0) {
         fromExt = 'any';
         availableTargets = CONVERSION_MATRIX['any'] || [];
       }
-      
-      setParameters(prev => {
+
+      baseHook.setParameters(prev => {
         // Check if current toExtension is still valid for the new fromExtension
         const currentToExt = prev.toExtension;
         const isCurrentToExtValid = availableTargets.includes(currentToExt);
-        
+
         // Auto-select target only if:
         // 1. No current target is set, OR
-        // 2. Current target is invalid for new source type, OR  
+        // 2. Current target is invalid for new source type, OR
         // 3. There's only one possible target (forced conversion)
         let newToExtension = currentToExt;
         if (!currentToExt || !isCurrentToExtValid) {
           newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
         }
-        
+
         return {
           ...prev,
           isSmartDetection: false,
@@ -282,10 +274,10 @@ export const useConvertParameters = (): ConvertParametersHook => {
       // Mixed file types
       const allImages = uniqueExtensions.every(ext => isImageFormat(ext));
       const allWeb = uniqueExtensions.every(ext => isWebFormat(ext));
-      
+
       if (allImages) {
         // All files are images - use image-to-pdf conversion
-        setParameters(prev => ({
+        baseHook.setParameters(prev => ({
           ...prev,
           isSmartDetection: true,
           smartDetectionType: 'images',
@@ -294,7 +286,7 @@ export const useConvertParameters = (): ConvertParametersHook => {
         }));
       } else if (allWeb) {
         // All files are web files - use html-to-pdf conversion
-        setParameters(prev => ({
+        baseHook.setParameters(prev => ({
           ...prev,
           isSmartDetection: true,
           smartDetectionType: 'web',
@@ -302,8 +294,8 @@ export const useConvertParameters = (): ConvertParametersHook => {
           toExtension: 'pdf'
         }));
       } else {
-        // Mixed non-image types - use file-to-pdf conversion  
-        setParameters(prev => ({
+        // Mixed non-image types - use file-to-pdf conversion
+        baseHook.setParameters(prev => ({
           ...prev,
           isSmartDetection: true,
           smartDetectionType: 'mixed',
@@ -315,13 +307,9 @@ export const useConvertParameters = (): ConvertParametersHook => {
   };
 
   return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
+    ...baseHook,
     getEndpoint,
     getAvailableToExtensions,
     analyzeFileTypes,
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/hooks/tools/ocr/useOCROperation.ts b/frontend/src/hooks/tools/ocr/useOCROperation.ts
index 419a46f60..8beeff950 100644
--- a/frontend/src/hooks/tools/ocr/useOCROperation.ts
+++ b/frontend/src/hooks/tools/ocr/useOCROperation.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { OCRParameters } from '../../../components/tools/ocr/OCRSettings';
+import { OCRParameters } from './useOCRParameters';
 import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
 import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
 import { useToolResources } from '../shared/useToolResources';
diff --git a/frontend/src/hooks/tools/ocr/useOCRParameters.ts b/frontend/src/hooks/tools/ocr/useOCRParameters.ts
index 23702cdce..0fbda4a33 100644
--- a/frontend/src/hooks/tools/ocr/useOCRParameters.ts
+++ b/frontend/src/hooks/tools/ocr/useOCRParameters.ts
@@ -1,13 +1,15 @@
-import { useState } from 'react';
-import { OCRParameters } from '../../../components/tools/ocr/OCRSettings';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface OCRParametersHook {
-  parameters: OCRParameters;
-  updateParameter: (key: keyof OCRParameters, value: any) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
+export interface OCRParameters extends BaseParameters {
+  languages: string[];
+  ocrType: string;
+  ocrRenderType: string;
+  additionalOptions: string[];
 }
 
+export type OCRParametersHook = BaseParametersHook<OCRParameters>;
+
 const defaultParameters: OCRParameters = {
   languages: [],
   ocrType: 'skip-text',
@@ -16,28 +18,12 @@ const defaultParameters: OCRParameters = {
 };
 
 export const useOCRParameters = (): OCRParametersHook => {
-  const [parameters, setParameters] = useState<OCRParameters>(defaultParameters);
-
-  const updateParameter = (key: keyof OCRParameters, value: any) => {
-    setParameters(prev => ({
-      ...prev,
-      [key]: value
-    }));
-  };
-
-  const resetParameters = () => {
-    setParameters(defaultParameters);
-  };
-
-  const validateParameters = () => {
-    // At minimum, we need at least one language selected
-    return parameters.languages.length > 0;
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-  };
-}; 
\ No newline at end of file
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'ocr-pdf',
+    validateFn: (params) => {
+      // At minimum, we need at least one language selected
+      return params.languages.length > 0;
+    },
+  });
+};
diff --git a/frontend/src/hooks/tools/removePassword/useRemovePasswordParameters.ts b/frontend/src/hooks/tools/removePassword/useRemovePasswordParameters.ts
index df6b117f2..fc39db546 100644
--- a/frontend/src/hooks/tools/removePassword/useRemovePasswordParameters.ts
+++ b/frontend/src/hooks/tools/removePassword/useRemovePasswordParameters.ts
@@ -1,49 +1,22 @@
-import { useState } from 'react';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface RemovePasswordParameters {
+export interface RemovePasswordParameters extends BaseParameters {
   password: string;
 }
 
-export interface RemovePasswordParametersHook {
-  parameters: RemovePasswordParameters;
-  updateParameter: <K extends keyof RemovePasswordParameters>(parameter: K, value: RemovePasswordParameters[K]) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
-}
+export type RemovePasswordParametersHook = BaseParametersHook<RemovePasswordParameters>;
 
 export const defaultParameters: RemovePasswordParameters = {
   password: '',
 };
 
 export const useRemovePasswordParameters = (): RemovePasswordParametersHook => {
-  const [parameters, setParameters] = useState<RemovePasswordParameters>(defaultParameters);
-
-  const updateParameter = <K extends keyof RemovePasswordParameters>(parameter: K, value: RemovePasswordParameters[K]) => {
-    setParameters(prev => ({
-       ...prev,
-       [parameter]: value,
-      })
-    );
-  };
-
-  const resetParameters = () => {
-    setParameters(defaultParameters);
-  };
-
-  const validateParameters = () => {
-    return parameters.password !== '';
-  };
-
-  const getEndpointName = () => {
-    return 'remove-password';
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
-  };
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'remove-password',
+    validateFn: (params) => {
+      return params.password !== '';
+    },
+  });
 };
diff --git a/frontend/src/hooks/tools/sanitize/useSanitizeParameters.ts b/frontend/src/hooks/tools/sanitize/useSanitizeParameters.ts
index ea3068c2d..9e050a7e5 100644
--- a/frontend/src/hooks/tools/sanitize/useSanitizeParameters.ts
+++ b/frontend/src/hooks/tools/sanitize/useSanitizeParameters.ts
@@ -1,6 +1,7 @@
-import { useState, useCallback } from 'react';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface SanitizeParameters {
+export interface SanitizeParameters extends BaseParameters {
   removeJavaScript: boolean;
   removeEmbeddedFiles: boolean;
   removeXMPMetadata: boolean;
@@ -18,36 +19,14 @@ export const defaultParameters: SanitizeParameters = {
   removeFonts: false,
 };
 
-export const useSanitizeParameters = () => {
-  const [parameters, setParameters] = useState<SanitizeParameters>(defaultParameters);
+export type SanitizeParametersHook = BaseParametersHook<SanitizeParameters>;
 
-  const updateParameter = useCallback(<K extends keyof SanitizeParameters>(
-    key: K,
-    value: SanitizeParameters[K]
-  ) => {
-    setParameters(prev => ({
-      ...prev,
-      [key]: value
-    }));
-  }, []);
-
-  const resetParameters = useCallback(() => {
-    setParameters(defaultParameters);
-  }, []);
-
-  const validateParameters = useCallback(() => {
-    return Object.values(parameters).some(value => value === true);
-  }, [parameters]);
-
-  const getEndpointName = () => {
-    return 'sanitize-pdf'
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
-  };
+export const useSanitizeParameters = (): SanitizeParametersHook => {
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: 'sanitize-pdf',
+    validateFn: (params) => {
+      return Object.values(params).some(value => value === true);
+    },
+  });
 };
diff --git a/frontend/src/hooks/tools/shared/useBaseParameters.ts b/frontend/src/hooks/tools/shared/useBaseParameters.ts
index af244e6f9..941f8cdd2 100644
--- a/frontend/src/hooks/tools/shared/useBaseParameters.ts
+++ b/frontend/src/hooks/tools/shared/useBaseParameters.ts
@@ -1,7 +1,8 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, Dispatch, SetStateAction } from 'react';
 
 export interface BaseParametersHook<T> {
   parameters: T;
+  setParameters: Dispatch<SetStateAction<T>>;
   updateParameter: <K extends keyof T>(parameter: K, value: T[K]) => void;
   resetParameters: () => void;
   validateParameters: () => boolean;
@@ -10,7 +11,7 @@ export interface BaseParametersHook<T> {
 
 export interface BaseParametersConfig<T> {
   defaultParameters: T;
-  endpointName: string;
+  endpointName: string | ((params: T) => string);
   validateFn?: (params: T) => boolean;
 }
 
@@ -32,15 +33,24 @@ export function useBaseParameters<T>(config: BaseParametersConfig<T>): BaseParam
     return config.validateFn ? config.validateFn(parameters) : true;
   }, [parameters, config.validateFn]);
 
-  const getEndpointName = useCallback(() => {
-    return config.endpointName;
-  }, [config.endpointName]);
+  const endpointName = config.endpointName;
+  let getEndpointName: () => string;
+  if (typeof endpointName === "string") {
+    getEndpointName = useCallback(() => {
+      return endpointName;
+    }, []);
+  } else {
+    getEndpointName = useCallback(() => {
+      return endpointName(parameters);
+    }, [parameters]);
+  }
 
   return {
     parameters,
+    setParameters,
     updateParameter,
     resetParameters,
     validateParameters,
     getEndpointName,
   };
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/tools/split/useSplitParameters.ts b/frontend/src/hooks/tools/split/useSplitParameters.ts
index dd3eb218f..b31ddbae6 100644
--- a/frontend/src/hooks/tools/split/useSplitParameters.ts
+++ b/frontend/src/hooks/tools/split/useSplitParameters.ts
@@ -1,7 +1,8 @@
-import { useState } from 'react';
 import { SPLIT_MODES, SPLIT_TYPES, ENDPOINTS, type SplitMode, SplitType } from '../../../constants/splitConstants';
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
 
-export interface SplitParameters {
+export interface SplitParameters extends BaseParameters {
   mode: SplitMode | '';
   pages: string;
   hDiv: string;
@@ -14,15 +15,9 @@ export interface SplitParameters {
   allowDuplicates: boolean;
 }
 
-export interface SplitParametersHook {
-  parameters: SplitParameters;
-  updateParameter: (parameter: keyof SplitParameters, value: string | boolean) => void;
-  resetParameters: () => void;
-  validateParameters: () => boolean;
-  getEndpointName: () => string;
-}
+export type SplitParametersHook = BaseParametersHook<SplitParameters>;
 
-const initialParameters: SplitParameters = {
+const defaultParameters: SplitParameters = {
   mode: '',
   pages: '',
   hDiv: '2',
@@ -36,43 +31,27 @@ const initialParameters: SplitParameters = {
 };
 
 export const useSplitParameters = (): SplitParametersHook => {
-  const [parameters, setParameters] = useState<SplitParameters>(initialParameters);
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: (params) => {
+      if (!params.mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES];
+      return ENDPOINTS[params.mode as SplitMode];
+    },
+    validateFn: (params) => {
+      if (!params.mode) return false;
 
-  const updateParameter = (parameter: keyof SplitParameters, value: string | boolean) => {
-    setParameters(prev => ({ ...prev, [parameter]: value }));
-  };
-
-  const resetParameters = () => {
-    setParameters(initialParameters);
-  };
-
-  const validateParameters = () => {
-    if (!parameters.mode) return false;
-
-    switch (parameters.mode) {
-      case SPLIT_MODES.BY_PAGES:
-        return parameters.pages.trim() !== "";
-      case SPLIT_MODES.BY_SECTIONS:
-        return parameters.hDiv !== "" && parameters.vDiv !== "";
-      case SPLIT_MODES.BY_SIZE_OR_COUNT:
-        return parameters.splitValue.trim() !== "";
-      case SPLIT_MODES.BY_CHAPTERS:
-        return parameters.bookmarkLevel !== "";
-      default:
-        return false;
-    }
-  };
-
-  const getEndpointName = () => {
-    if (!parameters.mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES];
-    return ENDPOINTS[parameters.mode as SplitMode];
-  };
-
-  return {
-    parameters,
-    updateParameter,
-    resetParameters,
-    validateParameters,
-    getEndpointName,
-  };
+      switch (params.mode) {
+        case SPLIT_MODES.BY_PAGES:
+          return params.pages.trim() !== "";
+        case SPLIT_MODES.BY_SECTIONS:
+          return params.hDiv !== "" && params.vDiv !== "";
+        case SPLIT_MODES.BY_SIZE_OR_COUNT:
+          return params.splitValue.trim() !== "";
+        case SPLIT_MODES.BY_CHAPTERS:
+          return params.bookmarkLevel !== "";
+        default:
+          return false;
+      }
+    },
+  });
 };
diff --git a/frontend/src/tests/convert/ConvertSmartDetectionIntegration.test.tsx b/frontend/src/tests/convert/ConvertSmartDetectionIntegration.test.tsx
index 764095ba8..4e9fb7908 100644
--- a/frontend/src/tests/convert/ConvertSmartDetectionIntegration.test.tsx
+++ b/frontend/src/tests/convert/ConvertSmartDetectionIntegration.test.tsx
@@ -13,6 +13,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from '../../i18n/config';
 import axios from 'axios';
 import { detectFileExtension } from '../../utils/fileUtils';
+import { FIT_OPTIONS } from '../../constants/convertConstants';
 
 // Mock axios
 vi.mock('axios');
@@ -23,8 +24,8 @@ vi.mock('../../services/fileStorage', () => ({
   fileStorage: {
     init: vi.fn().mockResolvedValue(undefined),
     storeFile: vi.fn().mockImplementation((file, thumbnail) => {
-      return Promise.resolve({ 
-        id: `mock-id-${file.name}`, 
+      return Promise.resolve({
+        id: `mock-id-${file.name}`,
         name: file.name,
         size: file.size,
         type: file.type,
@@ -403,7 +404,7 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
           colorType: 'grayscale',
           dpi: 150,
           singleOrMultiple: 'single',
-          fitOption: 'fitToPage',
+          fitOption: FIT_OPTIONS.FIT_PAGE,
           autoRotate: false,
           combineImages: true
         });
@@ -417,7 +418,7 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       const formData = (mockedAxios.post as Mock).mock.calls[0][1] as FormData;
-      expect(formData.get('fitOption')).toBe('fitToPage');
+      expect(formData.get('fitOption')).toBe(FIT_OPTIONS.FIT_PAGE);
       expect(formData.get('colorType')).toBe('grayscale');
       expect(formData.get('autoRotate')).toBe('false');
     });

From a33e51351b2a8c59989f335686bb69c08b44bb20 Mon Sep 17 00:00:00 2001
From: James Brunton <jbrunton96@gmail.com>
Date: Thu, 21 Aug 2025 09:26:17 +0100
Subject: [PATCH 09/11] V2 hide incomplete tools (#4250)

# Description of Changes
Filters out tools which don't exist in All Tools list. Also fixes a
bunch of translation warnings in the log.
---
 .../public/locales/en-GB/translation.json     | 124 +++++++-----------
 frontend/src/data/toolsTaxonomy.ts            |   3 +-
 .../src/data/useTranslatedToolRegistry.tsx    |  72 +++++-----
 frontend/src/hooks/useToolManagement.tsx      |   4 +-
 4 files changed, 96 insertions(+), 107 deletions(-)

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index efcc3de0c..2b00d7108 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -366,14 +366,6 @@
       "title": "Convert",
       "desc": "Convert files between different formats"
     },
-    "imageToPDF": {
-      "title": "Image to PDF",
-      "desc": "Convert a image (PNG, JPEG, GIF) to PDF."
-    },
-    "pdfToImage": {
-      "title": "PDF to Image",
-      "desc": "Convert a PDF to a image. (PNG, JPEG, GIF)"
-    },
     "pdfOrganiser": {
       "title": "Organise",
       "desc": "Remove/Rearrange pages in any order"
@@ -390,14 +382,6 @@
       "title": "Add Watermark",
       "desc": "Add a custom watermark to your PDF document."
     },
-    "permissions": {
-      "title": "Change Permissions",
-      "desc": "Change the permissions of your PDF document"
-    },
-    "pageRemover": {
-      "title": "Remove",
-      "desc": "Delete unwanted pages from your PDF document."
-    },
     "removePassword": {
       "title": "Remove Password",
       "desc": "Remove password protection from your PDF document."
@@ -414,10 +398,6 @@
       "title": "Change Metadata",
       "desc": "Change/Remove/Add metadata from a PDF document"
     },
-    "fileToPDF": {
-      "title": "Convert file to PDF",
-      "desc": "Convert nearly any file to PDF (DOCX, PNG, XLS, PPT, TXT and more)"
-    },
     "ocr": {
       "title": "OCR / Cleanup scans",
       "desc": "Cleanup scans and detects text from images within a PDF and re-adds it as text."
@@ -426,30 +406,6 @@
       "title": "Extract Images",
       "desc": "Extracts all images from a PDF and saves them to zip"
     },
-    "pdfToPDFA": {
-      "title": "PDF to PDF/A",
-      "desc": "Convert PDF to PDF/A for long-term storage"
-    },
-    "PDFToWord": {
-      "title": "PDF to Word",
-      "desc": "Convert PDF to Word formats (DOC, DOCX and ODT)"
-    },
-    "PDFToPresentation": {
-      "title": "PDF to Presentation",
-      "desc": "Convert PDF to Presentation formats (PPT, PPTX and ODP)"
-    },
-    "PDFToText": {
-      "title": "PDF to RTF (Text)",
-      "desc": "Convert PDF to Text or RTF format"
-    },
-    "PDFToHTML": {
-      "title": "PDF to HTML",
-      "desc": "Convert PDF to HTML format"
-    },
-    "PDFToXML": {
-      "title": "PDF to XML",
-      "desc": "Convert PDF to XML format"
-    },
     "ScannerImageSplit": {
       "title": "Detect/Split Scanned photos",
       "desc": "Splits multiple photos from within a photo/PDF"
@@ -518,34 +474,14 @@
       "title": "Auto Split Pages",
       "desc": "Auto Split Scanned PDF with physical scanned page splitter QR Code"
     },
-    "sanitizePdf": {
+    "sanitize": {
       "title": "Sanitise",
-      "desc": "Remove scripts and other elements from PDF files"
-    },
-    "URLToPDF": {
-      "title": "URL/Website To PDF",
-      "desc": "Converts any http(s)URL to PDF"
-    },
-    "HTMLToPDF": {
-      "title": "HTML to PDF",
-      "desc": "Converts any HTML file or zip to PDF"
-    },
-    "MarkdownToPDF": {
-      "title": "Markdown to PDF",
-      "desc": "Converts any Markdown file to PDF"
-    },
-    "PDFToMarkdown": {
-      "title": "PDF to Markdown",
-      "desc": "Converts any PDF to Markdown"
+      "desc": "Remove potentially harmful elements from PDF files"
     },
     "getPdfInfo": {
       "title": "Get ALL Info on PDF",
       "desc": "Grabs any and all information possible on PDFs"
     },
-    "pageExtracter": {
-      "title": "Extract page(s)",
-      "desc": "Extracts select pages from PDF"
-    },
     "pdfToSinglePage": {
       "title": "PDF to Single Large Page",
       "desc": "Merges all PDF pages into one large single page"
@@ -562,14 +498,6 @@
       "title": "Manual Redaction",
       "desc": "Redacts a PDF based on selected text, drawn shapes and/or selected page(s)"
     },
-    "PDFToCSV": {
-      "title": "PDF to CSV",
-      "desc": "Extracts Tables from a PDF converting it to CSV"
-    },
-    "split-by-size-or-count": {
-      "title": "Auto Split by Size/Count",
-      "desc": "Split a single PDF into multiple documents based on size, page count, or document count"
-    },
     "overlay-pdfs": {
       "title": "Overlay PDFs",
       "desc": "Overlays PDFs on-top of another PDF"
@@ -625,6 +553,54 @@
     "reorganizePages": {
       "title": "Reorganize Pages",
       "desc": "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."
+    },
+    "extractPages": {
+      "title": "Extract Pages",
+      "desc": "Extract specific pages from a PDF document"
+    },
+    "removePages": {
+      "title": "Remove Pages",
+      "desc": "Remove specific pages from a PDF document"
+    },
+    "removeImagePdf": {
+      "title": "Remove Image",
+      "desc": "Remove images from PDF documents"
+    },
+    "autoSizeSplitPDF": {
+      "title": "Auto Split by Size/Count",
+      "desc": "Automatically split PDFs by file size or page count"
+    },
+    "adjust-contrast": {
+      "title": "Adjust Colours/Contrast",
+      "desc": "Adjust colours and contrast of PDF documents"
+    },
+    "replaceColorPdf": {
+      "title": "Replace & Invert Colour",
+      "desc": "Replace or invert colours in PDF documents"
+    },
+    "devApi": {
+      "title": "API",
+      "desc": "Link to API documentation"
+    },
+    "devFolderScanning": {
+      "title": "Automated Folder Scanning",
+      "desc": "Link to automated folder scanning guide"
+    },
+    "devSsoGuide": {
+      "title": "SSO Guide",
+      "desc": "Link to SSO guide"
+    },
+    "devAirgapped": {
+      "title": "Air-gapped Setup",
+      "desc": "Link to air-gapped setup guide"
+    },
+    "addPassword": {
+      "title": "Add Password",
+      "desc": "Add password protection and restrictions to PDF files"
+    },
+    "changePermissions": {
+      "title": "Change Permissions",
+      "desc": "Change document restrictions and permissions"
     }
   },
   "viewPdf": {
diff --git a/frontend/src/data/toolsTaxonomy.ts b/frontend/src/data/toolsTaxonomy.ts
index cb6b18c0d..a76752b87 100644
--- a/frontend/src/data/toolsTaxonomy.ts
+++ b/frontend/src/data/toolsTaxonomy.ts
@@ -1,5 +1,6 @@
 import { type TFunction } from 'i18next';
 import React from 'react';
+import { BaseToolProps } from '../types/tool';
 
 export enum SubcategoryId {
 	SIGNING = 'signing',
@@ -24,7 +25,7 @@ export enum ToolCategory {
 export type ToolRegistryEntry = {
 	icon: React.ReactNode;
 	name: string;
-	component: React.ComponentType<any> | null;
+	component: React.ComponentType<BaseToolProps> | null;
 	view: 'sign' | 'security' | 'format' | 'extract' | 'view' | 'merge' | 'pageEditor' | 'convert' | 'redact' | 'split' | 'convert' | 'remove' | 'compress' | 'external';
 	description: string;
 	category: ToolCategory;
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 359cf6d35..f27fbd5c7 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -15,13 +15,13 @@ import SingleLargePage from '../tools/SingleLargePage';
 import UnlockPdfForms from '../tools/UnlockPdfForms';
 import RemoveCertificateSign from '../tools/RemoveCertificateSign';
 
-
+const showPlaceholderTools = false; // For development purposes. Allows seeing the full list of tools, even if they're unimplemented
 
 // Hook to get the translated tool registry
 export function useFlatToolRegistry(): ToolRegistry {
-    const { t } = useTranslation();
-    
-    return {
+  const { t } = useTranslation();
+
+  const allTools: ToolRegistry = {
     // Signing
 
     "certSign": {
@@ -56,8 +56,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategory: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
         endpoints: ["add-password"]
-    },    
-    "add-watermark": {
+    },
+    "watermark": {
         icon: <span className="material-symbols-rounded">branding_watermark</span>,
         name: t("home.watermark.title", "Add Watermark"),
         component: AddWatermark,
@@ -148,8 +148,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.VERIFICATION
     },
-    
-    
+
+
     // Document Review
 
     "read": {
@@ -205,7 +205,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "pageEditor",
         description: t("home.reorganizePages.desc", "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."),
-        category: ToolCategory.STANDARD_TOOLS, 
+        category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.PAGE_FORMATTING
     },
     "adjust-page-size-scale": {
@@ -217,12 +217,12 @@ export function useFlatToolRegistry(): ToolRegistry {
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.PAGE_FORMATTING
     },
-    "add-page-numbers": {
+    "addPageNumbers": {
         icon: <span className="material-symbols-rounded">123</span>,
-        name: t("home.add-page-numbers.title", "Add Page Numbers"),
+        name: t("home.addPageNumbers.title", "Add Page Numbers"),
         component: null,
         view: "format",
-        description: t("home.add-page-numbers.desc", "Add Page numbers throughout a document in a set location"),
+        description: t("home.addPageNumbers.desc", "Add Page numbers throughout a document in a set location"),
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.PAGE_FORMATTING
     },
@@ -237,10 +237,10 @@ export function useFlatToolRegistry(): ToolRegistry {
     },
     "single-large-page": {
         icon: <span className="material-symbols-rounded">looks_one</span>,
-        name: t("home.PdfToSinglePage.title", "PDF to Single Large Page"),
+        name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
         component: SingleLargePage,
         view: "format",
-        description: t("home.PdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
+        description: t("home.pdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.PAGE_FORMATTING,
         maxFiles: -1,
@@ -259,12 +259,12 @@ export function useFlatToolRegistry(): ToolRegistry {
 
     // Extraction
 
-    "extract-pages": {
+    "extractPages": {
         icon: <span className="material-symbols-rounded">upload</span>,
-        name: t("home.extractPage.title", "Extract Pages"),
+        name: t("home.extractPages.title", "Extract Pages"),
         component: null,
         view: "extract",
-        description: t("home.extractPage.desc", "Extract specific pages from a PDF document"),
+        description: t("home.extractPages.desc", "Extract specific pages from a PDF document"),
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.EXTRACTION
     },
@@ -281,7 +281,7 @@ export function useFlatToolRegistry(): ToolRegistry {
 
     // Removal
 
-    "remove": {
+    "removePages": {
         icon: <span className="material-symbols-rounded">delete</span>,
         name: t("home.removePages.title", "Remove Pages"),
         component: null,
@@ -331,10 +331,10 @@ export function useFlatToolRegistry(): ToolRegistry {
     },
     "remove-certificate-sign": {
         icon: <span className="material-symbols-rounded">remove_moderator</span>,
-        name: t("home.removeCertSign.title", "Remove Certificate Signatures"),
+        name: t("home.removeCertSign.title", "Remove Certificate Sign"),
         component: RemoveCertificateSign,
         view: "security",
-        description: t("home.removeCertSign.desc", "Remove digital signatures from PDF documents"),
+        description: t("home.removeCertSign.desc", "Remove digital signature from PDF documents"),
         category: ToolCategory.STANDARD_TOOLS,
         subcategory: SubcategoryId.REMOVAL,
         maxFiles: -1,
@@ -384,12 +384,12 @@ export function useFlatToolRegistry(): ToolRegistry {
 
     // Advanced Formatting
 
-    "adjust-colors-contrast": {
+    "adjustContrast": {
         icon: <span className="material-symbols-rounded">palette</span>,
-        name: t("home.adjust-contrast.title", "Adjust Colors/Contrast"),
+        name: t("home.adjustContrast.title", "Adjust Colors/Contrast"),
         component: null,
         view: "format",
-        description: t("home.adjust-contrast.desc", "Adjust colors and contrast of PDF documents"),
+        description: t("home.adjustContrast.desc", "Adjust colors and contrast of PDF documents"),
         category: ToolCategory.ADVANCED_TOOLS,
         subcategory: SubcategoryId.ADVANCED_FORMATTING
     },
@@ -523,22 +523,22 @@ export function useFlatToolRegistry(): ToolRegistry {
         category: ToolCategory.RECOMMENDED_TOOLS,
         subcategory: SubcategoryId.GENERAL
     },
-    "compressPdfs": {
+    "compress": {
         icon: <span className="material-symbols-rounded">zoom_in_map</span>,
-        name: t("home.compressPdfs.title", "Compress"),
+        name: t("home.compress.title", "Compress"),
         component: CompressPdfPanel,
         view: "compress",
-        description: t("home.compressPdfs.desc", "Compress PDFs to reduce their file size."),
+        description: t("home.compress.desc", "Compress PDFs to reduce their file size."),
         category: ToolCategory.RECOMMENDED_TOOLS,
         subcategory: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "convert": {
         icon: <span className="material-symbols-rounded">sync_alt</span>,
-        name: t("home.fileToPDF.title", "Convert"),
+        name: t("home.convert.title", "Convert"),
         component: ConvertPanel,
         view: "convert",
-        description: t("home.fileToPDF.desc", "Convert files to and from PDF format"),
+        description: t("home.convert.desc", "Convert files to and from PDF format"),
         category: ToolCategory.RECOMMENDED_TOOLS,
         subcategory: SubcategoryId.GENERAL,
         maxFiles: -1,
@@ -616,5 +616,17 @@ export function useFlatToolRegistry(): ToolRegistry {
         category: ToolCategory.RECOMMENDED_TOOLS,
         subcategory: SubcategoryId.GENERAL
     },
-    };
-}
\ No newline at end of file
+  };
+
+  if (showPlaceholderTools) {
+    return allTools;
+  } else {
+    const filteredTools = Object.keys(allTools)
+      .filter(key => allTools[key].component !== null || allTools[key].link)
+      .reduce((obj, key) => {
+        obj[key] = allTools[key];
+        return obj;
+      }, {} as ToolRegistry);
+    return filteredTools;
+  }
+}
diff --git a/frontend/src/hooks/useToolManagement.tsx b/frontend/src/hooks/useToolManagement.tsx
index c19e5b6af..e991677a9 100644
--- a/frontend/src/hooks/useToolManagement.tsx
+++ b/frontend/src/hooks/useToolManagement.tsx
@@ -48,8 +48,8 @@ export const useToolManagement = (): ToolManagementResult => {
         const baseTool = baseRegistry[toolKey as keyof typeof baseRegistry];
         availableToolRegistry[toolKey] = {
           ...baseTool,
-          name: t(baseTool.name),
-          description: t(baseTool.description)
+          name: baseTool.name,
+          description: baseTool.description,
         };
       }
     });

From 949ffa01ad4b4f13632e8359c55fa606d3ca63aa Mon Sep 17 00:00:00 2001
From: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
Date: Thu, 21 Aug 2025 17:30:26 +0100
Subject: [PATCH 10/11] Feature/v2/file handling improvements (#4222)

# Description of Changes

A new universal file context rather than the splintered ones for the
main views, tools and manager we had before (manager still has its own
but its better integreated with the core context)
File context has been split it into a handful of different files
managing various file related issues separately to reduce the monolith -
FileReducer.ts - State management
  fileActions.ts - File operations
  fileSelectors.ts - Data access patterns
  lifecycle.ts - Resource cleanup and memory management
  fileHooks.ts - React hooks interface
  contexts.ts - Context providers
Improved thumbnail generation
Improved indexxedb handling
Stopped handling files as blobs were not necessary to improve
performance
A new library handling drag and drop
https://github.com/atlassian/pragmatic-drag-and-drop (Out of scope yes
but I broke the old one with the new filecontext and it needed doing so
it was a might as well)
A new library handling virtualisation on page editor
@tanstack/react-virtual, as above.
Quickly ripped out the last remnants of the old URL params stuff and
replaced with the beginnings of what will later become the new URL
navigation system (for now it just restores the tool name in url
behavior)
Fixed selected file not regestered when opening a tool
Fixed png thumbnails
Closes #(issue_number)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Reece Browne <you@example.com>
---
 .claude/settings.local.json                   |    5 +-
 frontend/package-lock.json                    |   52 +
 frontend/package.json                         |    2 +
 .../public/locales/en-GB/translation.json     |    4 +-
 frontend/public/thumbnailWorker.js            |  157 ---
 frontend/src/App.tsx                          |    9 +-
 frontend/src/commands/pageCommands.ts         |   30 +-
 .../src/components/FileCard.standalone.tsx    |  136 --
 frontend/src/components/FileManager.tsx       |   45 +-
 .../src/components/fileEditor/FileEditor.tsx  |  621 +++------
 .../fileManager/CompactFileDetails.tsx        |    6 +-
 .../components/fileManager/FileInfoCard.tsx   |    4 +-
 .../components/fileManager/FileListArea.tsx   |    4 +-
 .../components/fileManager/FileListItem.tsx   |   15 +-
 .../history/FileOperationHistory.tsx          |    8 +-
 frontend/src/components/layout/Workbench.tsx  |   20 +-
 .../components/pageEditor/DragDropGrid.tsx    |  203 +--
 .../components/pageEditor/FileThumbnail.tsx   |  193 ++-
 .../src/components/pageEditor/PageEditor.tsx  | 1068 +++++++--------
 .../components/pageEditor/PageThumbnail.tsx   |  188 +--
 frontend/src/components/shared/FileCard.tsx   |   14 +-
 frontend/src/components/shared/FileGrid.tsx   |   37 +-
 .../src/components/shared/FilePickerModal.tsx |    8 +-
 .../src/components/shared/FilePreview.tsx     |    6 +-
 .../src/components/shared/LandingPage.tsx     |    4 +-
 .../shared/NavigationWarningModal.tsx         |   10 +-
 .../src/components/shared/TopControls.tsx     |   78 +-
 .../shared/filePreview/DocumentThumbnail.tsx  |    4 +-
 .../tools/convert/ConvertSettings.tsx         |   36 +-
 frontend/src/components/viewer/Viewer.tsx     |   34 +-
 frontend/src/contexts/FileContext.tsx         | 1146 ++++-------------
 frontend/src/contexts/FileManagerContext.tsx  |   90 +-
 .../src/contexts/FileSelectionContext.tsx     |  100 --
 frontend/src/contexts/FilesModalContext.tsx   |   25 +-
 frontend/src/contexts/IndexedDBContext.tsx    |  207 +++
 frontend/src/contexts/NavigationContext.tsx   |  231 ++++
 frontend/src/contexts/SidebarContext.tsx      |   14 +-
 frontend/src/contexts/ToolWorkflowContext.tsx |    8 +-
 frontend/src/contexts/file/FileReducer.ts     |  240 ++++
 frontend/src/contexts/file/contexts.ts        |   13 +
 frontend/src/contexts/file/fileActions.ts     |  370 ++++++
 frontend/src/contexts/file/fileHooks.ts       |  193 +++
 frontend/src/contexts/file/fileSelectors.ts   |  130 ++
 frontend/src/contexts/file/lifecycle.ts       |  190 +++
 frontend/src/global.d.ts                      |    1 -
 .../tools/convert/useConvertParameters.ts     |  134 +-
 .../hooks/tools/shared/useToolOperation.ts    |    9 +-
 .../hooks/tools/shared/useToolResources.ts    |   64 +-
 .../src/hooks/tools/shared/useToolState.ts    |    2 +
 frontend/src/hooks/useFileHandler.ts          |   35 +-
 frontend/src/hooks/useFileManager.ts          |  166 ++-
 frontend/src/hooks/useIndexedDBThumbnail.ts   |   55 +-
 frontend/src/hooks/useMemoryManagement.ts     |   30 -
 frontend/src/hooks/usePDFProcessor.ts         |   42 +-
 .../src/hooks/usePdfSignatureDetection.ts     |    8 +-
 frontend/src/hooks/useThumbnailGeneration.ts  |  187 ++-
 frontend/src/hooks/useUrlSync.ts              |  125 ++
 frontend/src/pages/HomePage.tsx               |   46 +-
 .../services/enhancedPDFProcessingService.ts  |   98 +-
 frontend/src/services/fileAnalyzer.ts         |   11 +-
 .../src/services/fileOperationsService.ts     |  194 ---
 .../src/services/fileProcessingService.ts     |  209 +++
 frontend/src/services/fileStorage.ts          |  144 +--
 frontend/src/services/indexedDBManager.ts     |  227 ++++
 frontend/src/services/pdfProcessingService.ts |    9 +-
 frontend/src/services/pdfWorkerManager.ts     |  203 +++
 .../services/thumbnailGenerationService.ts    |  477 +++----
 frontend/src/theme/mantineTheme.ts            |    2 +-
 frontend/src/tools/AddPassword.tsx            |   12 +-
 frontend/src/tools/AddWatermark.tsx           |   11 +-
 frontend/src/tools/ChangePermissions.tsx      |   10 +-
 frontend/src/tools/Compress.tsx               |   11 +-
 frontend/src/tools/Convert.tsx                |   14 +-
 frontend/src/tools/Merge.tsx                  |  149 ---
 frontend/src/tools/OCR.tsx                    |   10 +-
 frontend/src/tools/RemoveCertificateSign.tsx  |   10 +-
 frontend/src/tools/RemovePassword.tsx         |   11 +-
 frontend/src/tools/Repair.tsx                 |   10 +-
 frontend/src/tools/Sanitize.tsx               |   10 +-
 frontend/src/tools/SingleLargePage.tsx        |   10 +-
 frontend/src/tools/Split.tsx                  |   14 +-
 frontend/src/tools/UnlockPdfForms.tsx         |   10 +-
 frontend/src/types/file.ts                    |   19 +-
 frontend/src/types/fileContext.ts             |  301 +++--
 frontend/src/types/tool.ts                    |   21 -
 frontend/src/utils/downloadUtils.ts           |   14 +-
 frontend/src/utils/fileUtils.ts               |  132 +-
 frontend/src/utils/storageUtils.ts            |    3 +-
 frontend/src/utils/thumbnailUtils.ts          |  182 ++-
 frontend/src/utils/urlRouting.ts              |  180 +++
 90 files changed, 5416 insertions(+), 4164 deletions(-)
 delete mode 100644 frontend/public/thumbnailWorker.js
 delete mode 100644 frontend/src/components/FileCard.standalone.tsx
 delete mode 100644 frontend/src/contexts/FileSelectionContext.tsx
 create mode 100644 frontend/src/contexts/IndexedDBContext.tsx
 create mode 100644 frontend/src/contexts/NavigationContext.tsx
 create mode 100644 frontend/src/contexts/file/FileReducer.ts
 create mode 100644 frontend/src/contexts/file/contexts.ts
 create mode 100644 frontend/src/contexts/file/fileActions.ts
 create mode 100644 frontend/src/contexts/file/fileHooks.ts
 create mode 100644 frontend/src/contexts/file/fileSelectors.ts
 create mode 100644 frontend/src/contexts/file/lifecycle.ts
 delete mode 100644 frontend/src/hooks/useMemoryManagement.ts
 create mode 100644 frontend/src/hooks/useUrlSync.ts
 delete mode 100644 frontend/src/services/fileOperationsService.ts
 create mode 100644 frontend/src/services/fileProcessingService.ts
 create mode 100644 frontend/src/services/indexedDBManager.ts
 create mode 100644 frontend/src/services/pdfWorkerManager.ts
 delete mode 100644 frontend/src/tools/Merge.tsx
 create mode 100644 frontend/src/utils/urlRouting.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 6bae4f3d4..54c5f7b19 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -11,8 +11,11 @@
       "Bash(npm test:*)",
       "Bash(ls:*)",
       "Bash(npx tsc:*)",
+      "Bash(node:*)",
+      "Bash(npm run dev:*)",
       "Bash(sed:*)"
     ],
-    "deny": []
+    "deny": [],
+    "defaultMode": "acceptEdits"
   }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 877b5c48a..f9ec204a6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
       "dependencies": {
+        "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@mantine/core": "^8.0.1",
@@ -17,6 +18,7 @@
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
         "@tailwindcss/postcss": "^4.1.8",
+        "@tanstack/react-virtual": "^3.13.12",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
@@ -119,6 +121,17 @@
         "is-potential-custom-element-name": "^1.0.1"
       }
     },
+    "node_modules/@atlaskit/pragmatic-drag-and-drop": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.7.4.tgz",
+      "integrity": "sha512-lZHnO9BJdHPKnwB0uvVUCyDnIhL+WAHzXQ2EXX0qacogOsnvIUiCgY0BLKhBqTCWln3/f/Ox5jU54MKO6ayh9A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "bind-event-listener": "^3.0.0",
+        "raf-schd": "^4.0.3"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -2226,6 +2239,33 @@
         "tailwindcss": "4.1.8"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -2876,6 +2916,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bind-event-listener": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bind-event-listener/-/bind-event-listener-3.0.0.tgz",
+      "integrity": "sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6261,6 +6307,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8154a9a1c..ad945dbc2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,7 @@
   "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
   "proxy": "http://localhost:8080",
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mantine/core": "^8.0.1",
@@ -13,6 +14,7 @@
     "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
     "@tailwindcss/postcss": "^4.1.8",
+    "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 2b00d7108..e09f874ac 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1967,7 +1967,9 @@
     "uploadFiles": "Upload Files",
     "noFilesInStorage": "No files available in storage. Upload some files first.",
     "selectFromStorage": "Select from Storage",
-    "backToTools": "Back to Tools"
+    "backToTools": "Back to Tools",
+    "addFiles": "Add Files",
+    "dragFilesInOrClick": "Drag files in or click \"Add Files\" to browse"
   },
   "fileManager": {
     "title": "Upload PDF Files",
diff --git a/frontend/public/thumbnailWorker.js b/frontend/public/thumbnailWorker.js
deleted file mode 100644
index 2654ce6a4..000000000
--- a/frontend/public/thumbnailWorker.js
+++ /dev/null
@@ -1,157 +0,0 @@
-// Web Worker for parallel thumbnail generation
-console.log('🔧 Thumbnail worker starting up...');
-
-let pdfJsLoaded = false;
-
-// Import PDF.js properly for worker context
-try {
-  console.log('📦 Loading PDF.js locally...');
-  importScripts('/pdf.js');
-
-  // PDF.js exports to globalThis, check both self and globalThis
-  const pdfjsLib = self.pdfjsLib || globalThis.pdfjsLib;
-  
-  if (pdfjsLib) {
-    // Make it available on self for consistency
-    self.pdfjsLib = pdfjsLib;
-    
-    // Set up PDF.js worker
-    self.pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
-    pdfJsLoaded = true;
-    console.log('✓ PDF.js loaded successfully from local files');
-    console.log('✓ PDF.js version:', self.pdfjsLib.version || 'unknown');
-  } else {
-    throw new Error('pdfjsLib not available after import - neither self.pdfjsLib nor globalThis.pdfjsLib found');
-  }
-} catch (error) {
-  console.error('✗ Failed to load local PDF.js:', error.message || error);
-  console.error('✗ Available globals:', Object.keys(self).filter(key => key.includes('pdf')));
-  pdfJsLoaded = false;
-}
-
-// Log the final status
-if (pdfJsLoaded) {
-  console.log('✅ Thumbnail worker ready for PDF processing');
-} else {
-  console.log('❌ Thumbnail worker failed to initialize - PDF.js not available');
-}
-
-self.onmessage = async function(e) {
-  const { type, data, jobId } = e.data;
-
-  try {
-    // Handle PING for worker health check
-    if (type === 'PING') {
-      console.log('🏓 Worker PING received, checking PDF.js status...');
-      
-      // Check if PDF.js is loaded before responding
-      if (pdfJsLoaded && self.pdfjsLib) {
-        console.log('✓ Worker PONG - PDF.js ready');
-        self.postMessage({ type: 'PONG', jobId });
-      } else {
-        console.error('✗ PDF.js not loaded - worker not ready');
-        console.error('✗ pdfJsLoaded:', pdfJsLoaded);
-        console.error('✗ self.pdfjsLib:', !!self.pdfjsLib);
-        self.postMessage({
-          type: 'ERROR',
-          jobId,
-          data: { error: 'PDF.js not loaded in worker' }
-        });
-      }
-      return;
-    }
-
-    if (type === 'GENERATE_THUMBNAILS') {
-      console.log('🖼️ Starting thumbnail generation for', data.pageNumbers.length, 'pages');
-
-      if (!pdfJsLoaded || !self.pdfjsLib) {
-        const error = 'PDF.js not available in worker';
-        console.error('✗', error);
-        throw new Error(error);
-      }
-      const { pdfArrayBuffer, pageNumbers, scale = 0.2, quality = 0.8 } = data;
-
-      console.log('📄 Loading PDF document, size:', pdfArrayBuffer.byteLength, 'bytes');
-      // Load PDF in worker using imported PDF.js
-      const pdf = await self.pdfjsLib.getDocument({ data: pdfArrayBuffer }).promise;
-      console.log('✓ PDF loaded, total pages:', pdf.numPages);
-
-      const thumbnails = [];
-
-      // Process pages in smaller batches for smoother UI
-      const batchSize = 3; // Process 3 pages at once for smoother UI
-      for (let i = 0; i < pageNumbers.length; i += batchSize) {
-        const batch = pageNumbers.slice(i, i + batchSize);
-
-        const batchPromises = batch.map(async (pageNumber) => {
-          try {
-            console.log(`🎯 Processing page ${pageNumber}...`);
-            const page = await pdf.getPage(pageNumber);
-            const viewport = page.getViewport({ scale });
-            console.log(`📐 Page ${pageNumber} viewport:`, viewport.width, 'x', viewport.height);
-
-            // Create OffscreenCanvas for better performance
-            const canvas = new OffscreenCanvas(viewport.width, viewport.height);
-            const context = canvas.getContext('2d');
-
-            if (!context) {
-              throw new Error('Failed to get 2D context from OffscreenCanvas');
-            }
-
-            await page.render({ canvasContext: context, viewport }).promise;
-            console.log(`✓ Page ${pageNumber} rendered`);
-
-            // Convert to blob then to base64 (more efficient than toDataURL)
-            const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality });
-            const arrayBuffer = await blob.arrayBuffer();
-            const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
-            const thumbnail = `data:image/jpeg;base64,${base64}`;
-            console.log(`✓ Page ${pageNumber} thumbnail generated (${base64.length} chars)`);
-
-            return { pageNumber, thumbnail, success: true };
-          } catch (error) {
-            console.error(`✗ Failed to generate thumbnail for page ${pageNumber}:`, error.message || error);
-            return { pageNumber, error: error.message || String(error), success: false };
-          }
-        });
-
-        const batchResults = await Promise.all(batchPromises);
-        thumbnails.push(...batchResults);
-
-        // Send progress update
-        console.log(`📊 Worker: Sending progress update - ${thumbnails.length}/${pageNumbers.length} completed, ${batchResults.filter(r => r.success).length} new thumbnails`);
-        self.postMessage({
-          type: 'PROGRESS',
-          jobId,
-          data: {
-            completed: thumbnails.length,
-            total: pageNumbers.length,
-            thumbnails: batchResults.filter(r => r.success)
-          }
-        });
-
-        // Small delay between batches to keep UI smooth
-        if (i + batchSize < pageNumbers.length) {
-          console.log(`⏸️ Worker: Pausing 100ms before next batch (${i + batchSize}/${pageNumbers.length})`);
-          await new Promise(resolve => setTimeout(resolve, 100)); // Increased to 100ms pause between batches for smoother scrolling
-        }
-      }
-
-      // Clean up
-      pdf.destroy();
-
-      self.postMessage({
-        type: 'COMPLETE',
-        jobId,
-        data: { thumbnails: thumbnails.filter(r => r.success) }
-      });
-
-    }
-  } catch (error) {
-    self.postMessage({
-      type: 'ERROR',
-      jobId,
-      data: { error: error.message }
-    });
-  }
-};
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d2aec8242..e628dc4de 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
 import { FileContextProvider } from './contexts/FileContext';
+import { NavigationProvider } from './contexts/NavigationContext';
 import { FilesModalProvider } from './contexts/FilesModalContext';
 import HomePage from './pages/HomePage';
 
@@ -27,9 +28,11 @@ export default function App() {
     <Suspense fallback={<LoadingFallback />}>
       <RainbowThemeProvider>
         <FileContextProvider enableUrlSync={true} enablePersistence={true}>
-          <FilesModalProvider>
-            <HomePage />
-          </FilesModalProvider>
+        <NavigationProvider>
+            <FilesModalProvider>
+              <HomePage />
+            </FilesModalProvider>
+        </NavigationProvider>
         </FileContextProvider>
       </RainbowThemeProvider>
     </Suspense>
diff --git a/frontend/src/commands/pageCommands.ts b/frontend/src/commands/pageCommands.ts
index 4e5572234..92a9c9a73 100644
--- a/frontend/src/commands/pageCommands.ts
+++ b/frontend/src/commands/pageCommands.ts
@@ -48,7 +48,11 @@ export class RotatePagesCommand extends PageCommand {
       return page;
     });
     
-    this.setPdfDocument({ ...this.pdfDocument, pages: updatedPages });
+    this.setPdfDocument({ 
+      ...this.pdfDocument, 
+      pages: updatedPages,
+      totalPages: updatedPages.length 
+    });
   }
 
   get description(): string {
@@ -148,7 +152,11 @@ export class MovePagesCommand extends PageCommand {
       pageNumber: index + 1 
     }));
     
-    this.setPdfDocument({ ...this.pdfDocument, pages: newPages });
+    this.setPdfDocument({ 
+      ...this.pdfDocument, 
+      pages: newPages,
+      totalPages: newPages.length 
+    });
   }
 
   get description(): string {
@@ -185,7 +193,11 @@ export class ReorderPageCommand extends PageCommand {
       pageNumber: index + 1 
     }));
     
-    this.setPdfDocument({ ...this.pdfDocument, pages: updatedPages });
+    this.setPdfDocument({ 
+      ...this.pdfDocument, 
+      pages: updatedPages,
+      totalPages: updatedPages.length 
+    });
   }
 
   get description(): string {
@@ -224,7 +236,11 @@ export class ToggleSplitCommand extends PageCommand {
       return page;
     });
     
-    this.setPdfDocument({ ...this.pdfDocument, pages: updatedPages });
+    this.setPdfDocument({ 
+      ...this.pdfDocument, 
+      pages: updatedPages,
+      totalPages: updatedPages.length 
+    });
   }
 
   undo(): void {
@@ -236,7 +252,11 @@ export class ToggleSplitCommand extends PageCommand {
       return page;
     });
     
-    this.setPdfDocument({ ...this.pdfDocument, pages: updatedPages });
+    this.setPdfDocument({ 
+      ...this.pdfDocument, 
+      pages: updatedPages,
+      totalPages: updatedPages.length 
+    });
   }
 
   get description(): string {
diff --git a/frontend/src/components/FileCard.standalone.tsx b/frontend/src/components/FileCard.standalone.tsx
deleted file mode 100644
index 4d140689b..000000000
--- a/frontend/src/components/FileCard.standalone.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from "react";
-import { Card, Stack, Text, Group, Badge, Button, Box, Image, ThemeIcon } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import StorageIcon from "@mui/icons-material/Storage";
-
-import { FileWithUrl } from "../types/file";
-import { getFileSize, getFileDate } from "../utils/fileUtils";
-import { useIndexedDBThumbnail } from "../hooks/useIndexedDBThumbnail";
-
-interface FileCardProps {
-  file: FileWithUrl;
-  onRemove: () => void;
-  onDoubleClick?: () => void;
-}
-
-const FileCard: React.FC<FileCardProps> = ({ file, onRemove, onDoubleClick }) => {
-  const { t } = useTranslation();
-  const { thumbnail: thumb, isGenerating } = useIndexedDBThumbnail(file);
-
-  return (
-    <Card
-      shadow="xs"
-      radius="md"
-      withBorder
-      p="xs"
-      style={{ 
-        width: 225, 
-        minWidth: 180, 
-        maxWidth: 260, 
-        cursor: onDoubleClick ? "pointer" : undefined 
-      }}
-      onDoubleClick={onDoubleClick}
-    >
-      <Stack gap={6} align="center">
-        <Box
-          style={{
-            border: "2px solid #e0e0e0",
-            borderRadius: 8,
-            width: 90,
-            height: 120,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: "0 auto",
-            background: "#fafbfc",
-          }}
-        >
-          {thumb ? (
-            <Image 
-              src={thumb} 
-              alt="PDF thumbnail" 
-              height={110} 
-              width={80} 
-              fit="contain" 
-              radius="sm" 
-            />
-          ) : isGenerating ? (
-            <div style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
-              alignItems: 'center', 
-              justifyContent: 'center' 
-            }}>
-              <div style={{ 
-                width: 20, 
-                height: 20, 
-                border: '2px solid #ddd', 
-                borderTop: '2px solid #666',
-                borderRadius: '50%',
-                animation: 'spin 1s linear infinite',
-                marginBottom: 8
-              }} />
-              <Text size="xs" c="dimmed">Generating...</Text>
-            </div>
-          ) : (
-            <div style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
-              alignItems: 'center', 
-              justifyContent: 'center' 
-            }}>
-              <ThemeIcon
-                variant="light"
-                color={file.size > 100 * 1024 * 1024 ? "orange" : "red"}
-                size={60}
-                radius="sm"
-                style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
-              >
-                <PictureAsPdfIcon style={{ fontSize: 40 }} />
-              </ThemeIcon>
-              {file.size > 100 * 1024 * 1024 && (
-                <Text size="xs" c="dimmed" mt={4}>Large File</Text>
-              )}
-            </div>
-          )}
-        </Box>
-        
-        <Text fw={500} size="sm" lineClamp={1} ta="center">
-          {file.name}
-        </Text>
-        
-        <Group gap="xs" justify="center">
-          <Badge color="gray" variant="light" size="sm">
-            {getFileSize(file)}
-          </Badge>
-          <Badge color="blue" variant="light" size="sm">
-            {getFileDate(file)}
-          </Badge>
-          {file.storedInIndexedDB && (
-            <Badge 
-              color="green" 
-              variant="light" 
-              size="sm" 
-              leftSection={<StorageIcon style={{ fontSize: 12 }} />}
-            >
-              DB
-            </Badge>
-          )}
-        </Group>
-        
-        <Button
-          color="red"
-          size="xs"
-          variant="light"
-          onClick={onRemove}
-          mt={4}
-        >
-          {t("delete", "Remove")}
-        </Button>
-      </Stack>
-    </Card>
-  );
-};
-
-export default FileCard;
\ No newline at end of file
diff --git a/frontend/src/components/FileManager.tsx b/frontend/src/components/FileManager.tsx
index 5f6af568b..1c327cefa 100644
--- a/frontend/src/components/FileManager.tsx
+++ b/frontend/src/components/FileManager.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { Modal } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { FileWithUrl } from '../types/file';
+import { FileMetadata } from '../types/file';
 import { useFileManager } from '../hooks/useFileManager';
 import { useFilesModalContext } from '../contexts/FilesModalContext';
+import { createFileId } from '../types/fileContext';
 import { Tool } from '../types/tool';
 import MobileLayout from './fileManager/MobileLayout';
 import DesktopLayout from './fileManager/DesktopLayout';
@@ -15,13 +16,19 @@ interface FileManagerProps {
 }
 
 const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
-  const { isFilesModalOpen, closeFilesModal, onFilesSelect } = useFilesModalContext();
-  const [recentFiles, setRecentFiles] = useState<FileWithUrl[]>([]);
+  const { isFilesModalOpen, closeFilesModal, onFilesSelect, onStoredFilesSelect } = useFilesModalContext();
+  const [recentFiles, setRecentFiles] = useState<FileMetadata[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile } = useFileManager();
 
+  // Wrapper for storeFile that generates UUID
+  const storeFileWithId = useCallback(async (file: File) => {
+    const fileId = createFileId(); // Generate UUID for storage
+    return await storeFile(file, fileId);
+  }, [storeFile]);
+
   // File management handlers
   const isFileSupported = useCallback((fileName: string) => {
     if (!selectedTool?.supportedFormats) return true;
@@ -34,18 +41,21 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
     setRecentFiles(files);
   }, [loadRecentFiles]);
 
-  const handleFilesSelected = useCallback(async (files: FileWithUrl[]) => {
+  const handleFilesSelected = useCallback(async (files: FileMetadata[]) => {
     try {
-      const fileObjects = await Promise.all(
-        files.map(async (fileWithUrl) => {
-          return await convertToFile(fileWithUrl);
-        })
+      // Use stored files flow that preserves original IDs
+      const filesWithMetadata = await Promise.all(
+        files.map(async (metadata) => ({
+          file: await convertToFile(metadata),
+          originalId: metadata.id,
+          metadata
+        }))
       );
-      onFilesSelect(fileObjects);
+      onStoredFilesSelect(filesWithMetadata);
     } catch (error) {
       console.error('Failed to process selected files:', error);
     }
-  }, [convertToFile, onFilesSelect]);
+  }, [convertToFile, onStoredFilesSelect]);
 
   const handleNewFileUpload = useCallback(async (files: File[]) => {
     if (files.length > 0) {
@@ -82,14 +92,11 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
   // Cleanup any blob URLs when component unmounts
   useEffect(() => {
     return () => {
-      // Clean up blob URLs from recent files
-      recentFiles.forEach(file => {
-        if (file.url && file.url.startsWith('blob:')) {
-          URL.revokeObjectURL(file.url);
-        }
-      });
+      // FileMetadata doesn't have blob URLs, so no cleanup needed
+      // Blob URLs are managed by FileContext and tool operations
+      console.log('FileManager unmounting - FileContext handles blob URL cleanup');
     };
-  }, [recentFiles]);
+  }, []);
 
   // Modal size constants for consistent scaling
   const modalHeight = '80vh';
@@ -130,7 +137,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
           onDrop={handleNewFileUpload}
           onDragEnter={() => setIsDragging(true)}
           onDragLeave={() => setIsDragging(false)}
-          accept={["*/*"] as any}
+          accept={{}}
           multiple={true}
           activateOnClick={false}
           style={{
@@ -147,12 +154,12 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
           <FileManagerProvider
             recentFiles={recentFiles}
             onFilesSelected={handleFilesSelected}
+            onNewFilesSelect={handleNewFileUpload}
             onClose={closeFilesModal}
             isFileSupported={isFileSupported}
             isOpen={isFilesModalOpen}
             onFileRemove={handleRemoveFileByIndex}
             modalHeight={modalHeight}
-            storeFile={storeFile}
             refreshRecentFiles={refreshRecentFiles}
           >
             {isMobile ? <MobileLayout /> : <DesktopLayout />}
diff --git a/frontend/src/components/fileEditor/FileEditor.tsx b/frontend/src/components/fileEditor/FileEditor.tsx
index c45e7e902..c93e78670 100644
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import {
   Button, Text, Center, Box, Notification, TextInput, LoadingOverlay, Modal, Alert, Container,
   Stack, Group
@@ -6,8 +6,8 @@ import {
 import { Dropzone } from '@mantine/dropzone';
 import { useTranslation } from 'react-i18next';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
-import { useFileContext } from '../../contexts/FileContext';
-import { useFileSelection } from '../../contexts/FileSelectionContext';
+import { useFileSelection, useFileState, useFileManagement, useFileActions } from '../../contexts/FileContext';
+import { useNavigationActions } from '../../contexts/NavigationContext';
 import { FileOperation } from '../../types/fileContext';
 import { fileStorage } from '../../services/fileStorage';
 import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
@@ -15,19 +15,9 @@ import { zipFileService } from '../../services/zipFileService';
 import { detectFileExtension } from '../../utils/fileUtils';
 import styles from '../pageEditor/PageEditor.module.css';
 import FileThumbnail from '../pageEditor/FileThumbnail';
-import DragDropGrid from '../pageEditor/DragDropGrid';
 import FilePickerModal from '../shared/FilePickerModal';
 import SkeletonLoader from '../shared/SkeletonLoader';
 
-interface FileItem {
-  id: string;
-  name: string;
-  pageCount: number;
-  thumbnail: string;
-  size: number;
-  file: File;
-  splitBefore?: boolean;
-}
 
 interface FileEditorProps {
   onOpenPageEditor?: (file: File) => void;
@@ -54,33 +44,25 @@ const FileEditor = ({
     return extension ? supportedExtensions.includes(extension) : false;
   }, [supportedExtensions]);
 
-  // Get file context
-  const fileContext = useFileContext();
-  const {
-    activeFiles,
-    processedFiles,
-    selectedFileIds,
-    setSelectedFiles: setContextSelectedFiles,
-    isProcessing,
-    addFiles,
-    removeFiles,
-    setCurrentView,
-    recordOperation,
-    markOperationApplied
-  } = fileContext;
-
+  // Use optimized FileContext hooks
+  const { state, selectors } = useFileState();
+  const { addFiles, removeFiles, reorderFiles } = useFileManagement();
+  
+  // Extract needed values from state (memoized to prevent infinite loops)
+  const activeFiles = useMemo(() => selectors.getFiles(), [selectors.getFilesSignature()]);
+  const activeFileRecords = useMemo(() => selectors.getFileRecords(), [selectors.getFilesSignature()]);
+  const selectedFileIds = state.ui.selectedFileIds;
+  const isProcessing = state.ui.isProcessing;
+  
+  // Get the real context actions
+  const { actions } = useFileActions();
+  const { actions: navActions } = useNavigationActions();
+  
   // Get file selection context
-  const {
-    selectedFiles: toolSelectedFiles,
-    setSelectedFiles: setToolSelectedFiles,
-    maxFiles,
-    isToolMode
-  } = useFileSelection();
+  const { setSelectedFiles } = useFileSelection();
 
-  const [files, setFiles] = useState<FileItem[]>([]);
   const [status, setStatus] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [localLoading, setLocalLoading] = useState(false);
   const [selectionMode, setSelectionMode] = useState(toolMode);
 
   // Enable selection mode automatically in tool mode
@@ -89,13 +71,7 @@ const FileEditor = ({
       setSelectionMode(true);
     }
   }, [toolMode]);
-  const [draggedFile, setDraggedFile] = useState<string | null>(null);
-  const [dropTarget, setDropTarget] = useState<string | null>(null);
-  const [multiFileDrag, setMultiFileDrag] = useState<{fileIds: string[], count: number} | null>(null);
-  const [dragPosition, setDragPosition] = useState<{x: number, y: number} | null>(null);
-  const [isAnimating, setIsAnimating] = useState(false);
   const [showFilePickerModal, setShowFilePickerModal] = useState(false);
-  const [conversionProgress, setConversionProgress] = useState(0);
   const [zipExtractionProgress, setZipExtractionProgress] = useState<{
     isExtracting: boolean;
     currentFile: string;
@@ -109,115 +85,30 @@ const FileEditor = ({
     extractedCount: 0,
     totalFiles: 0
   });
-  const fileRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-  const lastActiveFilesRef = useRef<string[]>([]);
-  const lastProcessedFilesRef = useRef<number>(0);
-
   // Get selected file IDs from context (defensive programming)
   const contextSelectedIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
+  
+  // Create refs for frequently changing values to stabilize callbacks
+  const contextSelectedIdsRef = useRef<string[]>([]);
+  contextSelectedIdsRef.current = contextSelectedIds;
 
-  // Map context selections to local file IDs for UI display
-  const localSelectedIds = files
-    .filter(file => {
-      const fileId = (file.file as any).id || file.name;
-      return contextSelectedIds.includes(fileId);
-    })
-    .map(file => file.id);
-
-  // Convert shared files to FileEditor format
-  const convertToFileItem = useCallback(async (sharedFile: any): Promise<FileItem> => {
-    // Generate thumbnail if not already available
-    const thumbnail = sharedFile.thumbnail || await generateThumbnailForFile(sharedFile.file || sharedFile);
+  // Use activeFileRecords directly - no conversion needed
+  const localSelectedIds = contextSelectedIds;
 
+  // Helper to convert FileRecord to FileThumbnail format
+  const recordToFileItem = useCallback((record: any) => {
+    const file = selectors.getFile(record.id);
+    if (!file) return null;
+    
     return {
-      id: sharedFile.id || `file-${Date.now()}-${Math.random()}`,
-      name: (sharedFile.file?.name || sharedFile.name || 'unknown'),
-      pageCount: sharedFile.pageCount || Math.floor(Math.random() * 20) + 1, // Mock for now
-      thumbnail,
-      size: sharedFile.file?.size || sharedFile.size || 0,
-      file: sharedFile.file || sharedFile,
+      id: record.id,
+      name: file.name,
+      pageCount: record.processedFile?.totalPages || 1,
+      thumbnail: record.thumbnailUrl || '',
+      size: file.size,
+      file: file
     };
-  }, []);
-
-  // Convert activeFiles to FileItem format using context (async to avoid blocking)
-  useEffect(() => {
-    // Check if the actual content has changed, not just references
-    const currentActiveFileNames = activeFiles.map(f => f.name);
-    const currentProcessedFilesSize = processedFiles.size;
-
-    const activeFilesChanged = JSON.stringify(currentActiveFileNames) !== JSON.stringify(lastActiveFilesRef.current);
-    const processedFilesChanged = currentProcessedFilesSize !== lastProcessedFilesRef.current;
-
-    if (!activeFilesChanged && !processedFilesChanged) {
-      return;
-    }
-
-    // Update refs
-    lastActiveFilesRef.current = currentActiveFileNames;
-    lastProcessedFilesRef.current = currentProcessedFilesSize;
-
-    const convertActiveFiles = async () => {
-
-      if (activeFiles.length > 0) {
-        setLocalLoading(true);
-        try {
-          // Process files in chunks to avoid blocking UI
-          const convertedFiles: FileItem[] = [];
-
-          for (let i = 0; i < activeFiles.length; i++) {
-            const file = activeFiles[i];
-
-            // Try to get thumbnail from processed file first
-            const processedFile = processedFiles.get(file);
-            let thumbnail = processedFile?.pages?.[0]?.thumbnail;
-
-            // If no thumbnail from processed file, try to generate one
-            if (!thumbnail) {
-              try {
-                thumbnail = await generateThumbnailForFile(file);
-              } catch (error) {
-                console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
-                thumbnail = undefined; // Use placeholder
-              }
-            }
-
-            const convertedFile = {
-              id: `file-${Date.now()}-${Math.random()}`,
-              name: file.name,
-              pageCount: processedFile?.totalPages || Math.floor(Math.random() * 20) + 1,
-              thumbnail: thumbnail || '',
-              size: file.size,
-              file,
-            };
-
-            convertedFiles.push(convertedFile);
-
-            // Update progress
-            setConversionProgress(((i + 1) / activeFiles.length) * 100);
-
-            // Yield to main thread between files
-            if (i < activeFiles.length - 1) {
-              await new Promise(resolve => requestAnimationFrame(resolve));
-            }
-          }
-
-
-          setFiles(convertedFiles);
-        } catch (err) {
-          console.error('Error converting active files:', err);
-        } finally {
-          setLocalLoading(false);
-          setConversionProgress(0);
-        }
-      } else {
-        setFiles([]);
-        setLocalLoading(false);
-        setConversionProgress(0);
-      }
-    };
-
-    convertActiveFiles();
-  }, [activeFiles, processedFiles]);
+  }, [selectors]);
 
 
   // Process uploaded files using context
@@ -289,10 +180,7 @@ const FileEditor = ({
                   }
                 }
               };
-
-              recordOperation(file.name, operation);
-              markOperationApplied(file.name, operationId);
-
+              
               if (extractionResult.errors.length > 0) {
                 errors.push(...extractionResult.errors);
               }
@@ -301,7 +189,6 @@ const FileEditor = ({
               }
             } else {
               // ZIP doesn't contain PDFs or is invalid - treat as regular file
-              console.log(`Adding ZIP file as regular file: ${file.name} (no PDFs found)`);
               allExtractedFiles.push(file);
             }
           } catch (zipError) {
@@ -315,7 +202,6 @@ const FileEditor = ({
             });
           }
         } else {
-          console.log(`Adding none PDF file: ${file.name} (${file.type})`);
           allExtractedFiles.push(file);
         }
       }
@@ -344,9 +230,6 @@ const FileEditor = ({
               }
             }
           };
-
-          recordOperation(file.name, operation);
-          markOperationApplied(file.name, operationId);
         }
 
         // Add files to context (they will be processed automatically)
@@ -357,7 +240,7 @@ const FileEditor = ({
       const errorMessage = err instanceof Error ? err.message : 'Failed to process files';
       setError(errorMessage);
       console.error('File processing error:', err);
-
+      
       // Reset extraction progress on error
       setZipExtractionProgress({
         isExtracting: false,
@@ -367,220 +250,137 @@ const FileEditor = ({
         totalFiles: 0
       });
     }
-  }, [addFiles, recordOperation, markOperationApplied]);
+  }, [addFiles]);
 
   const selectAll = useCallback(() => {
-    setContextSelectedFiles(files.map(f => (f.file as any).id || f.name));
-  }, [files, setContextSelectedFiles]);
+    setSelectedFiles(activeFileRecords.map(r => r.id)); // Use FileRecord IDs directly
+  }, [activeFileRecords, setSelectedFiles]);
 
-  const deselectAll = useCallback(() => setContextSelectedFiles([]), [setContextSelectedFiles]);
+  const deselectAll = useCallback(() => setSelectedFiles([]), [setSelectedFiles]);
 
   const closeAllFiles = useCallback(() => {
-    if (activeFiles.length === 0) return;
-
-    // Record close all operation for each file
-    activeFiles.forEach(file => {
-      const operationId = `close-all-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-      const operation: FileOperation = {
-        id: operationId,
-        type: 'remove',
-        timestamp: Date.now(),
-        fileIds: [file.name],
-        status: 'pending',
-        metadata: {
-          originalFileName: file.name,
-          fileSize: file.size,
-          parameters: {
-            action: 'close_all',
-            reason: 'user_request'
-          }
-        }
-      };
-
-      recordOperation(file.name, operation);
-      markOperationApplied(file.name, operationId);
-    });
+    if (activeFileRecords.length === 0) return;
 
     // Remove all files from context but keep in storage
-    removeFiles(activeFiles.map(f => (f as any).id || f.name), false);
-
+    const allFileIds = activeFileRecords.map(record => record.id);
+    removeFiles(allFileIds, false); // false = keep in storage
+    
     // Clear selections
-    setContextSelectedFiles([]);
-  }, [activeFiles, removeFiles, setContextSelectedFiles, recordOperation, markOperationApplied]);
+    setSelectedFiles([]);
+  }, [activeFileRecords, removeFiles, setSelectedFiles]);
 
   const toggleFile = useCallback((fileId: string) => {
-    const targetFile = files.find(f => f.id === fileId);
-    if (!targetFile) return;
+    const currentSelectedIds = contextSelectedIdsRef.current;
+    
+    const targetRecord = activeFileRecords.find(r => r.id === fileId);
+    if (!targetRecord) return;
 
-    const contextFileId = (targetFile.file as any).id || targetFile.name;
-    const isSelected = contextSelectedIds.includes(contextFileId);
+    const contextFileId = fileId; // No need to create a new ID
+    const isSelected = currentSelectedIds.includes(contextFileId);
 
     let newSelection: string[];
 
     if (isSelected) {
       // Remove file from selection
-      newSelection = contextSelectedIds.filter(id => id !== contextFileId);
+      newSelection = currentSelectedIds.filter(id => id !== contextFileId);
     } else {
       // Add file to selection
-      if (maxFiles === 1) {
+      // In tool mode, typically allow multiple files unless specified otherwise
+      const maxAllowed = toolMode ? 10 : Infinity; // Default max for tools
+      
+      if (maxAllowed === 1) {
         newSelection = [contextFileId];
       } else {
         // Check if we've hit the selection limit
-        if (maxFiles > 1 && contextSelectedIds.length >= maxFiles) {
-          setStatus(`Maximum ${maxFiles} files can be selected`);
+        if (maxAllowed > 1 && currentSelectedIds.length >= maxAllowed) {
+          setStatus(`Maximum ${maxAllowed} files can be selected`);
           return;
         }
-        newSelection = [...contextSelectedIds, contextFileId];
+        newSelection = [...currentSelectedIds, contextFileId];
       }
     }
 
-    // Update context
-    setContextSelectedFiles(newSelection);
-
-    // Update tool selection context if in tool mode
-    if (isToolMode || toolMode) {
-      const selectedFiles = files
-        .filter(f => {
-          const fId = (f.file as any).id || f.name;
-          return newSelection.includes(fId);
-        })
-        .map(f => f.file);
-      setToolSelectedFiles(selectedFiles);
-    }
-  }, [files, setContextSelectedFiles, maxFiles, contextSelectedIds, setStatus, isToolMode, toolMode, setToolSelectedFiles]);
+    // Update context (this automatically updates tool selection since they use the same action)
+    setSelectedFiles(newSelection);
+  }, [setSelectedFiles, toolMode, setStatus, activeFileRecords]);
 
   const toggleSelectionMode = useCallback(() => {
     setSelectionMode(prev => {
       const newMode = !prev;
       if (!newMode) {
-        setContextSelectedFiles([]);
+        setSelectedFiles([]);
       }
       return newMode;
     });
-  }, [setContextSelectedFiles]);
+  }, [setSelectedFiles]);
 
-
-  // Drag and drop handlers
-  const handleDragStart = useCallback((fileId: string) => {
-    setDraggedFile(fileId);
-
-    if (selectionMode && localSelectedIds.includes(fileId) && localSelectedIds.length > 1) {
-      setMultiFileDrag({
-        fileIds: localSelectedIds,
-        count: localSelectedIds.length
-      });
-    } else {
-      setMultiFileDrag(null);
-    }
-  }, [selectionMode, localSelectedIds]);
-
-  const handleDragEnd = useCallback(() => {
-    setDraggedFile(null);
-    setDropTarget(null);
-    setMultiFileDrag(null);
-    setDragPosition(null);
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-
-    if (!draggedFile) return;
-
-    if (multiFileDrag) {
-      setDragPosition({ x: e.clientX, y: e.clientY });
-    }
-
-    const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
-    if (!elementUnderCursor) return;
-
-    const fileContainer = elementUnderCursor.closest('[data-file-id]');
-    if (fileContainer) {
-      const fileId = fileContainer.getAttribute('data-file-id');
-      if (fileId && fileId !== draggedFile) {
-        setDropTarget(fileId);
-        return;
-      }
-    }
-
-    const endZone = elementUnderCursor.closest('[data-drop-zone="end"]');
-    if (endZone) {
-      setDropTarget('end');
+  // File reordering handler for drag and drop
+  const handleReorderFiles = useCallback((sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => {
+    const currentIds = activeFileRecords.map(r => r.id);
+    
+    // Find indices
+    const sourceIndex = currentIds.findIndex(id => id === sourceFileId);
+    const targetIndex = currentIds.findIndex(id => id === targetFileId);
+    
+    if (sourceIndex === -1 || targetIndex === -1) {
+      console.warn('Could not find source or target file for reordering');
       return;
     }
 
-    setDropTarget(null);
-  }, [draggedFile, multiFileDrag]);
+    // Handle multi-file selection reordering
+    const filesToMove = selectedFileIds.length > 1 
+      ? selectedFileIds.filter(id => currentIds.includes(id))
+      : [sourceFileId];
 
-  const handleDragEnter = useCallback((fileId: string) => {
-    if (draggedFile && fileId !== draggedFile) {
-      setDropTarget(fileId);
-    }
-  }, [draggedFile]);
-
-  const handleDragLeave = useCallback(() => {
-    // Let dragover handle this
-  }, []);
-
-  const handleDrop = useCallback((e: React.DragEvent, targetFileId: string | 'end') => {
-    e.preventDefault();
-    if (!draggedFile || draggedFile === targetFileId) return;
-
-    let targetIndex: number;
-    if (targetFileId === 'end') {
-      targetIndex = files.length;
-    } else {
-      targetIndex = files.findIndex(f => f.id === targetFileId);
-      if (targetIndex === -1) return;
-    }
-
-    const filesToMove = selectionMode && localSelectedIds.includes(draggedFile)
-      ? localSelectedIds
-      : [draggedFile];
-
-    // Update the local files state and sync with activeFiles
-    setFiles(prev => {
-      const newFiles = [...prev];
-      const movedFiles = filesToMove.map(id => newFiles.find(f => f.id === id)!).filter(Boolean);
-
-      // Remove moved files
-      filesToMove.forEach(id => {
-        const index = newFiles.findIndex(f => f.id === id);
-        if (index !== -1) newFiles.splice(index, 1);
-      });
-
-      // Insert at target position
-      newFiles.splice(targetIndex, 0, ...movedFiles);
-
-      // TODO: Update context with reordered files (need to implement file reordering in context)
-      // For now, just return the reordered local state
-      return newFiles;
+    // Create new order
+    const newOrder = [...currentIds];
+    
+    // Remove files to move from their current positions (in reverse order to maintain indices)
+    const sourceIndices = filesToMove.map(id => newOrder.findIndex(nId => nId === id))
+      .sort((a, b) => b - a); // Sort descending
+      
+    sourceIndices.forEach(index => {
+      newOrder.splice(index, 1);
     });
 
-    const moveCount = multiFileDrag ? multiFileDrag.count : 1;
-    setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
-
-  }, [draggedFile, files, selectionMode, localSelectedIds, multiFileDrag]);
-
-  const handleEndZoneDragEnter = useCallback(() => {
-    if (draggedFile) {
-      setDropTarget('end');
+    // Calculate insertion index after removals
+    let insertIndex = newOrder.findIndex(id => id === targetFileId);
+    if (insertIndex !== -1) {
+      // Determine if moving forward or backward
+      const isMovingForward = sourceIndex < targetIndex;
+      if (isMovingForward) {
+        // Moving forward: insert after target
+        insertIndex += 1;
+      } else {
+        // Moving backward: insert before target (insertIndex already correct)
+      }
+    } else {
+      // Target was moved, insert at end
+      insertIndex = newOrder.length;
     }
-  }, [draggedFile]);
+
+    // Insert files at the calculated position
+    newOrder.splice(insertIndex, 0, ...filesToMove);
+
+    // Update file order
+    reorderFiles(newOrder);
+
+    // Update status
+    const moveCount = filesToMove.length;
+    setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
+  }, [activeFileRecords, reorderFiles, setStatus]);
+
+
 
   // File operations using context
   const handleDeleteFile = useCallback((fileId: string) => {
-    console.log('handleDeleteFile called with fileId:', fileId);
-    const file = files.find(f => f.id === fileId);
-    console.log('Found file:', file);
-
-    if (file) {
-      console.log('Attempting to remove file:', file.name);
-      console.log('Actual file object:', file.file);
-      console.log('Actual file.file.name:', file.file.name);
+    const record = activeFileRecords.find(r => r.id === fileId);
+    const file = record ? selectors.getFile(record.id) : null;
 
+    if (record && file) {
       // Record close operation
-      const fileName = file.file.name;
-      const fileId = (file.file as any).id || fileName;
+      const fileName = file.name;
+      const contextFileId = record.id;
       const operationId = `close-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
       const operation: FileOperation = {
         id: operationId,
@@ -590,75 +390,62 @@ const FileEditor = ({
         status: 'pending',
         metadata: {
           originalFileName: fileName,
-          fileSize: file.size,
+          fileSize: record.size,
           parameters: {
             action: 'close',
             reason: 'user_request'
           }
         }
       };
-
-      recordOperation(fileName, operation);
-
+            
       // Remove file from context but keep in storage (close, don't delete)
-      console.log('Calling removeFiles with:', [fileId]);
-      removeFiles([fileId], false);
+      removeFiles([contextFileId], false);
 
       // Remove from context selections
-      const newSelection = contextSelectedIds.filter(id => id !== fileId);
-      setContextSelectedFiles(newSelection);
-      // Mark operation as applied
-      markOperationApplied(fileName, operationId);
-    } else {
-      console.log('File not found for fileId:', fileId);
+      const currentSelected = selectedFileIds.filter(id => id !== contextFileId);
+      setSelectedFiles(currentSelected);
     }
-  }, [files, removeFiles, setContextSelectedFiles, recordOperation, markOperationApplied]);
+  }, [activeFileRecords, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
 
   const handleViewFile = useCallback((fileId: string) => {
-    const file = files.find(f => f.id === fileId);
-    if (file) {
-      // Set the file as selected in context and switch to page editor view
-      const contextFileId = (file.file as any).id || file.name;
-      setContextSelectedFiles([contextFileId]);
-      setCurrentView('pageEditor');
-      onOpenPageEditor?.(file.file);
+    const record = activeFileRecords.find(r => r.id === fileId);
+    if (record) {
+      // Set the file as selected in context and switch to viewer for preview
+      setSelectedFiles([fileId]);
+      navActions.setMode('viewer');
     }
-  }, [files, setContextSelectedFiles, setCurrentView, onOpenPageEditor]);
+  }, [activeFileRecords, setSelectedFiles, navActions.setMode]);
 
   const handleMergeFromHere = useCallback((fileId: string) => {
-    const startIndex = files.findIndex(f => f.id === fileId);
+    const startIndex = activeFileRecords.findIndex(r => r.id === fileId);
     if (startIndex === -1) return;
 
-    const filesToMerge = files.slice(startIndex).map(f => f.file);
+    const recordsToMerge = activeFileRecords.slice(startIndex);
+    const filesToMerge = recordsToMerge.map(r => selectors.getFile(r.id)).filter(Boolean) as File[];
     if (onMergeFiles) {
       onMergeFiles(filesToMerge);
     }
-  }, [files, onMergeFiles]);
+  }, [activeFileRecords, selectors, onMergeFiles]);
 
   const handleSplitFile = useCallback((fileId: string) => {
-    const file = files.find(f => f.id === fileId);
+    const file = selectors.getFile(fileId);
     if (file && onOpenPageEditor) {
-      onOpenPageEditor(file.file);
+      onOpenPageEditor(file);
     }
-  }, [files, onOpenPageEditor]);
+  }, [selectors, onOpenPageEditor]);
 
   const handleLoadFromStorage = useCallback(async (selectedFiles: any[]) => {
     if (selectedFiles.length === 0) return;
 
-    setLocalLoading(true);
     try {
-      const convertedFiles = await Promise.all(
-        selectedFiles.map(convertToFileItem)
-      );
-      setFiles(prev => [...prev, ...convertedFiles]);
+      // Use FileContext to handle loading stored files
+      // The files are already in FileContext, just need to add them to active files
       setStatus(`Loaded ${selectedFiles.length} files from storage`);
     } catch (err) {
       console.error('Error loading files from storage:', err);
       setError('Failed to load some files from storage');
-    } finally {
-      setLocalLoading(false);
     }
-  }, [convertToFileItem]);
+  }, []);
 
 
   return (
@@ -680,10 +467,14 @@ const FileEditor = ({
 
         <Box p="md" pt="xl">
           <Group mb="md">
-            {showBulkActions && !toolMode && (
+            {toolMode && (
               <>
                 <Button onClick={selectAll} variant="light">Select All</Button>
                 <Button onClick={deselectAll} variant="light">Deselect All</Button>
+              </>
+            )}
+            {showBulkActions && !toolMode && (
+              <>
                 <Button onClick={closeAllFiles} variant="light" color="orange">
                   Close All
                 </Button>
@@ -692,7 +483,7 @@ const FileEditor = ({
           </Group>
 
 
-        {files.length === 0 && !localLoading && !zipExtractionProgress.isExtracting ? (
+        {activeFileRecords.length === 0 && !zipExtractionProgress.isExtracting ? (
           <Center h="60vh">
             <Stack align="center" gap="md">
               <Text size="lg" c="dimmed">📁</Text>
@@ -700,7 +491,7 @@ const FileEditor = ({
               <Text size="sm" c="dimmed">Upload PDF files, ZIP archives, or load from storage to get started</Text>
             </Stack>
           </Center>
-        ) : files.length === 0 && (localLoading || zipExtractionProgress.isExtracting) ? (
+        ) : activeFileRecords.length === 0 && zipExtractionProgress.isExtracting ? (
           <Box>
             <SkeletonLoader type="controls" />
 
@@ -734,88 +525,42 @@ const FileEditor = ({
               </Box>
             )}
 
-            {/* Processing indicator */}
-            {localLoading && (
-              <Box mb="md" p="sm" style={{ backgroundColor: 'var(--mantine-color-blue-0)', borderRadius: 8 }}>
-                <Group justify="space-between" mb="xs">
-                  <Text size="sm" fw={500}>Loading files...</Text>
-                  <Text size="sm" c="dimmed">{Math.round(conversionProgress)}%</Text>
-                </Group>
-                <div style={{
-                  width: '100%',
-                  height: '4px',
-                  backgroundColor: 'var(--mantine-color-gray-2)',
-                  borderRadius: '2px',
-                  overflow: 'hidden'
-                }}>
-                  <div style={{
-                    width: `${Math.round(conversionProgress)}%`,
-                    height: '100%',
-                    backgroundColor: 'var(--mantine-color-blue-6)',
-                    transition: 'width 0.3s ease'
-                  }} />
-                </div>
-              </Box>
-            )}
 
             <SkeletonLoader type="fileGrid" count={6} />
           </Box>
         ) : (
-          <DragDropGrid
-            items={files}
-            selectedItems={localSelectedIds as any /* FIX ME */}
-            selectionMode={selectionMode}
-            isAnimating={isAnimating}
-            onDragStart={handleDragStart as any /* FIX ME */}
-            onDragEnd={handleDragEnd}
-            onDragOver={handleDragOver}
-            onDragEnter={handleDragEnter as any /* FIX ME */}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop as any /* FIX ME */}
-            onEndZoneDragEnter={handleEndZoneDragEnter}
-            draggedItem={draggedFile as any /* FIX ME */}
-            dropTarget={dropTarget as any /* FIX ME */}
-            multiItemDrag={multiFileDrag as any /* FIX ME */}
-            dragPosition={dragPosition}
-            renderItem={(file, index, refs) => (
-            <FileThumbnail
-              file={file}
-              index={index}
-              totalFiles={files.length}
-              selectedFiles={localSelectedIds}
-              selectionMode={selectionMode}
-              draggedFile={draggedFile}
-              dropTarget={dropTarget}
-              isAnimating={isAnimating}
-              fileRefs={refs}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-              onDragOver={handleDragOver}
-              onDragEnter={handleDragEnter}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              onToggleFile={toggleFile}
-              onDeleteFile={handleDeleteFile}
-              onViewFile={handleViewFile}
-              onSetStatus={setStatus}
-              toolMode={toolMode}
-              isSupported={isFileSupported(file.name)}
-            />
-          )}
-          renderSplitMarker={(file, index) => (
-            <div
-              style={{
-                width: '2px',
-                height: '24rem',
-                borderLeft: '2px dashed #3b82f6',
-                backgroundColor: 'transparent',
-                marginLeft: '-0.75rem',
-                marginRight: '-0.75rem',
-                flexShrink: 0
-              }}
-            />
-          )}
-        />
+          <div 
+            style={{ 
+              display: 'grid', 
+              gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', 
+              gap: '1.5rem', 
+              padding: '1rem',
+              pointerEvents: 'auto'
+            }}
+          >
+            {activeFileRecords.map((record, index) => {
+              const fileItem = recordToFileItem(record);
+              if (!fileItem) return null;
+              
+              return (
+                <FileThumbnail
+                  key={record.id}
+                  file={fileItem}
+                  index={index}
+                  totalFiles={activeFileRecords.length}
+                  selectedFiles={localSelectedIds}
+                  selectionMode={selectionMode}
+                  onToggleFile={toggleFile}
+                  onDeleteFile={handleDeleteFile}
+                  onViewFile={handleViewFile}
+                  onSetStatus={setStatus}
+                  onReorderFiles={handleReorderFiles}
+                  toolMode={toolMode}
+                  isSupported={isFileSupported(fileItem.name)}
+                />
+              );
+            })}
+          </div>
         )}
       </Box>
 
diff --git a/frontend/src/components/fileManager/CompactFileDetails.tsx b/frontend/src/components/fileManager/CompactFileDetails.tsx
index 7f7c410b7..b1b5f0d24 100644
--- a/frontend/src/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/components/fileManager/CompactFileDetails.tsx
@@ -5,12 +5,12 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useTranslation } from 'react-i18next';
 import { getFileSize } from '../../utils/fileUtils';
-import { FileWithUrl } from '../../types/file';
+import { FileMetadata } from '../../types/file';
 
 interface CompactFileDetailsProps {
-  currentFile: FileWithUrl | null;
+  currentFile: FileMetadata | null;
   thumbnail: string | null;
-  selectedFiles: FileWithUrl[];
+  selectedFiles: FileMetadata[];
   currentFileIndex: number;
   numberOfFiles: number;
   isAnimating: boolean;
diff --git a/frontend/src/components/fileManager/FileInfoCard.tsx b/frontend/src/components/fileManager/FileInfoCard.tsx
index 7e69dd2ed..f8cc84cb8 100644
--- a/frontend/src/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/components/fileManager/FileInfoCard.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Stack, Card, Box, Text, Badge, Group, Divider, ScrollArea } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { detectFileExtension, getFileSize } from '../../utils/fileUtils';
-import { FileWithUrl } from '../../types/file';
+import { FileMetadata } from '../../types/file';
 
 interface FileInfoCardProps {
-  currentFile: FileWithUrl | null;
+  currentFile: FileMetadata | null;
   modalHeight: string;
 }
 
diff --git a/frontend/src/components/fileManager/FileListArea.tsx b/frontend/src/components/fileManager/FileListArea.tsx
index fd9357a94..bb376765b 100644
--- a/frontend/src/components/fileManager/FileListArea.tsx
+++ b/frontend/src/components/fileManager/FileListArea.tsx
@@ -52,9 +52,9 @@ const FileListArea: React.FC<FileListAreaProps> = ({
           ) : (
             filteredFiles.map((file, index) => (
               <FileListItem
-                key={file.id || file.name}
+                key={file.id}
                 file={file}
-                isSelected={selectedFilesSet.has(file.id || file.name)}
+                isSelected={selectedFilesSet.has(file.id)}
                 isSupported={isFileSupported(file.name)}
                 onSelect={(shiftKey) => onFileSelect(file, index, shiftKey)}
                 onRemove={() => onFileRemove(index)}
diff --git a/frontend/src/components/fileManager/FileListItem.tsx b/frontend/src/components/fileManager/FileListItem.tsx
index 4b0e408d1..b04f9bc41 100644
--- a/frontend/src/components/fileManager/FileListItem.tsx
+++ b/frontend/src/components/fileManager/FileListItem.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu } from '@mantine/core';
+import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu, Badge } from '@mantine/core';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DeleteIcon from '@mui/icons-material/Delete';
 import DownloadIcon from '@mui/icons-material/Download';
 import { useTranslation } from 'react-i18next';
 import { getFileSize, getFileDate } from '../../utils/fileUtils';
-import { FileWithUrl } from '../../types/file';
+import { FileMetadata } from '../../types/file';
 
 interface FileListItemProps {
-  file: FileWithUrl;
+  file: FileMetadata;
   isSelected: boolean;
   isSupported: boolean;
   onSelect: (shiftKey?: boolean) => void;
@@ -70,7 +70,14 @@ const FileListItem: React.FC<FileListItemProps> = ({
           </Box>
 
           <Box style={{ flex: 1, minWidth: 0 }}>
-            <Text size="sm" fw={500} truncate>{file.name}</Text>
+            <Group gap="xs" align="center">
+              <Text size="sm" fw={500} truncate style={{ flex: 1 }}>{file.name}</Text>
+              {file.isDraft && (
+                <Badge size="xs" variant="light" color="orange">
+                  DRAFT
+                </Badge>
+              )}
+            </Group>
             <Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
           </Box>
 
diff --git a/frontend/src/components/history/FileOperationHistory.tsx b/frontend/src/components/history/FileOperationHistory.tsx
index 93b9cf015..60a4a7b0c 100644
--- a/frontend/src/components/history/FileOperationHistory.tsx
+++ b/frontend/src/components/history/FileOperationHistory.tsx
@@ -11,7 +11,7 @@ import {
   Code,
   Divider
 } from '@mantine/core';
-import { useFileContext } from '../../contexts/FileContext';
+// FileContext no longer needed - these were stub functions anyway
 import { FileOperation, FileOperationHistory as FileOperationHistoryType } from '../../types/fileContext';
 import { PageOperation } from '../../types/pageEditor';
 
@@ -26,11 +26,13 @@ const FileOperationHistory: React.FC<FileOperationHistoryProps> = ({
   showOnlyApplied = false,
   maxHeight = 400
 }) => {
-  const { getFileHistory, getAppliedOperations } = useFileContext();
+  // These were stub functions in the old context - replace with empty stubs
+  const getFileHistory = (fileId: string) => ({ operations: [], createdAt: Date.now(), lastModified: Date.now() });
+  const getAppliedOperations = (fileId: string) => [];
 
   const history = getFileHistory(fileId);
   const allOperations = showOnlyApplied ? getAppliedOperations(fileId) : history?.operations || [];
-  const operations = allOperations.filter(op => 'fileIds' in op) as FileOperation[];
+  const operations = allOperations.filter((op: any) => 'fileIds' in op) as FileOperation[];
 
   const formatTimestamp = (timestamp: number) => {
     return new Date(timestamp).toLocaleString();
diff --git a/frontend/src/components/layout/Workbench.tsx b/frontend/src/components/layout/Workbench.tsx
index 732b37d7b..fc41d2480 100644
--- a/frontend/src/components/layout/Workbench.tsx
+++ b/frontend/src/components/layout/Workbench.tsx
@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useFileHandler } from '../../hooks/useFileHandler';
-import { useFileContext } from '../../contexts/FileContext';
+import { useFileState, useFileActions } from '../../contexts/FileContext';
+import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
 
 import TopControls from '../shared/TopControls';
 import FileEditor from '../fileEditor/FileEditor';
@@ -20,7 +21,12 @@ export default function Workbench() {
   const { isRainbowMode } = useRainbowThemeContext();
 
   // Use context-based hooks to eliminate all prop drilling
-  const { activeFiles, currentView, setCurrentView } = useFileContext();
+  const { state } = useFileState();
+  const { actions } = useFileActions();
+  const { currentMode: currentView } = useNavigationState();
+  const { actions: navActions } = useNavigationActions();
+  const setCurrentView = navActions.setMode;
+  const activeFiles = state.files.ids;
   const {
     previewFile,
     pageEditorFunctions,
@@ -47,12 +53,12 @@ export default function Workbench() {
       handleToolSelect('convert');
       sessionStorage.removeItem('previousMode');
     } else {
-      setCurrentView('fileEditor' as any);
+      setCurrentView('fileEditor');
     }
   };
 
   const renderMainContent = () => {
-    if (!activeFiles[0]) {
+    if (activeFiles.length === 0) {
       return (
         <LandingPage
         />
@@ -69,11 +75,11 @@ export default function Workbench() {
             supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
             {...(!selectedToolKey && {
               onOpenPageEditor: (file) => {
-                setCurrentView("pageEditor" as any);
+                setCurrentView("pageEditor");
               },
               onMergeFiles: (filesToMerge) => {
                 filesToMerge.forEach(addToActiveFiles);
-                setCurrentView("viewer" as any);
+                setCurrentView("viewer");
               }
             })}
           />
@@ -142,7 +148,7 @@ export default function Workbench() {
       {/* Top Controls */}
       <TopControls
         currentView={currentView}
-        setCurrentView={setCurrentView as any /* FIX ME */}
+        setCurrentView={setCurrentView}
         selectedToolKey={selectedToolKey}
       />
 
diff --git a/frontend/src/components/pageEditor/DragDropGrid.tsx b/frontend/src/components/pageEditor/DragDropGrid.tsx
index 3639f74d9..5829d0375 100644
--- a/frontend/src/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/components/pageEditor/DragDropGrid.tsx
@@ -1,5 +1,7 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Box } from '@mantine/core';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import styles from './PageEditor.module.css';
 
 interface DragDropItem {
@@ -12,19 +14,9 @@ interface DragDropGridProps<T extends DragDropItem> {
   selectedItems: number[];
   selectionMode: boolean;
   isAnimating: boolean;
-  onDragStart: (pageNumber: number) => void;
-  onDragEnd: () => void;
-  onDragOver: (e: React.DragEvent) => void;
-  onDragEnter: (pageNumber: number) => void;
-  onDragLeave: () => void;
-  onDrop: (e: React.DragEvent, targetPageNumber: number | 'end') => void;
-  onEndZoneDragEnter: () => void;
+  onReorderPages: (sourcePageNumber: number, targetIndex: number, selectedPages?: number[]) => void;
   renderItem: (item: T, index: number, refs: React.MutableRefObject<Map<string, HTMLDivElement>>) => React.ReactNode;
   renderSplitMarker?: (item: T, index: number) => React.ReactNode;
-  draggedItem: number | null;
-  dropTarget: number | 'end' | null;
-  multiItemDrag: {pageNumbers: number[], count: number} | null;
-  dragPosition: {x: number, y: number} | null;
 }
 
 const DragDropGrid = <T extends DragDropItem>({
@@ -32,104 +24,129 @@ const DragDropGrid = <T extends DragDropItem>({
   selectedItems,
   selectionMode,
   isAnimating,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragEnter,
-  onDragLeave,
-  onDrop,
-  onEndZoneDragEnter,
+  onReorderPages,
   renderItem,
   renderSplitMarker,
-  draggedItem,
-  dropTarget,
-  multiItemDrag,
-  dragPosition,
 }: DragDropGridProps<T>) => {
   const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-
-  // Global drag cleanup
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  // Responsive grid configuration
+  const [itemsPerRow, setItemsPerRow] = useState(4);
+  const ITEM_WIDTH = 320; // 20rem (page width)
+  const ITEM_GAP = 24; // 1.5rem gap between items
+  const ITEM_HEIGHT = 340; // 20rem + gap
+  const OVERSCAN = items.length > 1000 ? 8 : 4; // More overscan for large documents
+  
+  // Calculate items per row based on container width
+  const calculateItemsPerRow = useCallback(() => {
+    if (!containerRef.current) return 4; // Default fallback
+    
+    const containerWidth = containerRef.current.offsetWidth;
+    if (containerWidth === 0) return 4; // Container not measured yet
+    
+    // Calculate how many items fit: (width - gap) / (itemWidth + gap)
+    const availableWidth = containerWidth - ITEM_GAP; // Account for first gap
+    const itemWithGap = ITEM_WIDTH + ITEM_GAP;
+    const calculated = Math.floor(availableWidth / itemWithGap);
+    
+    return Math.max(1, calculated); // At least 1 item per row
+  }, []);
+  
+  // Update items per row when container resizes
   useEffect(() => {
-    const handleGlobalDragEnd = () => {
-      onDragEnd();
+    const updateLayout = () => {
+      const newItemsPerRow = calculateItemsPerRow();
+      setItemsPerRow(newItemsPerRow);
     };
-
-    const handleGlobalDrop = (e: DragEvent) => {
-      e.preventDefault();
-    };
-
-    if (draggedItem) {
-      document.addEventListener('dragend', handleGlobalDragEnd);
-      document.addEventListener('drop', handleGlobalDrop);
+    
+    // Initial calculation
+    updateLayout();
+    
+    // Listen for window resize
+    window.addEventListener('resize', updateLayout);
+    
+    // Use ResizeObserver for container size changes
+    const resizeObserver = new ResizeObserver(updateLayout);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
     }
-
+    
     return () => {
-      document.removeEventListener('dragend', handleGlobalDragEnd);
-      document.removeEventListener('drop', handleGlobalDrop);
+      window.removeEventListener('resize', updateLayout);
+      resizeObserver.disconnect();
     };
-  }, [draggedItem, onDragEnd]);
+  }, [calculateItemsPerRow]);
+  
+  // Virtualization with react-virtual library
+  const rowVirtualizer = useVirtualizer({
+    count: Math.ceil(items.length / itemsPerRow),
+    getScrollElement: () => containerRef.current?.closest('[data-scrolling-container]') as Element,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: OVERSCAN,
+  });
+
+
 
   return (
-    <Box>
+    <Box 
+      ref={containerRef}
+      style={{ 
+        // Basic container styles
+        width: '100%',
+        height: '100%',
+      }}
+    >
       <div
         style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '1.5rem',
-          justifyContent: 'flex-start',
-          paddingBottom: '100px',
-          // Performance optimizations for smooth scrolling
-          willChange: 'scroll-position',
-          transform: 'translateZ(0)', // Force hardware acceleration
-          backfaceVisibility: 'hidden',
-          // Use containment for better rendering performance
-          contain: 'layout style paint',
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
         }}
       >
-        {items.map((item, index) => (
-          <React.Fragment key={item.id}>
-            {/* Split marker */}
-            {renderSplitMarker && item.splitBefore && index > 0 && renderSplitMarker(item, index)}
-
-            {/* Item */}
-            {renderItem(item, index, itemRefs)}
-          </React.Fragment>
-        ))}
-
-        {/* End drop zone */}
-        <div className="w-[20rem] h-[20rem] flex items-center justify-center flex-shrink-0">
-          <div
-            data-drop-zone="end"
-            className={`cursor-pointer select-none w-[15rem] h-[15rem] flex items-center justify-center flex-shrink-0 shadow-sm hover:shadow-md transition-all relative ${
-              dropTarget === 'end'
-                ? 'ring-2 ring-green-500 bg-green-50'
-                : 'bg-white hover:bg-blue-50 border-2 border-dashed border-gray-300 hover:border-blue-400'
-            }`}
-            style={{ borderRadius: '12px' }}
-            onDragOver={onDragOver}
-            onDragEnter={onEndZoneDragEnter}
-            onDragLeave={onDragLeave}
-            onDrop={(e) => onDrop(e, 'end')}
-          >
-            <div className="text-gray-500 text-sm text-center font-medium">
-              Drop here to<br />move to end
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+          const startIndex = virtualRow.index * itemsPerRow;
+          const endIndex = Math.min(startIndex + itemsPerRow, items.length);
+          const rowItems = items.slice(startIndex, endIndex);
+          
+          return (
+            <div
+              key={virtualRow.index}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start}px)`,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  gap: '1.5rem',
+                  justifyContent: 'flex-start',
+                  height: '100%',
+                  alignItems: 'center',
+                }}
+              >
+                {rowItems.map((item, itemIndex) => {
+                  const actualIndex = startIndex + itemIndex;
+                  return (
+                    <React.Fragment key={item.id}>
+                      {/* Split marker */}
+                      {renderSplitMarker && item.splitBefore && actualIndex > 0 && renderSplitMarker(item, actualIndex)}
+                      {/* Item */}
+                      {renderItem(item, actualIndex, itemRefs)}
+                    </React.Fragment>
+                  );
+                })}
+                
+              </div>
             </div>
-          </div>
-        </div>
+          );
+        })}
       </div>
-
-      {/* Multi-item drag indicator */}
-      {multiItemDrag && dragPosition && (
-        <div
-          className={styles.multiDragIndicator}
-          style={{
-            left: dragPosition.x,
-            top: dragPosition.y,
-          }}
-        >
-          {multiItemDrag.count} items
-        </div>
-      )}
     </Box>
   );
 };
diff --git a/frontend/src/components/pageEditor/FileThumbnail.tsx b/frontend/src/components/pageEditor/FileThumbnail.tsx
index c328a350d..d84eb2a16 100644
--- a/frontend/src/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/components/pageEditor/FileThumbnail.tsx
@@ -1,14 +1,12 @@
-import React, { useState } from 'react';
-import { Text, Checkbox, Tooltip, ActionIcon, Badge, Modal } from '@mantine/core';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Text, Checkbox, Tooltip, ActionIcon, Badge } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import CloseIcon from '@mui/icons-material/Close';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import HistoryIcon from '@mui/icons-material/History';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import styles from './PageEditor.module.css';
-import FileOperationHistory from '../history/FileOperationHistory';
 import { useFileContext } from '../../contexts/FileContext';
 
 interface FileItem {
@@ -26,20 +24,11 @@ interface FileThumbnailProps {
   totalFiles: number;
   selectedFiles: string[];
   selectionMode: boolean;
-  draggedFile: string | null;
-  dropTarget: string | null;
-  isAnimating: boolean;
-  fileRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
-  onDragStart: (fileId: string) => void;
-  onDragEnd: () => void;
-  onDragOver: (e: React.DragEvent) => void;
-  onDragEnter: (fileId: string) => void;
-  onDragLeave: () => void;
-  onDrop: (e: React.DragEvent, fileId: string) => void;
   onToggleFile: (fileId: string) => void;
   onDeleteFile: (fileId: string) => void;
   onViewFile: (fileId: string) => void;
   onSetStatus: (status: string) => void;
+  onReorderFiles?: (sourceFileId: string, targetFileId: string, selectedFileIds: string[]) => void;
   toolMode?: boolean;
   isSupported?: boolean;
 }
@@ -50,26 +39,20 @@ const FileThumbnail = ({
   totalFiles,
   selectedFiles,
   selectionMode,
-  draggedFile,
-  dropTarget,
-  isAnimating,
-  fileRefs,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragEnter,
-  onDragLeave,
-  onDrop,
   onToggleFile,
   onDeleteFile,
   onViewFile,
   onSetStatus,
+  onReorderFiles,
   toolMode = false,
   isSupported = true,
 }: FileThumbnailProps) => {
   const { t } = useTranslation();
-  const [showHistory, setShowHistory] = useState(false);
   const { pinnedFiles, pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
+  
+  // Drag and drop state
+  const [isDragging, setIsDragging] = useState(false);
+  const dragElementRef = useRef<HTMLDivElement | null>(null);
 
   // Find the actual File object that corresponds to this FileItem
   const actualFile = activeFiles.find(f => f.name === file.name && f.size === file.size);
@@ -82,15 +65,57 @@ const FileThumbnail = ({
     return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
   };
 
+  // Setup drag and drop using @atlaskit/pragmatic-drag-and-drop
+  const fileElementRef = useCallback((element: HTMLDivElement | null) => {
+    if (!element) return;
+    
+    dragElementRef.current = element;
+    
+    const dragCleanup = draggable({
+      element,
+      getInitialData: () => ({
+        type: 'file',
+        fileId: file.id,
+        fileName: file.name,
+        selectedFiles: [file.id]  // Always drag only this file, ignore selection state
+      }),
+      onDragStart: () => {
+        setIsDragging(true);
+      },
+      onDrop: () => {
+        setIsDragging(false);
+      }
+    });
+    
+    const dropCleanup = dropTargetForElements({
+      element,
+      getData: () => ({
+        type: 'file',
+        fileId: file.id
+      }),
+      canDrop: ({ source }) => {
+        const sourceData = source.data;
+        return sourceData.type === 'file' && sourceData.fileId !== file.id;
+      },
+      onDrop: ({ source }) => {
+        const sourceData = source.data;
+        if (sourceData.type === 'file' && onReorderFiles) {
+          const sourceFileId = sourceData.fileId as string;
+          const selectedFileIds = sourceData.selectedFiles as string[];
+          onReorderFiles(sourceFileId, file.id, selectedFileIds);
+        }
+      }
+    });
+
+    return () => {
+      dragCleanup();
+      dropCleanup();
+    };
+  }, [file.id, file.name, selectionMode, selectedFiles, onReorderFiles]);
+
   return (
     <div
-      ref={(el) => {
-        if (el) {
-          fileRefs.current.set(file.id, el);
-        } else {
-          fileRefs.current.delete(file.id);
-        }
-      }}
+      ref={fileElementRef}
       data-file-id={file.id}
       data-testid="file-thumbnail"
       className={`
@@ -109,26 +134,12 @@ const FileThumbnail = ({
         ${selectionMode
           ? 'bg-white hover:bg-gray-50'
           : 'bg-white hover:bg-gray-50'}
-        ${draggedFile === file.id ? 'opacity-50 scale-95' : ''}
+        ${isDragging ? 'opacity-50 scale-95' : ''}
       `}
       style={{
-        transform: (() => {
-          if (!isAnimating && draggedFile && file.id !== draggedFile && dropTarget === file.id) {
-            return 'translateX(20px)';
-          }
-          return 'translateX(0)';
-        })(),
-        transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out',
-        opacity: isSupported ? 1 : 0.5,
+        opacity: isSupported ? (isDragging ? 0.5 : 1) : 0.5,
         filter: isSupported ? 'none' : 'grayscale(50%)'
       }}
-      draggable
-      onDragStart={() => onDragStart(file.id)}
-      onDragEnd={onDragEnd}
-      onDragOver={onDragOver}
-      onDragEnter={() => onDragEnter(file.id)}
-      onDragLeave={onDragLeave}
-      onDrop={(e) => onDrop(e, file.id)}
     >
       {selectionMode && (
         <div
@@ -187,6 +198,12 @@ const FileThumbnail = ({
           <img
             src={file.thumbnail}
             alt={file.name}
+            draggable={false}
+            onError={(e) => {
+              // Hide broken image if blob URL was revoked
+              const img = e.target as HTMLImageElement;
+              img.style.display = 'none';
+            }}
             style={{
               maxWidth: '100%',
               maxHeight: '100%',
@@ -196,20 +213,22 @@ const FileThumbnail = ({
           />
         </div>
 
-        {/* Page count badge */}
-        <Badge
-          size="sm"
-          variant="filled"
-          color="blue"
-          style={{
-            position: 'absolute',
-            top: 8,
-            left: 8,
-            zIndex: 3,
-          }}
-        >
-          {file.pageCount} pages
-        </Badge>
+        {/* Page count badge - only show for PDFs */}
+        {file.pageCount > 0 && (
+          <Badge
+            size="sm"
+            variant="filled"
+            color="blue"
+            style={{
+              position: 'absolute',
+              top: 8,
+              left: 8,
+              zIndex: 3,
+            }}
+          >
+            {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
+          </Badge>
+        )}
 
         {/* Unsupported badge */}
         {!isSupported && (
@@ -273,40 +292,6 @@ const FileThumbnail = ({
             whiteSpace: 'nowrap'
           }}
         >
-          {!toolMode && isSupported && (
-            <>
-              <Tooltip label="View File">
-                <ActionIcon
-                  size="md"
-                  variant="subtle"
-                  c="white"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onViewFile(file.id);
-                    onSetStatus(`Opened ${file.name}`);
-                  }}
-                >
-                  <VisibilityIcon style={{ fontSize: 20 }} />
-                </ActionIcon>
-              </Tooltip>
-
-            </>
-          )}
-
-          <Tooltip label="View History">
-            <ActionIcon
-              size="md"
-              variant="subtle"
-              c="white"
-              onClick={(e) => {
-                e.stopPropagation();
-                setShowHistory(true);
-                onSetStatus(`Viewing history for ${file.name}`);
-              }}
-            >
-              <HistoryIcon style={{ fontSize: 20 }} />
-            </ActionIcon>
-          </Tooltip>
 
           {actualFile && (
             <Tooltip label={isFilePinned(actualFile) ? "Unpin File" : "Pin File"}>
@@ -372,20 +357,6 @@ const FileThumbnail = ({
         </Text>
       </div>
 
-      {/* History Modal */}
-      <Modal
-        opened={showHistory}
-        onClose={() => setShowHistory(false)}
-        title={`Operation History - ${file.name}`}
-        size="lg"
-        scrollAreaComponent={'div' as any}
-      >
-        <FileOperationHistory 
-          fileId={file.name} 
-          showOnlyApplied={true}
-          maxHeight={500}
-        />
-      </Modal>
     </div>
   );
 };
diff --git a/frontend/src/components/pageEditor/PageEditor.tsx b/frontend/src/components/pageEditor/PageEditor.tsx
index 60467d45d..7ca640b06 100644
--- a/frontend/src/components/pageEditor/PageEditor.tsx
+++ b/frontend/src/components/pageEditor/PageEditor.tsx
@@ -5,8 +5,8 @@ import {
   Stack, Group
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { useFileContext, useCurrentFile } from "../../contexts/FileContext";
-import { ViewType, ToolType } from "../../types/fileContext";
+import { useFileState, useFileActions, useCurrentFile, useFileSelection } from "../../contexts/FileContext";
+import { ModeType } from "../../contexts/NavigationContext";
 import { PDFDocument, PDFPage } from "../../types/pageEditor";
 import { ProcessedFile as EnhancedProcessedFile } from "../../types/processing";
 import { useUndoRedo } from "../../hooks/useUndoRedo";
@@ -18,9 +18,14 @@ import {
   ToggleSplitCommand
 } from "../../commands/pageCommands";
 import { pdfExportService } from "../../services/pdfExportService";
+import { enhancedPDFProcessingService } from "../../services/enhancedPDFProcessingService";
+import { fileProcessingService } from "../../services/fileProcessingService";
+import { pdfProcessingService } from "../../services/pdfProcessingService";
+import { pdfWorkerManager } from "../../services/pdfWorkerManager";
 import { useThumbnailGeneration } from "../../hooks/useThumbnailGeneration";
 import { calculateScaleFromFileSize } from "../../utils/thumbnailUtils";
 import { fileStorage } from "../../services/fileStorage";
+import { indexedDBManager, DATABASE_CONFIGS } from "../../services/indexedDBManager";
 import './PageEditor.module.css';
 import PageThumbnail from './PageThumbnail';
 import BulkSelectionPanel from './BulkSelectionPanel';
@@ -53,88 +58,170 @@ const PageEditor = ({
 }: PageEditorProps) => {
   const { t } = useTranslation();
 
-  // Get file context
-  const fileContext = useFileContext();
-  const { file: currentFile, processedFile: currentProcessedFile } = useCurrentFile();
-
-  // Use file context state
-  const {
-    activeFiles,
-    processedFiles,
-    selectedPageNumbers,
-    setSelectedPages,
-    updateProcessedFile,
-    setHasUnsavedChanges,
-    hasUnsavedChanges,
-    isProcessing: globalProcessing,
-    processingProgress,
-    clearAllFiles
-  } = fileContext;
+  // Use split contexts to prevent re-renders
+  const { state, selectors } = useFileState();
+  const { actions } = useFileActions();
+  
+  // Prefer IDs + selectors to avoid array identity churn
+  const activeFileIds = state.files.ids;
+  const primaryFileId = activeFileIds[0] ?? null;
+  const selectedFiles = selectors.getSelectedFiles();
+  
+  // Stable signature for effects (prevents loops)
+  const filesSignature = selectors.getFilesSignature();
+  
+  // UI state
+  const globalProcessing = state.ui.isProcessing;
+  const processingProgress = state.ui.processingProgress;
+  const hasUnsavedChanges = state.ui.hasUnsavedChanges;
+  const selectedPageNumbers = state.ui.selectedPageNumbers;
 
   // Edit state management
   const [editedDocument, setEditedDocument] = useState<PDFDocument | null>(null);
   const [hasUnsavedDraft, setHasUnsavedDraft] = useState(false);
   const [showResumeModal, setShowResumeModal] = useState(false);
   const [foundDraft, setFoundDraft] = useState<any>(null);
-  const autoSaveTimer = useRef<NodeJS.Timeout | null>(null);
+  const autoSaveTimer = useRef<number | null>(null);
 
-  // Simple computed document from processed files (no caching needed)
-  const mergedPdfDocument = useMemo(() => {
-    if (activeFiles.length === 0) return null;
+  /**
+   * Create stable files signature to prevent infinite re-computation.
+   * This signature only changes when files are actually added/removed or processing state changes.
+   * Using this instead of direct file arrays prevents unnecessary re-renders.
+   */
+  
+  // Thumbnail generation (opt-in for visual tools) - MUST be before mergedPdfDocument
+  const {
+    generateThumbnails,
+    addThumbnailToCache,
+    getThumbnailFromCache,
+    stopGeneration,
+    destroyThumbnails
+  } = useThumbnailGeneration();
+  
 
-    if (activeFiles.length === 1) {
-      // Single file
-      const processedFile = processedFiles.get(activeFiles[0]);
-      if (!processedFile) return null;
+  // Get primary file record outside useMemo to track processedFile changes
+  const primaryFileRecord = primaryFileId ? selectors.getFileRecord(primaryFileId) : null;
+  const processedFilePages = primaryFileRecord?.processedFile?.pages;
+  const processedFileTotalPages = primaryFileRecord?.processedFile?.totalPages;
 
-      return {
-        id: processedFile.id,
-        name: activeFiles[0].name,
-        file: activeFiles[0],
-        pages: processedFile.pages.map(page => ({
-          ...page,
-          rotation: page.rotation || 0,
-          splitBefore: page.splitBefore || false
-        })),
-        totalPages: processedFile.totalPages
-      };
-    } else {
-      // Multiple files - merge them
-      const allPages: PDFPage[] = [];
-      let totalPages = 0;
-      const filenames: string[] = [];
+  // Compute merged document with stable signature (prevents infinite loops)
+  const mergedPdfDocument = useMemo((): PDFDocument | null => {
+    if (activeFileIds.length === 0) return null;
 
-      activeFiles.forEach((file, i) => {
-        const processedFile = processedFiles.get(file);
-        if (processedFile) {
-          filenames.push(file.name.replace(/\.pdf$/i, ''));
-
-          processedFile.pages.forEach((page, pageIndex) => {
-            const newPage: PDFPage = {
-              ...page,
-              id: `${i}-${page.id}`, // Unique ID across all files
-              pageNumber: totalPages + pageIndex + 1,
-              rotation: page.rotation || 0,
-              splitBefore: page.splitBefore || false
-            };
-            allPages.push(newPage);
-          });
-
-          totalPages += processedFile.pages.length;
-        }
-      });
-
-      if (allPages.length === 0) return null;
-
-      return {
-        id: `merged-${Date.now()}`,
-        name: filenames.join(' + '),
-        file: activeFiles[0], // Use first file as reference
-        pages: allPages,
-        totalPages: totalPages
-      };
+    const primaryFile = primaryFileId ? selectors.getFile(primaryFileId) : null;
+    
+    // If we have file IDs but no file record, something is wrong - return null to show loading
+    if (!primaryFileRecord) {
+      console.log('🎬 PageEditor: No primary file record found, showing loading');
+      return null;
     }
-  }, [activeFiles, processedFiles]);
+
+    const name =
+      activeFileIds.length === 1
+        ? (primaryFileRecord.name ?? 'document.pdf')
+        : activeFileIds
+            .map(id => (selectors.getFileRecord(id)?.name ?? 'file').replace(/\.pdf$/i, ''))
+            .join(' + ');
+
+    // Get pages from processed file data
+    const processedFile = primaryFileRecord.processedFile;
+    
+    // Debug logging for processed file data
+    console.log(`🎬 PageEditor: Building document for ${name}`);
+    console.log(`🎬 ProcessedFile exists:`, !!processedFile);
+    console.log(`🎬 ProcessedFile pages:`, processedFile?.pages?.length || 0);
+    console.log(`🎬 ProcessedFile totalPages:`, processedFile?.totalPages || 'unknown');
+    if (processedFile?.pages) {
+      console.log(`🎬 Pages structure:`, processedFile.pages.map(p => ({ pageNumber: p.pageNumber || 'unknown', hasThumbnail: !!p.thumbnail })));
+    }
+    console.log(`🎬 Will use ${(processedFile?.pages?.length || 0) > 0 ? 'PROCESSED' : 'FALLBACK'} pages`);
+    
+    // Convert processed pages to PageEditor format or create placeholders from metadata
+    let pages: PDFPage[] = [];
+    
+    if (processedFile?.pages && processedFile.pages.length > 0) {
+      // Use fully processed pages with thumbnails
+      pages = processedFile.pages.map((page, index) => {
+        const pageId = `${primaryFileId}-page-${index + 1}`;
+        // Try multiple sources for thumbnails in order of preference:
+        // 1. Processed data thumbnail
+        // 2. Cached thumbnail from previous generation
+        // 3. For page 1: FileRecord's thumbnailUrl (from FileProcessingService)
+        let thumbnail = page.thumbnail || null;
+        const cachedThumbnail = getThumbnailFromCache(pageId);
+        if (!thumbnail && cachedThumbnail) {
+          thumbnail = cachedThumbnail;
+          console.log(`📸 PageEditor: Using cached thumbnail for page ${index + 1} (${pageId})`);
+        }
+        if (!thumbnail && index === 0) {
+          // For page 1, use the thumbnail from FileProcessingService
+          thumbnail = primaryFileRecord.thumbnailUrl || null;
+          if (thumbnail) {
+            addThumbnailToCache(pageId, thumbnail);
+            console.log(`📸 PageEditor: Using FileProcessingService thumbnail for page 1 (${pageId})`);
+          }
+        }
+        
+        return {
+          id: pageId,
+          pageNumber: index + 1,
+          thumbnail,
+          rotation: page.rotation || 0,
+          selected: false,
+          splitBefore: page.splitBefore || false,
+        };
+      });
+    } else if (processedFile?.totalPages && processedFile.totalPages > 0) {
+      // Create placeholder pages from metadata while thumbnails are being generated
+      console.log(`🎬 PageEditor: Creating ${processedFile.totalPages} placeholder pages from metadata`);
+      pages = Array.from({ length: processedFile.totalPages }, (_, index) => {
+        const pageId = `${primaryFileId}-page-${index + 1}`;
+        
+        // Check for existing cached thumbnail
+        let thumbnail = getThumbnailFromCache(pageId) || null;
+        
+        // For page 1, try to use the FileRecord thumbnail
+        if (!thumbnail && index === 0) {
+          thumbnail = primaryFileRecord.thumbnailUrl || null;
+          if (thumbnail) {
+            addThumbnailToCache(pageId, thumbnail);
+            console.log(`📸 PageEditor: Using FileProcessingService thumbnail for placeholder page 1 (${pageId})`);
+          }
+        }
+        
+        return {
+          id: pageId,
+          pageNumber: index + 1,
+          thumbnail, // Will be null initially, populated by PageThumbnail components
+          rotation: 0,
+          selected: false,
+          splitBefore: false,
+        };
+      });
+    } else {
+      // Ultimate fallback - single page while we wait for metadata
+      pages = [{
+        id: `${primaryFileId}-page-1`,
+        pageNumber: 1,
+        thumbnail: getThumbnailFromCache(`${primaryFileId}-page-1`) || primaryFileRecord.thumbnailUrl || null,
+        rotation: 0,
+        selected: false,
+        splitBefore: false,
+      }];
+    }
+
+    // Create document with determined pages
+
+    return {
+      id: activeFileIds.length === 1 ? (primaryFileId ?? 'unknown') : `merged:${filesSignature}`,
+      name,
+      file: primaryFile || new File([], primaryFileRecord.name), // Create minimal File if needed
+      pages,
+      totalPages: pages.length,
+      destroy: () => {} // Optional cleanup function
+    };
+  }, [filesSignature, primaryFileId, primaryFileRecord]);
+
 
   // Display document: Use edited version if exists, otherwise original
   const displayDocument = editedDocument || mergedPdfDocument;
@@ -142,16 +229,13 @@ const PageEditor = ({
   const [filename, setFilename] = useState<string>("");
 
 
+
   // Page editor state (use context for selectedPages)
   const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const [csvInput, setCsvInput] = useState<string>("");
   const [selectionMode, setSelectionMode] = useState(false);
 
-  // Drag and drop state
-  const [draggedPage, setDraggedPage] = useState<number | null>(null);
-  const [dropTarget, setDropTarget] = useState<number | 'end' | null>(null);
-  const [multiPageDrag, setMultiPageDrag] = useState<{pageNumbers: number[], count: number} | null>(null);
-  const [dragPosition, setDragPosition] = useState<{x: number, y: number} | null>(null);
 
   // Export state
   const [exportLoading, setExportLoading] = useState(false);
@@ -168,17 +252,22 @@ const PageEditor = ({
   // Undo/Redo system
   const { executeCommand, undo, redo, canUndo, canRedo } = useUndoRedo();
 
-  // Set initial filename when document changes
+  // Set initial filename when document changes - use stable signature
   useEffect(() => {
     if (mergedPdfDocument) {
-      if (activeFiles.length === 1) {
-        setFilename(activeFiles[0].name.replace(/\.pdf$/i, ''));
+      if (activeFileIds.length === 1 && primaryFileId) {
+        const record = selectors.getFileRecord(primaryFileId);
+        if (record) {
+          setFilename(record.name.replace(/\.pdf$/i, ''));
+        }
       } else {
-        const filenames = activeFiles.map(f => f.name.replace(/\.pdf$/i, ''));
+        const filenames = activeFileIds
+          .map(id => selectors.getFileRecord(id)?.name.replace(/\.pdf$/i, '') || 'file')
+          .filter(Boolean);
         setFilename(filenames.join('_'));
       }
     }
-  }, [mergedPdfDocument, activeFiles]);
+  }, [mergedPdfDocument, filesSignature, primaryFileId, selectors]);
 
   // Handle file upload from FileUploadSelector (now using context)
   const handleMultipleFileUpload = useCallback(async (uploadedFiles: File[]) => {
@@ -188,168 +277,177 @@ const PageEditor = ({
     }
 
     // Add files to context
-    await fileContext.addFiles(uploadedFiles);
+    await actions.addFiles(uploadedFiles);
     setStatus(`Added ${uploadedFiles.length} file(s) for processing`);
-  }, [fileContext]);
+  }, [actions]);
 
 
   // PageEditor no longer handles cleanup - it's centralized in FileContext
 
-  // Shared PDF instance for thumbnail generation
-  const [sharedPdfInstance, setSharedPdfInstance] = useState<any>(null);
-  const [thumbnailGenerationStarted, setThumbnailGenerationStarted] = useState(false);
+  // Simple cache-first thumbnail generation (no complex detection needed)
 
-  // Thumbnail generation (opt-in for visual tools)
-  const {
-    generateThumbnails,
-    addThumbnailToCache,
-    getThumbnailFromCache,
-    stopGeneration,
-    destroyThumbnails
-  } = useThumbnailGeneration();
-
-  // Start thumbnail generation process (separate from document loading)
-  const startThumbnailGeneration = useCallback(() => {
-    console.log('🎬 PageEditor: startThumbnailGeneration called');
-    console.log('🎬 Conditions - mergedPdfDocument:', !!mergedPdfDocument, 'activeFiles:', activeFiles.length, 'started:', thumbnailGenerationStarted);
-
-    if (!mergedPdfDocument || activeFiles.length !== 1 || thumbnailGenerationStarted) {
-      console.log('🎬 PageEditor: Skipping thumbnail generation due to conditions');
+  // Lazy thumbnail generation - only generate when needed, with intelligent batching
+  const generateMissingThumbnails = useCallback(async () => {
+    if (!mergedPdfDocument || !primaryFileId || activeFileIds.length !== 1) {
       return;
     }
 
-    const file = activeFiles[0];
+    const file = selectors.getFile(primaryFileId);
+    if (!file) return;
+    
     const totalPages = mergedPdfDocument.totalPages;
-
-    console.log('🎬 PageEditor: Starting thumbnail generation for', totalPages, 'pages');
-    setThumbnailGenerationStarted(true);
-
-    // Run everything asynchronously to avoid blocking the main thread
-    setTimeout(async () => {
-      try {
-        // Load PDF array buffer for Web Workers
-        const arrayBuffer = await file.arrayBuffer();
-
-        // Generate page numbers for pages that don't have thumbnails yet
-        const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1)
-          .filter(pageNum => {
-            const page = mergedPdfDocument.pages.find(p => p.pageNumber === pageNum);
-            return !page?.thumbnail; // Only generate for pages without thumbnails
-          });
-
-        console.log(`🎬 PageEditor: Generating thumbnails for ${pageNumbers.length} pages (out of ${totalPages} total):`, pageNumbers.slice(0, 10), pageNumbers.length > 10 ? '...' : '');
-
-        // If no pages need thumbnails, we're done
-        if (pageNumbers.length === 0) {
-          console.log('🎬 PageEditor: All pages already have thumbnails, no generation needed');
-          return;
+    if (totalPages <= 1) return; // Only page 1, nothing to generate
+    
+    // For very large documents (2000+ pages), be much more conservative
+    const isVeryLargeDocument = totalPages > 2000;
+    
+    if (isVeryLargeDocument) {
+      console.log(`📸 PageEditor: Very large document (${totalPages} pages) - using minimal thumbnail generation`);
+      // For very large docs, only generate the next visible batch (pages 2-25) to avoid UI blocking
+      const pageNumbersToGenerate = [];
+      for (let pageNum = 2; pageNum <= Math.min(25, totalPages); pageNum++) {
+        const pageId = `${primaryFileId}-page-${pageNum}`;
+        if (!getThumbnailFromCache(pageId)) {
+          pageNumbersToGenerate.push(pageNum);
         }
-
-        // Calculate quality scale based on file size
-        const scale = activeFiles.length === 1 ? calculateScaleFromFileSize(activeFiles[0].size) : 0.2;
-
-        // Start parallel thumbnail generation WITHOUT blocking the main thread
-        const generationPromise = generateThumbnails(
-          arrayBuffer,
-          pageNumbers,
-          {
-            scale, // Dynamic quality based on file size
-            quality: 0.8,
-            batchSize: 15, // Smaller batches per worker for smoother UI
-            parallelBatches: 3 // Use 3 Web Workers in parallel
-          },
-          // Progress callback (throttled for better performance)
-          (progress) => {
-            console.log(`🎬 PageEditor: Progress - ${progress.completed}/${progress.total} pages, ${progress.thumbnails.length} new thumbnails`);
-            // Batch process thumbnails to reduce main thread work
-            requestAnimationFrame(() => {
-              progress.thumbnails.forEach(({ pageNumber, thumbnail }) => {
-                // Check cache first, then send thumbnail
-                const pageId = `${file.name}-page-${pageNumber}`;
-                const cached = getThumbnailFromCache(pageId);
-
-                if (!cached) {
-                  // Cache and send to component
-                  addThumbnailToCache(pageId, thumbnail);
-
-                  window.dispatchEvent(new CustomEvent('thumbnailReady', {
-                    detail: { pageNumber, thumbnail, pageId }
-                  }));
-                  console.log(`✓ PageEditor: Dispatched thumbnail for page ${pageNumber}`);
-                }
-              });
-            });
-          }
-        );
-
-        // Handle completion properly
-        generationPromise
-          .then((allThumbnails) => {
-            console.log(`✅ PageEditor: Thumbnail generation completed! Generated ${allThumbnails.length} thumbnails`);
-            // Don't reset thumbnailGenerationStarted here - let it stay true to prevent restarts
-          })
-          .catch(error => {
-            console.error('✗ PageEditor: Web Worker thumbnail generation failed:', error);
-            setThumbnailGenerationStarted(false);
-          });
-
-      } catch (error) {
-        console.error('Failed to start Web Worker thumbnail generation:', error);
-        setThumbnailGenerationStarted(false);
       }
-    }, 0); // setTimeout with 0ms to defer to next tick
-  }, [mergedPdfDocument, activeFiles, thumbnailGenerationStarted, getThumbnailFromCache, addThumbnailToCache]);
-
-  // Start thumbnail generation after document loads
-  useEffect(() => {
-    console.log('🎬 PageEditor: Thumbnail generation effect triggered');
-    console.log('🎬 Conditions - mergedPdfDocument:', !!mergedPdfDocument, 'started:', thumbnailGenerationStarted);
-
-    if (mergedPdfDocument && !thumbnailGenerationStarted) {
-      // Check if ALL pages already have thumbnails from processed files
-      const totalPages = mergedPdfDocument.pages.length;
-      const pagesWithThumbnails = mergedPdfDocument.pages.filter(page => page.thumbnail).length;
-      const hasAllThumbnails = pagesWithThumbnails === totalPages;
-
-      console.log('🎬 PageEditor: Thumbnail status:', {
-        totalPages,
-        pagesWithThumbnails,
-        hasAllThumbnails,
-        missingThumbnails: totalPages - pagesWithThumbnails
-      });
-
-      if (hasAllThumbnails) {
-        console.log('🎬 PageEditor: Skipping generation - all thumbnails already exist');
-        return; // Skip generation if ALL thumbnails already exist
+      
+      if (pageNumbersToGenerate.length > 0) {
+        console.log(`📸 PageEditor: Generating initial batch for large doc: pages [${pageNumbersToGenerate.join(', ')}]`);
+        await generateThumbnailBatch(file, primaryFileId, pageNumbersToGenerate);
+      }
+      
+      // Schedule remaining thumbnails with delay to avoid blocking
+      setTimeout(() => {
+        generateRemainingThumbnailsLazily(file, primaryFileId, totalPages, 26);
+      }, 2000); // 2 second delay before starting background generation
+      
+      return;
+    }
+    
+    // For smaller documents, check which pages 2+ need thumbnails
+    const pageNumbersToGenerate = [];
+    for (let pageNum = 2; pageNum <= totalPages; pageNum++) {
+      const pageId = `${primaryFileId}-page-${pageNum}`;
+      if (!getThumbnailFromCache(pageId)) {
+        pageNumbersToGenerate.push(pageNum);
       }
-
-      console.log('🎬 PageEditor: Some thumbnails missing, proceeding with generation');
-      // Small delay to let document render, then start thumbnail generation
-      console.log('🎬 PageEditor: Scheduling thumbnail generation in 500ms');
-      const timer = setTimeout(startThumbnailGeneration, 500);
-      return () => clearTimeout(timer);
     }
-  }, [mergedPdfDocument, startThumbnailGeneration, thumbnailGenerationStarted]);
 
-  // Cleanup shared PDF instance when component unmounts (but preserve cache)
+    if (pageNumbersToGenerate.length === 0) {
+      console.log(`📸 PageEditor: All pages 2+ already cached, skipping generation`);
+      return;
+    }
+
+    console.log(`📸 PageEditor: Generating thumbnails for pages: [${pageNumbersToGenerate.slice(0, 5).join(', ')}${pageNumbersToGenerate.length > 5 ? '...' : ''}]`);
+    await generateThumbnailBatch(file, primaryFileId, pageNumbersToGenerate);
+  }, [mergedPdfDocument, primaryFileId, activeFileIds, selectors]);
+
+  // Helper function to generate thumbnails in batches
+  const generateThumbnailBatch = useCallback(async (file: File, fileId: string, pageNumbers: number[]) => {
+    try {
+      // Load PDF array buffer for Web Workers
+      const arrayBuffer = await file.arrayBuffer();
+
+      // Calculate quality scale based on file size
+      const scale = calculateScaleFromFileSize(selectors.getFileRecord(fileId)?.size || 0);
+
+      // Start parallel thumbnail generation WITHOUT blocking the main thread
+      await generateThumbnails(
+        fileId, // Add fileId as first parameter
+        arrayBuffer,
+        pageNumbers,
+        {
+          scale, // Dynamic quality based on file size
+          quality: 0.8,
+          batchSize: 15, // Smaller batches per worker for smoother UI
+          parallelBatches: 3 // Use 3 Web Workers in parallel
+        },
+        // Progress callback for thumbnail updates
+        (progress: { completed: number; total: number; thumbnails: Array<{ pageNumber: number; thumbnail: string }> }) => {
+          // Batch process thumbnails to reduce main thread work
+          requestAnimationFrame(() => {
+            progress.thumbnails.forEach(({ pageNumber, thumbnail }: { pageNumber: number; thumbnail: string }) => {
+              // Use stable fileId for cache key
+              const pageId = `${fileId}-page-${pageNumber}`;
+              addThumbnailToCache(pageId, thumbnail);
+
+              // Don't update context state - thumbnails stay in cache only
+              // This eliminates per-page context rerenders
+              // PageThumbnail will find thumbnails via cache polling
+            });
+          });
+        }
+      );
+
+      // Removed verbose logging - only log errors
+    } catch (error) {
+      console.error('PageEditor: Thumbnail generation failed:', error);
+    }
+  }, [generateThumbnails, addThumbnailToCache, selectors]);
+
+  // Background generation for remaining pages in very large documents
+  const generateRemainingThumbnailsLazily = useCallback(async (file: File, fileId: string, totalPages: number, startPage: number) => {
+    console.log(`📸 PageEditor: Starting background thumbnail generation from page ${startPage} to ${totalPages}`);
+    
+    // Generate in small chunks to avoid blocking
+    const CHUNK_SIZE = 50;
+    for (let start = startPage; start <= totalPages; start += CHUNK_SIZE) {
+      const end = Math.min(start + CHUNK_SIZE - 1, totalPages);
+      const chunkPageNumbers = [];
+      
+      for (let pageNum = start; pageNum <= end; pageNum++) {
+        const pageId = `${fileId}-page-${pageNum}`;
+        if (!getThumbnailFromCache(pageId)) {
+          chunkPageNumbers.push(pageNum);
+        }
+      }
+      
+      if (chunkPageNumbers.length > 0) {
+        // Background thumbnail generation in progress (removed verbose logging)
+        await generateThumbnailBatch(file, fileId, chunkPageNumbers);
+        
+        // Small delay between chunks to keep UI responsive
+        await new Promise(resolve => setTimeout(resolve, 500));
+      }
+    }
+    
+    console.log(`📸 PageEditor: Background thumbnail generation completed for ${totalPages} pages`);
+  }, [getThumbnailFromCache, generateThumbnailBatch]);
+
+  // Simple useEffect - just generate missing thumbnails when document is ready
+  useEffect(() => {
+    if (mergedPdfDocument && mergedPdfDocument.totalPages > 1) {
+      console.log(`📸 PageEditor: Document ready with ${mergedPdfDocument.totalPages} pages, checking for missing thumbnails`);
+      generateMissingThumbnails();
+    }
+  }, [mergedPdfDocument, generateMissingThumbnails]);
+
+  // Cleanup thumbnail generation when component unmounts
   useEffect(() => {
     return () => {
-      if (sharedPdfInstance) {
-        sharedPdfInstance.destroy();
-        setSharedPdfInstance(null);
+      // Stop all PDF.js background processing on unmount
+      if (stopGeneration) {
+        stopGeneration();
       }
-      setThumbnailGenerationStarted(false);
-      // DON'T stop generation on file changes - preserve cache for view switching
-      // stopGeneration();
+      if (destroyThumbnails) {
+        destroyThumbnails();
+      }
+      // Stop all processing services and destroy workers
+      enhancedPDFProcessingService.emergencyCleanup();
+      fileProcessingService.emergencyCleanup();
+      pdfProcessingService.clearAll();
+      // Final emergency cleanup of all workers
+      pdfWorkerManager.emergencyCleanup();
     };
-  }, [sharedPdfInstance]); // Only depend on PDF instance, not activeFiles
+  }, [stopGeneration, destroyThumbnails]);
 
-  // Clear selections when files change
+  // Clear selections when files change - use stable signature
   useEffect(() => {
-    setSelectedPages([]);
+    actions.setSelectedPages([]);
     setCsvInput("");
     setSelectionMode(false);
-  }, [activeFiles, setSelectedPages]);
+  }, [filesSignature, actions]);
 
   // Sync csvInput with selectedPageNumbers changes
   useEffect(() => {
@@ -359,64 +457,42 @@ const PageEditor = ({
     setCsvInput(newCsvInput);
   }, [selectedPageNumbers]);
 
-  useEffect(() => {
-    const handleGlobalDragEnd = () => {
-      // Clean up drag state when drag operation ends anywhere
-      setDraggedPage(null);
-      setDropTarget(null);
-      setMultiPageDrag(null);
-      setDragPosition(null);
-    };
-
-    const handleGlobalDrop = (e: DragEvent) => {
-      // Prevent default to handle invalid drops
-      e.preventDefault();
-    };
-
-    if (draggedPage) {
-      document.addEventListener('dragend', handleGlobalDragEnd);
-      document.addEventListener('drop', handleGlobalDrop);
-    }
-
-    return () => {
-      document.removeEventListener('dragend', handleGlobalDragEnd);
-      document.removeEventListener('drop', handleGlobalDrop);
-    };
-  }, [draggedPage]);
 
   const selectAll = useCallback(() => {
     if (mergedPdfDocument) {
-      setSelectedPages(mergedPdfDocument.pages.map(p => p.pageNumber));
+      actions.setSelectedPages(mergedPdfDocument.pages.map(p => p.pageNumber));
     }
-  }, [mergedPdfDocument, setSelectedPages]);
+  }, [mergedPdfDocument, actions]);
 
-  const deselectAll = useCallback(() => setSelectedPages([]), [setSelectedPages]);
+  const deselectAll = useCallback(() => actions.setSelectedPages([]), [actions]);
 
   const togglePage = useCallback((pageNumber: number) => {
     console.log('🔄 Toggling page', pageNumber);
 
+
     // Check if currently selected and update accordingly
     const isCurrentlySelected = selectedPageNumbers.includes(pageNumber);
 
+
     if (isCurrentlySelected) {
       // Remove from selection
       console.log('🔄 Removing page', pageNumber);
       const newSelectedPageNumbers = selectedPageNumbers.filter(num => num !== pageNumber);
-      setSelectedPages(newSelectedPageNumbers);
+      actions.setSelectedPages(newSelectedPageNumbers);
     } else {
       // Add to selection
       console.log('🔄 Adding page', pageNumber);
       const newSelectedPageNumbers = [...selectedPageNumbers, pageNumber];
-      setSelectedPages(newSelectedPageNumbers);
+      actions.setSelectedPages(newSelectedPageNumbers);
     }
-  }, [selectedPageNumbers, setSelectedPages]);
+  }, [selectedPageNumbers, actions]);
 
   const toggleSelectionMode = useCallback(() => {
     setSelectionMode(prev => {
       const newMode = !prev;
       if (!newMode) {
         // Clear selections when exiting selection mode
-        setSelectedPages([]);
+        actions.setSelectedPages([]);
         setCsvInput("");
       }
       return newMode;
@@ -432,14 +508,14 @@ const PageEditor = ({
     ranges.forEach(range => {
       if (range.includes('-')) {
         const [start, end] = range.split('-').map(n => parseInt(n.trim()));
-        for (let i = start; i <= end && i <= mergedPdfDocument.totalPages; i++) {
+        for (let i = start; i <= end && i <= mergedPdfDocument.pages.length; i++) {
           if (i > 0) {
             pageNumbers.push(i);
           }
         }
       } else {
         const pageNum = parseInt(range);
-        if (pageNum > 0 && pageNum <= mergedPdfDocument.totalPages) {
+        if (pageNum > 0 && pageNum <= mergedPdfDocument.pages.length) {
           pageNumbers.push(pageNum);
         }
       }
@@ -450,144 +526,115 @@ const PageEditor = ({
 
   const updatePagesFromCSV = useCallback(() => {
     const pageNumbers = parseCSVInput(csvInput);
-    setSelectedPages(pageNumbers);
-  }, [csvInput, parseCSVInput, setSelectedPages]);
+    actions.setSelectedPages(pageNumbers);
+  }, [csvInput, parseCSVInput, actions]);
 
-  const handleDragStart = useCallback((pageNumber: number) => {
-    setDraggedPage(pageNumber);
 
-    // Check if this is a multi-page drag in selection mode
-    if (selectionMode && selectedPageNumbers.includes(pageNumber) && selectedPageNumbers.length > 1) {
-      setMultiPageDrag({
-        pageNumbers: selectedPageNumbers,
-        count: selectedPageNumbers.length
-      });
-    } else {
-      setMultiPageDrag(null);
-    }
-  }, [selectionMode, selectedPageNumbers]);
 
-  const handleDragEnd = useCallback(() => {
-    // Clean up drag state regardless of where the drop happened
-    setDraggedPage(null);
-    setDropTarget(null);
-    setMultiPageDrag(null);
-    setDragPosition(null);
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-
-    if (!draggedPage) return;
-
-    // Update drag position for multi-page indicator
-    if (multiPageDrag) {
-      setDragPosition({ x: e.clientX, y: e.clientY });
-    }
-
-    // Get the element under the mouse cursor
-    const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
-    if (!elementUnderCursor) return;
-
-    // Find the closest page container
-    const pageContainer = elementUnderCursor.closest('[data-page-number]');
-    if (pageContainer) {
-      const pageNumberStr = pageContainer.getAttribute('data-page-number');
-      const pageNumber = pageNumberStr ? parseInt(pageNumberStr) : null;
-      if (pageNumber && pageNumber !== draggedPage) {
-        setDropTarget(pageNumber);
-        return;
-      }
-    }
-
-    // Check if over the end zone
-    const endZone = elementUnderCursor.closest('[data-drop-zone="end"]');
-    if (endZone) {
-      setDropTarget('end');
-      return;
-    }
-
-    // If not over any valid drop target, clear it
-    setDropTarget(null);
-  }, [draggedPage, multiPageDrag]);
-
-  const handleDragEnter = useCallback((pageNumber: number) => {
-    if (draggedPage && pageNumber !== draggedPage) {
-      setDropTarget(pageNumber);
-    }
-  }, [draggedPage]);
-
-  const handleDragLeave = useCallback(() => {
-    // Don't clear drop target on drag leave - let dragover handle it
-  }, []);
 
   // Update PDF document state with edit tracking
   const setPdfDocument = useCallback((updatedDoc: PDFDocument) => {
     console.log('setPdfDocument called - setting edited state');
 
+
     // Update local edit state for immediate visual feedback
     setEditedDocument(updatedDoc);
-    setHasUnsavedChanges(true); // Use global state
+    actions.setHasUnsavedChanges(true); // Use actions from context
     setHasUnsavedDraft(true); // Mark that we have unsaved draft changes
 
+
     // Auto-save to drafts (debounced) - only if we have new changes
+    
+    // Enhanced auto-save to drafts with proper error handling
     if (autoSaveTimer.current) {
       clearTimeout(autoSaveTimer.current);
     }
 
-    autoSaveTimer.current = setTimeout(() => {
+    autoSaveTimer.current = window.setTimeout(async () => {
       if (hasUnsavedDraft) {
-        saveDraftToIndexedDB(updatedDoc);
-        setHasUnsavedDraft(false); // Mark draft as saved
+        try {
+          await saveDraftToIndexedDB(updatedDoc);
+          setHasUnsavedDraft(false); // Mark draft as saved
+          console.log('Auto-save completed successfully');
+        } catch (error) {
+          console.warn('Auto-save failed, will retry on next change:', error);
+          // Don't set hasUnsavedDraft to false so it will retry
+        }
       }
     }, 30000); // Auto-save after 30 seconds of inactivity
 
+
     return updatedDoc;
-  }, [setHasUnsavedChanges, hasUnsavedDraft]);
+  }, [actions, hasUnsavedDraft]);
 
-  // Save draft to separate IndexedDB location
+  // Enhanced draft save using centralized IndexedDB manager
   const saveDraftToIndexedDB = useCallback(async (doc: PDFDocument) => {
+    const draftKey = `draft-${doc.id || 'merged'}`;
+    
     try {
-      const draftKey = `draft-${doc.id || 'merged'}`;
+      // Export the current document state as PDF bytes
+      const exportedFile = await pdfExportService.exportPDF(doc, []);
+      const pdfBytes = 'blob' in exportedFile ? await exportedFile.blob.arrayBuffer() : await exportedFile.blobs[0].arrayBuffer();
+      const originalFileNames = activeFileIds.map(id => selectors.getFileRecord(id)?.name).filter(Boolean);
+      
+      // Generate thumbnail for the draft
+      let thumbnail: string | undefined;
+      try {
+        const { generateThumbnailForFile } = await import('../../utils/thumbnailUtils');
+        const blob = 'blob' in exportedFile ? exportedFile.blob : exportedFile.blobs[0];
+        const filename = 'filename' in exportedFile ? exportedFile.filename : exportedFile.filenames[0];
+        const file = new File([blob], filename, { type: 'application/pdf' });
+        thumbnail = await generateThumbnailForFile(file);
+      } catch (error) {
+        console.warn('Failed to generate thumbnail for draft:', error);
+      }
+      
       const draftData = {
-        document: doc,
+        id: draftKey,
+        name: `Draft - ${originalFileNames.join(', ') || 'Untitled'}`,
+        pdfData: pdfBytes,
+        size: pdfBytes.byteLength,
         timestamp: Date.now(),
-        originalFiles: activeFiles.map(f => f.name)
+        thumbnail,
+        originalFiles: originalFileNames
       };
 
-      // Save to 'pdf-drafts' store in IndexedDB
-      const request = indexedDB.open('stirling-pdf-drafts', 1);
-      request.onupgradeneeded = () => {
-        const db = request.result;
-        if (!db.objectStoreNames.contains('drafts')) {
-          db.createObjectStore('drafts');
-        }
-      };
-
-      request.onsuccess = () => {
-        const db = request.result;
-        const transaction = db.transaction('drafts', 'readwrite');
-        const store = transaction.objectStore('drafts');
-        store.put(draftData, draftKey);
+      // Use centralized IndexedDB manager  
+      const db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.DRAFTS);
+      const transaction = db.transaction('drafts', 'readwrite');
+      const store = transaction.objectStore('drafts');
+      
+      const putRequest = store.put(draftData, draftKey);
+      putRequest.onsuccess = () => {
         console.log('Draft auto-saved to IndexedDB');
       };
+      putRequest.onerror = () => {
+        console.warn('Failed to put draft data:', putRequest.error);
+      };
+      
     } catch (error) {
       console.warn('Failed to auto-save draft:', error);
     }
-  }, [activeFiles]);
+  }, [activeFileIds, selectors]);
 
-  // Clean up draft from IndexedDB
+  // Enhanced draft cleanup using centralized IndexedDB manager
   const cleanupDraft = useCallback(async () => {
+    const draftKey = `draft-${mergedPdfDocument?.id || 'merged'}`;
+    
     try {
-      const draftKey = `draft-${mergedPdfDocument?.id || 'merged'}`;
-      const request = indexedDB.open('stirling-pdf-drafts', 1);
-
-      request.onsuccess = () => {
-        const db = request.result;
-        const transaction = db.transaction('drafts', 'readwrite');
-        const store = transaction.objectStore('drafts');
-        store.delete(draftKey);
+      // Use centralized IndexedDB manager
+      const db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.DRAFTS);
+      const transaction = db.transaction('drafts', 'readwrite');
+      const store = transaction.objectStore('drafts');
+      
+      const deleteRequest = store.delete(draftKey);
+      deleteRequest.onsuccess = () => {
+        console.log('Draft cleaned up successfully');
       };
+      deleteRequest.onerror = () => {
+        console.warn('Failed to delete draft:', deleteRequest.error);
+      };
+      
     } catch (error) {
       console.warn('Failed to cleanup draft:', error);
     }
@@ -597,45 +644,30 @@ const PageEditor = ({
   const applyChanges = useCallback(async () => {
     if (!editedDocument || !mergedPdfDocument) return;
 
+
     try {
-      if (activeFiles.length === 1) {
-        const file = activeFiles[0];
-        const currentProcessedFile = processedFiles.get(file);
-
-        if (currentProcessedFile) {
-          const updatedProcessedFile = {
-            ...currentProcessedFile,
-            id: `${currentProcessedFile.id}-edited-${Date.now()}`,
-            pages: editedDocument.pages.map(page => ({
-              ...page,
-              rotation: page.rotation || 0,
-              splitBefore: page.splitBefore || false
-            })),
-            totalPages: editedDocument.pages.length,
-            lastModified: Date.now()
-          };
-
-          updateProcessedFile(file, updatedProcessedFile);
-        }
-      } else if (activeFiles.length > 1) {
+      if (activeFileIds.length === 1 && primaryFileId) {
+        const file = selectors.getFile(primaryFileId);
+        if (!file) return;
+        
+        // Apply changes simplified - no complex dispatch loops
+        setStatus('Changes applied successfully');
+      } else if (activeFileIds.length > 1) {
         setStatus('Apply changes for multiple files not yet supported');
         return;
       }
 
-      // Wait for the processed file update to complete before clearing edit state
-      setTimeout(() => {
-        setEditedDocument(null);
-        setHasUnsavedChanges(false);
-        setHasUnsavedDraft(false);
-        cleanupDraft();
-        setStatus('Changes applied successfully');
-      }, 100);
+      // Clear edit state immediately
+      setEditedDocument(null);
+      actions.setHasUnsavedChanges(false);
+      setHasUnsavedDraft(false);
+      cleanupDraft();
 
     } catch (error) {
       console.error('Failed to apply changes:', error);
       setStatus('Failed to apply changes');
     }
-  }, [editedDocument, mergedPdfDocument, processedFiles, activeFiles, updateProcessedFile, setHasUnsavedChanges, setStatus, cleanupDraft]);
+  }, [editedDocument, mergedPdfDocument, activeFileIds, primaryFileId, selectors, actions, cleanupDraft]);
 
   const animateReorder = useCallback((pageNumber: number, targetIndex: number) => {
     if (!displayDocument || isAnimating) return;
@@ -654,6 +686,7 @@ const PageEditor = ({
     // Skip animation for large documents (500+ pages) to improve performance
     const isLargeDocument = displayDocument.pages.length > 500;
 
+
     if (isLargeDocument) {
       // For large documents, just execute the command without animation
       if (pagesToMove.length > 1) {
@@ -679,6 +712,7 @@ const PageEditor = ({
     // Only capture positions for potentially affected pages
     const currentPositions = new Map<string, { x: number; y: number }>();
 
+
     affectedPageIds.forEach(pageId => {
       const element = document.querySelector(`[data-page-number="${pageId}"]`);
       if (element) {
@@ -729,13 +763,16 @@ const PageEditor = ({
               if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
                 elementsToAnimate.push(element);
 
+
                 // Apply initial transform
                 element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
                 element.style.transition = 'none';
 
+
                 // Force reflow
                 element.offsetHeight;
 
+
                 // Animate to final position
                 element.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
                 element.style.transform = 'translate(0px, 0px)';
@@ -756,34 +793,22 @@ const PageEditor = ({
     }, 10); // Small delay to allow state update
   }, [displayDocument, isAnimating, executeCommand, selectionMode, selectedPageNumbers, setPdfDocument]);
 
-  const handleDrop = useCallback((e: React.DragEvent, targetPageNumber: number | 'end') => {
-    e.preventDefault();
-    if (!draggedPage || !displayDocument || draggedPage === targetPageNumber) return;
+  const handleReorderPages = useCallback((sourcePageNumber: number, targetIndex: number, selectedPages?: number[]) => {
+    if (!displayDocument) return;
 
-    let targetIndex: number;
-    if (targetPageNumber === 'end') {
-      targetIndex = displayDocument.pages.length;
-    } else {
-      targetIndex = displayDocument.pages.findIndex(p => p.pageNumber === targetPageNumber);
-      if (targetIndex === -1) return;
-    }
+    const pagesToMove = selectedPages && selectedPages.length > 1 
+      ? selectedPages 
+      : [sourcePageNumber];
+    
+    const sourceIndex = displayDocument.pages.findIndex(p => p.pageNumber === sourcePageNumber);
+    if (sourceIndex === -1 || sourceIndex === targetIndex) return;
 
-    animateReorder(draggedPage, targetIndex);
-
-    setDraggedPage(null);
-    setDropTarget(null);
-    setMultiPageDrag(null);
-    setDragPosition(null);
-
-    const moveCount = multiPageDrag ? multiPageDrag.count : 1;
+    animateReorder(sourcePageNumber, targetIndex);
+    
+    const moveCount = pagesToMove.length;
     setStatus(`${moveCount > 1 ? `${moveCount} pages` : 'Page'} reordered`);
-  }, [draggedPage, displayDocument, animateReorder, multiPageDrag]);
+  }, [displayDocument, animateReorder]);
 
-  const handleEndZoneDragEnter = useCallback(() => {
-    if (draggedPage) {
-      setDropTarget('end');
-    }
-  }, [draggedPage]);
 
   const handleRotate = useCallback((direction: 'left' | 'right') => {
     if (!displayDocument) return;
@@ -830,11 +855,11 @@ const PageEditor = ({
 
     executeCommand(command);
     if (selectionMode) {
-      setSelectedPages([]);
+      actions.setSelectedPages([]);
     }
     const pageCount = selectionMode ? selectedPageNumbers.length : displayDocument.pages.length;
     setStatus(`Deleted ${pageCount} pages`);
-  }, [displayDocument, selectedPageNumbers, selectionMode, executeCommand, setPdfDocument, setSelectedPages]);
+  }, [displayDocument, selectedPageNumbers, selectionMode, executeCommand, setPdfDocument, actions]);
 
   const handleSplit = useCallback(() => {
     if (!displayDocument) return;
@@ -870,6 +895,7 @@ const PageEditor = ({
         }).filter(id => id)
       : [];
 
+
     const preview = pdfExportService.getExportInfo(mergedPdfDocument, exportPageIds, selectedOnly);
     setExportPreview(preview);
     setShowExportModal(true);
@@ -888,6 +914,7 @@ const PageEditor = ({
           }).filter(id => id)
         : [];
 
+
       const errors = pdfExportService.validateExport(mergedPdfDocument, exportPageIds, selectedOnly);
       if (errors.length > 0) {
         setStatus(errors.join(', '));
@@ -922,6 +949,7 @@ const PageEditor = ({
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Export failed';
       setStatus(errorMessage);
+      setStatus(errorMessage);
     } finally {
       setExportLoading(false);
     }
@@ -940,58 +968,80 @@ const PageEditor = ({
   }, [redo]);
 
   const closePdf = useCallback(() => {
-    // Use global navigation guard system
-    fileContext.requestNavigation(() => {
-      clearAllFiles(); // This now handles all cleanup centrally (including merged docs)
-      setSelectedPages([]);
-    });
-  }, [fileContext, clearAllFiles, setSelectedPages]);
+    // Stop all PDF.js background processing immediately
+    if (stopGeneration) {
+      stopGeneration();
+    }
+    if (destroyThumbnails) {
+      destroyThumbnails();
+    }
+    // Stop enhanced PDF processing and destroy workers
+    enhancedPDFProcessingService.emergencyCleanup();
+    // Stop file processing service and destroy workers
+    fileProcessingService.emergencyCleanup();
+    // Stop PDF processing service
+    pdfProcessingService.clearAll();
+    // Emergency cleanup - destroy all PDF workers
+    pdfWorkerManager.emergencyCleanup();
+    
+    // Clear files from memory only (preserves files in storage/recent files)
+    const allFileIds = selectors.getAllFileIds();
+    actions.removeFiles(allFileIds, false); // false = don't delete from storage
+    actions.setSelectedPages([]);
+  }, [actions, selectors, stopGeneration, destroyThumbnails]);
 
   // PageEditorControls needs onExportSelected and onExportAll
   const onExportSelected = useCallback(() => showExportPreview(true), [showExportPreview]);
   const onExportAll = useCallback(() => showExportPreview(false), [showExportPreview]);
 
-  // Expose functions to parent component for PageEditorControls
+  /**
+   * Stable function proxy pattern to prevent infinite loops.
+   * 
+   * Problem: If we include selectedPages in useEffect dependencies, every page selection
+   * change triggers onFunctionsReady → parent re-renders → PageEditor unmounts/remounts → infinite loop
+   * 
+   * Solution: Create a stable proxy object that uses getters to access current values
+   * without triggering parent re-renders when values change.
+   */
+  const pageEditorFunctionsRef = useRef({
+    handleUndo, handleRedo, canUndo, canRedo, handleRotate, handleDelete, handleSplit,
+    showExportPreview, onExportSelected, onExportAll, exportLoading, selectionMode,
+    selectedPages: selectedPageNumbers, closePdf,
+  });
+
+  // Update ref with current values (no parent notification)
+  pageEditorFunctionsRef.current = {
+    handleUndo, handleRedo, canUndo, canRedo, handleRotate, handleDelete, handleSplit,
+    showExportPreview, onExportSelected, onExportAll, exportLoading, selectionMode,
+    selectedPages: selectedPageNumbers, closePdf,
+  };
+
+  // Only call onFunctionsReady once - use stable proxy for live updates
   useEffect(() => {
     if (onFunctionsReady) {
-      onFunctionsReady({
-        handleUndo,
-        handleRedo,
-        canUndo,
-        canRedo,
-        handleRotate,
-        handleDelete,
-        handleSplit,
-        showExportPreview,
-        onExportSelected,
-        onExportAll,
-        exportLoading,
-        selectionMode,
-        selectedPages: selectedPageNumbers,
-        closePdf,
-      });
+      const stableFunctions = {
+        get handleUndo() { return pageEditorFunctionsRef.current.handleUndo; },
+        get handleRedo() { return pageEditorFunctionsRef.current.handleRedo; },
+        get canUndo() { return pageEditorFunctionsRef.current.canUndo; },
+        get canRedo() { return pageEditorFunctionsRef.current.canRedo; },
+        get handleRotate() { return pageEditorFunctionsRef.current.handleRotate; },
+        get handleDelete() { return pageEditorFunctionsRef.current.handleDelete; },
+        get handleSplit() { return pageEditorFunctionsRef.current.handleSplit; },
+        get showExportPreview() { return pageEditorFunctionsRef.current.showExportPreview; },
+        get onExportSelected() { return pageEditorFunctionsRef.current.onExportSelected; },
+        get onExportAll() { return pageEditorFunctionsRef.current.onExportAll; },
+        get exportLoading() { return pageEditorFunctionsRef.current.exportLoading; },
+        get selectionMode() { return pageEditorFunctionsRef.current.selectionMode; },
+        get selectedPages() { return pageEditorFunctionsRef.current.selectedPages; },
+        get closePdf() { return pageEditorFunctionsRef.current.closePdf; },
+      };
+      onFunctionsReady(stableFunctions);
     }
-  }, [
-    onFunctionsReady,
-    handleUndo,
-    handleRedo,
-    canUndo,
-    canRedo,
-    handleRotate,
-    handleDelete,
-    handleSplit,
-    showExportPreview,
-    onExportSelected,
-    onExportAll,
-    exportLoading,
-    selectionMode,
-    selectedPageNumbers,
-    closePdf
-  ]);
+  }, [onFunctionsReady]);
 
   // Show loading or empty state instead of blocking
-  const showLoading = !mergedPdfDocument && (globalProcessing || activeFiles.length > 0);
-  const showEmpty = !mergedPdfDocument && !globalProcessing && activeFiles.length === 0;
+  const showLoading = !mergedPdfDocument && (globalProcessing || activeFileIds.length > 0);
+  const showEmpty = !mergedPdfDocument && !globalProcessing && activeFileIds.length === 0;
   // Functions for global NavigationWarningModal
   const handleApplyAndContinue = useCallback(async () => {
     if (editedDocument) {
@@ -1006,38 +1056,47 @@ const PageEditor = ({
     }
   }, [editedDocument, applyChanges, handleExport]);
 
-  // Check for existing drafts
+  // Enhanced draft checking using centralized IndexedDB manager
   const checkForDrafts = useCallback(async () => {
     if (!mergedPdfDocument) return;
 
+
     try {
       const draftKey = `draft-${mergedPdfDocument.id || 'merged'}`;
-      const request = indexedDB.open('stirling-pdf-drafts', 1);
+      // Use centralized IndexedDB manager
+      const db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.DRAFTS);
+      
+      // Check if the drafts object store exists before using it
+      if (!db.objectStoreNames.contains('drafts')) {
+        console.log('📝 Drafts object store not found, skipping draft check');
+        return;
+      }
+      
+      const transaction = db.transaction('drafts', 'readonly');
+      const store = transaction.objectStore('drafts');
+      const getRequest = store.get(draftKey);
 
-      request.onsuccess = () => {
-        const db = request.result;
-        if (!db.objectStoreNames.contains('drafts')) return;
+      getRequest.onsuccess = () => {
+        const draft = getRequest.result;
+        if (draft && draft.timestamp) {
+          // Check if draft is recent (within last 24 hours)
+          const draftAge = Date.now() - draft.timestamp;
+          const twentyFourHours = 24 * 60 * 60 * 1000;
 
-        const transaction = db.transaction('drafts', 'readonly');
-        const store = transaction.objectStore('drafts');
-        const getRequest = store.get(draftKey);
-
-        getRequest.onsuccess = () => {
-          const draft = getRequest.result;
-          if (draft && draft.timestamp) {
-            // Check if draft is recent (within last 24 hours)
-            const draftAge = Date.now() - draft.timestamp;
-            const twentyFourHours = 24 * 60 * 60 * 1000;
-
-            if (draftAge < twentyFourHours) {
-              setFoundDraft(draft);
-              setShowResumeModal(true);
-            }
+          if (draftAge < twentyFourHours) {
+            setFoundDraft(draft);
+            setShowResumeModal(true);
           }
-        };
+        }
       };
+      
+      getRequest.onerror = () => {
+        console.warn('Failed to get draft:', getRequest.error);
+      };
+      
     } catch (error) {
-      console.warn('Failed to check for drafts:', error);
+      console.warn('Draft check failed:', error);
+      // Don't throw - draft checking failure shouldn't break the app
     }
   }, [mergedPdfDocument]);
 
@@ -1045,12 +1104,12 @@ const PageEditor = ({
   const resumeWork = useCallback(() => {
     if (foundDraft && foundDraft.document) {
       setEditedDocument(foundDraft.document);
-      setHasUnsavedChanges(true);
+      actions.setHasUnsavedChanges(true); // Use context action
       setFoundDraft(null);
       setShowResumeModal(false);
       setStatus('Resumed previous work');
     }
-  }, [foundDraft]);
+  }, [foundDraft, actions]);
 
   // Start fresh (ignore draft)
   const startFresh = useCallback(() => {
@@ -1065,17 +1124,15 @@ const PageEditor = ({
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      console.log('PageEditor unmounting - cleaning up resources');
 
       // Clear auto-save timer
       if (autoSaveTimer.current) {
         clearTimeout(autoSaveTimer.current);
       }
 
-      // Clean up draft if component unmounts with unsaved changes
-      if (hasUnsavedChanges) {
-        cleanupDraft();
-      }
+
+      // Note: We intentionally do NOT clean up drafts on unmount
+      // Drafts should persist when navigating away so users can resume later
     };
   }, [hasUnsavedChanges, cleanupDraft]);
 
@@ -1109,7 +1166,7 @@ const PageEditor = ({
   const displayedPages = displayDocument?.pages || [];
 
   return (
-    <Box pos="relative" h="100vh" style={{ overflow: 'auto' }}>
+    <Box pos="relative" h="100vh" style={{ overflow: 'auto' }} data-scrolling-container="true">
       <LoadingOverlay visible={globalProcessing && !mergedPdfDocument} />
 
       {showEmpty && (
@@ -1123,9 +1180,10 @@ const PageEditor = ({
       )}
 
       {showLoading && (
-        <Box p="md" pt="xl">
+        <Box p={0}>
           <SkeletonLoader type="controls" />
 
+
           {/* Progress indicator */}
           <Box mb="md" p="sm" style={{ backgroundColor: 'var(--mantine-color-blue-0)', borderRadius: 8 }}>
             <Group justify="space-between" mb="xs">
@@ -1152,12 +1210,13 @@ const PageEditor = ({
             </div>
           </Box>
 
+
           <SkeletonLoader type="pageGrid" count={8} />
         </Box>
       )}
 
       {displayDocument && (
-        <Box p="md" pt="xl">
+        <Box p={0}>
           {/* Enhanced Processing Status */}
           {globalProcessing && processingProgress < 100 && (
             <Box mb="md" p="sm" style={{ backgroundColor: 'var(--mantine-color-blue-0)', borderRadius: 8 }}>
@@ -1211,6 +1270,7 @@ const PageEditor = ({
               </>
             )}
 
+
             {/* Apply Changes Button */}
             {hasUnsavedChanges && (
               <Button
@@ -1234,41 +1294,25 @@ const PageEditor = ({
           )}
 
 
+
         <DragDropGrid
           items={displayedPages}
           selectedItems={selectedPageNumbers}
           selectionMode={selectionMode}
           isAnimating={isAnimating}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-          onDragOver={handleDragOver}
-          onDragEnter={handleDragEnter}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onEndZoneDragEnter={handleEndZoneDragEnter}
-          draggedItem={draggedPage}
-          dropTarget={dropTarget}
-          multiItemDrag={multiPageDrag}
-          dragPosition={dragPosition}
+          onReorderPages={handleReorderPages}
           renderItem={(page, index, refs) => (
             <PageThumbnail
               page={page}
               index={index}
               totalPages={displayDocument.pages.length}
-              originalFile={activeFiles.length === 1 ? activeFiles[0] : undefined}
+              originalFile={activeFileIds.length === 1 && primaryFileId ? selectors.getFile(primaryFileId) : undefined}
               selectedPages={selectedPageNumbers}
               selectionMode={selectionMode}
-              draggedPage={draggedPage}
-              dropTarget={dropTarget === 'end' ? null : dropTarget}
               movingPage={movingPage}
               isAnimating={isAnimating}
               pageRefs={refs}
-              onDragStart={handleDragStart}
-              onDragEnd={handleDragEnd}
-              onDragOver={handleDragOver}
-              onDragEnter={handleDragEnter}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
+              onReorderPages={handleReorderPages}
               onTogglePage={togglePage}
               onAnimateReorder={animateReorder}
               onExecuteCommand={executeCommand}
@@ -1342,7 +1386,7 @@ const PageEditor = ({
                   loading={exportLoading}
                   onClick={() => {
                     setShowExportModal(false);
-                    const selectedOnly = exportPreview.pageCount < (mergedPdfDocument?.totalPages || 0);
+                    const selectedOnly = exportPreview.pageCount < (mergedPdfDocument?.pages.length || 0);
                     handleExport(selectedOnly);
                   }}
                 >
@@ -1373,12 +1417,14 @@ const PageEditor = ({
               We found unsaved changes from a previous session. Would you like to resume where you left off?
             </Text>
 
+
             {foundDraft && (
               <Text size="sm" c="dimmed">
                 Last saved: {new Date(foundDraft.timestamp).toLocaleString()}
               </Text>
             )}
 
+
             <Group justify="flex-end" gap="sm">
               <Button
                 variant="light"
@@ -1388,6 +1434,7 @@ const PageEditor = ({
                 Start Fresh
               </Button>
 
+
               <Button
                 color="blue"
                 onClick={resumeWork}
@@ -1408,6 +1455,17 @@ const PageEditor = ({
           {status}
         </Notification>
       )}
+      
+      {error && (
+        <Notification
+          color="red"
+          mt="md"
+          onClose={() => setError(null)}
+          style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 1000 }}
+        >
+          {error}
+        </Notification>
+      )}
     </Box>
   );
 };
diff --git a/frontend/src/components/pageEditor/PageThumbnail.tsx b/frontend/src/components/pageEditor/PageThumbnail.tsx
index 15c6bbe37..f1590978a 100644
--- a/frontend/src/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/components/pageEditor/PageThumbnail.tsx
@@ -6,20 +6,13 @@ import RotateLeftIcon from '@mui/icons-material/RotateLeft';
 import RotateRightIcon from '@mui/icons-material/RotateRight';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCutIcon from '@mui/icons-material/ContentCut';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { PDFPage, PDFDocument } from '../../types/pageEditor';
 import { RotatePagesCommand, DeletePagesCommand, ToggleSplitCommand } from '../../commands/pageCommands';
 import { Command } from '../../hooks/useUndoRedo';
+import { useFileState } from '../../contexts/FileContext';
+import { useThumbnailGeneration } from '../../hooks/useThumbnailGeneration';
 import styles from './PageEditor.module.css';
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
-
-// Ensure PDF.js worker is available
-if (!GlobalWorkerOptions.workerSrc) {
-  GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
-  console.log('📸 PageThumbnail: Set PDF.js worker source to /pdf.worker.js');
-} else {
-  console.log('📸 PageThumbnail: PDF.js worker source already set to', GlobalWorkerOptions.workerSrc);
-}
 
 interface PageThumbnailProps {
   page: PDFPage;
@@ -28,22 +21,15 @@ interface PageThumbnailProps {
   originalFile?: File; // For lazy thumbnail generation
   selectedPages: number[];
   selectionMode: boolean;
-  draggedPage: number | null;
-  dropTarget: number | 'end' | null;
   movingPage: number | null;
   isAnimating: boolean;
   pageRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
-  onDragStart: (pageNumber: number) => void;
-  onDragEnd: () => void;
-  onDragOver: (e: React.DragEvent) => void;
-  onDragEnter: (pageNumber: number) => void;
-  onDragLeave: () => void;
-  onDrop: (e: React.DragEvent, pageNumber: number) => void;
   onTogglePage: (pageNumber: number) => void;
   onAnimateReorder: (pageNumber: number, targetIndex: number) => void;
   onExecuteCommand: (command: Command) => void;
   onSetStatus: (status: string) => void;
   onSetMovingPage: (pageNumber: number | null) => void;
+  onReorderPages: (sourcePageNumber: number, targetIndex: number, selectedPages?: number[]) => void;
   RotatePagesCommand: typeof RotatePagesCommand;
   DeletePagesCommand: typeof DeletePagesCommand;
   ToggleSplitCommand: typeof ToggleSplitCommand;
@@ -58,22 +44,15 @@ const PageThumbnail = React.memo(({
   originalFile,
   selectedPages,
   selectionMode,
-  draggedPage,
-  dropTarget,
   movingPage,
   isAnimating,
   pageRefs,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragEnter,
-  onDragLeave,
-  onDrop,
   onTogglePage,
   onAnimateReorder,
   onExecuteCommand,
   onSetStatus,
   onSetMovingPage,
+  onReorderPages,
   RotatePagesCommand,
   DeletePagesCommand,
   ToggleSplitCommand,
@@ -81,51 +60,122 @@ const PageThumbnail = React.memo(({
   setPdfDocument,
 }: PageThumbnailProps) => {
   const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(page.thumbnail);
-  const [isLoadingThumbnail, setIsLoadingThumbnail] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragElementRef = useRef<HTMLDivElement>(null);
+  const { state, selectors } = useFileState();
+  const { getThumbnailFromCache, requestThumbnail } = useThumbnailGeneration();
 
-  // Update thumbnail URL when page prop changes
+  // Update thumbnail URL when page prop changes - prevent redundant updates
   useEffect(() => {
     if (page.thumbnail && page.thumbnail !== thumbnailUrl) {
       console.log(`📸 PageThumbnail: Updating thumbnail URL for page ${page.pageNumber}`, page.thumbnail.substring(0, 50) + '...');
       setThumbnailUrl(page.thumbnail);
     }
-  }, [page.thumbnail, page.pageNumber, page.id, thumbnailUrl]);
+  }, [page.thumbnail, page.id]); // Remove thumbnailUrl dependency to prevent redundant cycles
 
-  // Listen for ready thumbnails from Web Workers (only if no existing thumbnail)
+  // Request thumbnail generation if not available (optimized for performance)
   useEffect(() => {
-    if (thumbnailUrl) {
-      console.log(`📸 PageThumbnail: Page ${page.pageNumber} already has thumbnail, skipping worker listener`);
-      return; // Skip if we already have a thumbnail
+    if (thumbnailUrl || !originalFile) {
+      return; // Skip if we already have a thumbnail or no original file
     }
 
-    console.log(`📸 PageThumbnail: Setting up worker listener for page ${page.pageNumber} (${page.id})`);
+    // Check cache first without async call
+    const cachedThumbnail = getThumbnailFromCache(page.id);
+    if (cachedThumbnail) {
+      setThumbnailUrl(cachedThumbnail);
+      return;
+    }
 
-    const handleThumbnailReady = (event: CustomEvent) => {
-      const { pageNumber, thumbnail, pageId } = event.detail;
-      console.log(`📸 PageThumbnail: Received worker thumbnail for page ${pageNumber}, looking for page ${page.pageNumber} (${page.id})`);
+    let cancelled = false;
 
-      if (pageNumber === page.pageNumber && pageId === page.id) {
-        console.log(`✓ PageThumbnail: Thumbnail matched for page ${page.pageNumber}, setting URL`);
-        setThumbnailUrl(thumbnail);
+    const loadThumbnail = async () => {
+      try {
+        const thumbnail = await requestThumbnail(page.id, originalFile, page.pageNumber);
+        
+        // Only update if component is still mounted and we got a result
+        if (!cancelled && thumbnail) {
+          setThumbnailUrl(thumbnail);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.warn(`📸 PageThumbnail: Failed to load thumbnail for page ${page.pageNumber}:`, error);
+        }
       }
     };
 
-    window.addEventListener('thumbnailReady', handleThumbnailReady as EventListener);
+    loadThumbnail();
+
+    // Cleanup function to prevent state updates after unmount
     return () => {
-      console.log(`📸 PageThumbnail: Cleaning up worker listener for page ${page.pageNumber}`);
-      window.removeEventListener('thumbnailReady', handleThumbnailReady as EventListener);
+      cancelled = true;
     };
-  }, [page.pageNumber, page.id, thumbnailUrl]);
+  }, [page.id, originalFile, requestThumbnail, getThumbnailFromCache]); // Removed thumbnailUrl to prevent loops
 
 
-  // Register this component with pageRefs for animations
   const pageElementRef = useCallback((element: HTMLDivElement | null) => {
     if (element) {
       pageRefs.current.set(page.id, element);
+      dragElementRef.current = element;
+      
+      const dragCleanup = draggable({
+        element,
+        getInitialData: () => ({
+          pageNumber: page.pageNumber,
+          pageId: page.id,
+          selectedPages: selectionMode && selectedPages.includes(page.pageNumber) 
+            ? selectedPages 
+            : [page.pageNumber]
+        }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: ({ location }) => {
+          setIsDragging(false);
+          
+          if (location.current.dropTargets.length === 0) {
+            return;
+          }
+          
+          const dropTarget = location.current.dropTargets[0];
+          const targetData = dropTarget.data;
+          
+          if (targetData.type === 'page') {
+            const targetPageNumber = targetData.pageNumber as number;
+            const targetIndex = pdfDocument.pages.findIndex(p => p.pageNumber === targetPageNumber);
+            if (targetIndex !== -1) {
+              const pagesToMove = selectionMode && selectedPages.includes(page.pageNumber)
+                ? selectedPages
+                : undefined;
+              onReorderPages(page.pageNumber, targetIndex, pagesToMove);
+            }
+          }
+        }
+      });
+
+      element.style.cursor = 'grab';
+      
+      
+      const dropCleanup = dropTargetForElements({
+        element,
+        getData: () => ({
+          type: 'page',
+          pageNumber: page.pageNumber
+        }),
+        onDrop: ({ source }) => {}
+      });
+      
+      (element as any).__dragCleanup = () => {
+        dragCleanup();
+        dropCleanup();
+      };
     } else {
       pageRefs.current.delete(page.id);
+      if (dragElementRef.current && (dragElementRef.current as any).__dragCleanup) {
+        (dragElementRef.current as any).__dragCleanup();
+      }
     }
-  }, [page.id, pageRefs]);
+  }, [page.id, page.pageNumber, pageRefs, selectionMode, selectedPages, pdfDocument.pages, onReorderPages]);
+
 
   return (
     <div
@@ -147,25 +197,13 @@ const PageThumbnail = React.memo(({
         ${selectionMode
           ? 'bg-white hover:bg-gray-50'
           : 'bg-white hover:bg-gray-50'}
-        ${draggedPage === page.pageNumber ? 'opacity-50 scale-95' : ''}
+        ${isDragging ? 'opacity-50 scale-95' : ''}
         ${movingPage === page.pageNumber ? 'page-moving' : ''}
       `}
       style={{
-        transform: (() => {
-          if (!isAnimating && draggedPage && page.pageNumber !== draggedPage && dropTarget === page.pageNumber) {
-            return 'translateX(20px)';
-          }
-          return 'translateX(0)';
-        })(),
         transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out'
       }}
-      draggable
-      onDragStart={() => onDragStart(page.pageNumber)}
-      onDragEnd={onDragEnd}
-      onDragOver={onDragOver}
-      onDragEnter={() => onDragEnter(page.pageNumber)}
-      onDragLeave={onDragLeave}
-      onDrop={(e) => onDrop(e, page.pageNumber)}
+      draggable={false}
     >
       {selectionMode && (
         <div
@@ -189,7 +227,6 @@ const PageThumbnail = React.memo(({
             e.stopPropagation();
           }}
           onClick={(e) => {
-            console.log('📸 Checkbox clicked for page', page.pageNumber);
             e.stopPropagation();
             onTogglePage(page.pageNumber);
           }}
@@ -204,7 +241,7 @@ const PageThumbnail = React.memo(({
         </div>
       )}
 
-      <div className="page-container w-[90%] h-[90%]">
+      <div className="page-container w-[90%] h-[90%]" draggable={false}>
         <div
           style={{
             width: '100%',
@@ -222,6 +259,7 @@ const PageThumbnail = React.memo(({
             <img
               src={thumbnailUrl}
               alt={`Page ${page.pageNumber}`}
+              draggable={false}
               style={{
                 width: '100%',
                 height: '100%',
@@ -231,11 +269,6 @@ const PageThumbnail = React.memo(({
                 transition: 'transform 0.3s ease-in-out'
               }}
             />
-          ) : isLoadingThumbnail ? (
-            <div style={{ textAlign: 'center' }}>
-              <Loader size="sm" />
-              <Text size="xs" c="dimmed" mt={4}>Loading...</Text>
-            </div>
           ) : (
             <div style={{ textAlign: 'center' }}>
               <Text size="lg" c="dimmed">📄</Text>
@@ -408,30 +441,25 @@ const PageThumbnail = React.memo(({
           )}
         </div>
 
-        <DragIndicatorIcon
-          style={{
-            position: 'absolute',
-            bottom: 4,
-            right: 4,
-            color: 'rgba(0,0,0,0.3)',
-            fontSize: 16,
-            zIndex: 1
-          }}
-        />
       </div>
     </div>
   );
 }, (prevProps, nextProps) => {
+  // Helper for shallow array comparison
+  const arraysEqual = (a: number[], b: number[]) => {
+    return a.length === b.length && a.every((val, i) => val === b[i]);
+  };
+
   // Only re-render if essential props change
   return (
     prevProps.page.id === nextProps.page.id &&
     prevProps.page.pageNumber === nextProps.page.pageNumber &&
     prevProps.page.rotation === nextProps.page.rotation &&
     prevProps.page.thumbnail === nextProps.page.thumbnail &&
-    prevProps.selectedPages === nextProps.selectedPages && // Compare array reference - will re-render when selection changes
+    // Shallow compare selectedPages array for better stability
+    (prevProps.selectedPages === nextProps.selectedPages || 
+     arraysEqual(prevProps.selectedPages, nextProps.selectedPages)) &&
     prevProps.selectionMode === nextProps.selectionMode &&
-    prevProps.draggedPage === nextProps.draggedPage &&
-    prevProps.dropTarget === nextProps.dropTarget &&
     prevProps.movingPage === nextProps.movingPage &&
     prevProps.isAnimating === nextProps.isAnimating
   );
diff --git a/frontend/src/components/shared/FileCard.tsx b/frontend/src/components/shared/FileCard.tsx
index e4ff60eea..73ae01dba 100644
--- a/frontend/src/components/shared/FileCard.tsx
+++ b/frontend/src/components/shared/FileCard.tsx
@@ -6,12 +6,13 @@ import StorageIcon from "@mui/icons-material/Storage";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditIcon from "@mui/icons-material/Edit";
 
-import { FileWithUrl } from "../../types/file";
+import { FileRecord } from "../../types/fileContext";
 import { getFileSize, getFileDate } from "../../utils/fileUtils";
 import { useIndexedDBThumbnail } from "../../hooks/useIndexedDBThumbnail";
 
 interface FileCardProps {
-  file: FileWithUrl;
+  file: File;
+  record?: FileRecord;
   onRemove: () => void;
   onDoubleClick?: () => void;
   onView?: () => void;
@@ -21,9 +22,12 @@ interface FileCardProps {
   isSupported?: boolean; // Whether the file format is supported by the current tool
 }
 
-const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
+const FileCard = ({ file, record, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
   const { t } = useTranslation();
-  const { thumbnail: thumb, isGenerating } = useIndexedDBThumbnail(file);
+  // Use record thumbnail if available, otherwise fall back to IndexedDB lookup
+  const fileMetadata = record ? { id: record.id, name: file.name, type: file.type, size: file.size, lastModified: file.lastModified } : null;
+  const { thumbnail: indexedDBThumb, isGenerating } = useIndexedDBThumbnail(fileMetadata);
+  const thumb = record?.thumbnailUrl || indexedDBThumb;
   const [isHovered, setIsHovered] = useState(false);
 
   return (
@@ -173,7 +177,7 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
           <Badge color="blue" variant="light" size="sm">
             {getFileDate(file)}
           </Badge>
-          {file.storedInIndexedDB && (
+          {record?.id && (
             <Badge
               color="green"
               variant="light"
diff --git a/frontend/src/components/shared/FileGrid.tsx b/frontend/src/components/shared/FileGrid.tsx
index e05ab9bad..169e19f88 100644
--- a/frontend/src/components/shared/FileGrid.tsx
+++ b/frontend/src/components/shared/FileGrid.tsx
@@ -4,14 +4,14 @@ import { useTranslation } from "react-i18next";
 import SearchIcon from "@mui/icons-material/Search";
 import SortIcon from "@mui/icons-material/Sort";
 import FileCard from "./FileCard";
-import { FileWithUrl } from "../../types/file";
+import { FileRecord } from "../../types/fileContext";
 
 interface FileGridProps {
-  files: FileWithUrl[];
+  files: Array<{ file: File; record?: FileRecord }>;
   onRemove?: (index: number) => void;
-  onDoubleClick?: (file: FileWithUrl) => void;
-  onView?: (file: FileWithUrl) => void;
-  onEdit?: (file: FileWithUrl) => void;
+  onDoubleClick?: (item: { file: File; record?: FileRecord }) => void;
+  onView?: (item: { file: File; record?: FileRecord }) => void;
+  onEdit?: (item: { file: File; record?: FileRecord }) => void;
   onSelect?: (fileId: string) => void;
   selectedFiles?: string[];
   showSearch?: boolean;
@@ -46,19 +46,19 @@ const FileGrid = ({
   const [sortBy, setSortBy] = useState<SortOption>('date');
 
   // Filter files based on search term
-  const filteredFiles = files.filter(file =>
-    file.name.toLowerCase().includes(searchTerm.toLowerCase())
+  const filteredFiles = files.filter(item =>
+    item.file.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   // Sort files
   const sortedFiles = [...filteredFiles].sort((a, b) => {
     switch (sortBy) {
       case 'date':
-        return (b.lastModified || 0) - (a.lastModified || 0);
+        return (b.file.lastModified || 0) - (a.file.lastModified || 0);
       case 'name':
-        return a.name.localeCompare(b.name);
+        return a.file.name.localeCompare(b.file.name);
       case 'size':
-        return (b.size || 0) - (a.size || 0);
+        return (b.file.size || 0) - (a.file.size || 0);
       default:
         return 0;
     }
@@ -122,18 +122,19 @@ const FileGrid = ({
         h="30rem" 
         style={{ overflowY: "auto", width: "100%" }}
       >
-        {displayFiles.map((file, idx) => {
-          const fileId = file.id || file.name;
-          const originalIdx = files.findIndex(f => (f.id || f.name) === fileId);
-          const supported = isFileSupported ? isFileSupported(file.name) : true;
+        {displayFiles.map((item, idx) => {
+          const fileId = item.record?.id || item.file.name;
+          const originalIdx = files.findIndex(f => (f.record?.id || f.file.name) === fileId);
+          const supported = isFileSupported ? isFileSupported(item.file.name) : true;
           return (
             <FileCard
               key={fileId + idx}
-              file={file}
+              file={item.file}
+              record={item.record}
               onRemove={onRemove ? () => onRemove(originalIdx) : () => {}}
-              onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(file) : undefined}
-              onView={onView && supported ? () => onView(file) : undefined}
-              onEdit={onEdit && supported ? () => onEdit(file) : undefined}
+              onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(item) : undefined}
+              onView={onView && supported ? () => onView(item) : undefined}
+              onEdit={onEdit && supported ? () => onEdit(item) : undefined}
               isSelected={selectedFiles.includes(fileId)}
               onSelect={onSelect && supported ? () => onSelect(fileId) : undefined}
               isSupported={supported}
diff --git a/frontend/src/components/shared/FilePickerModal.tsx b/frontend/src/components/shared/FilePickerModal.tsx
index f489c5a11..8aa054f25 100644
--- a/frontend/src/components/shared/FilePickerModal.tsx
+++ b/frontend/src/components/shared/FilePickerModal.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 interface FilePickerModalProps {
   opened: boolean;
   onClose: () => void;
-  storedFiles: any[]; // Files from storage (FileWithUrl format)
+  storedFiles: any[]; // Files from storage (various formats supported)
   onSelectFiles: (selectedFiles: File[]) => void;
 }
 
@@ -48,7 +48,7 @@ const FilePickerModal = ({
   };
 
   const selectAll = () => {
-    setSelectedFileIds(storedFiles.map(f => f.id || f.name));
+    setSelectedFileIds(storedFiles.map(f => f.id).filter(Boolean));
   };
 
   const selectNone = () => {
@@ -57,7 +57,7 @@ const FilePickerModal = ({
 
   const handleConfirm = async () => {
     const selectedFiles = storedFiles.filter(f => 
-      selectedFileIds.includes(f.id || f.name)
+      selectedFileIds.includes(f.id)
     );
     
     // Convert stored files to File objects
@@ -154,7 +154,7 @@ const FilePickerModal = ({
             <ScrollArea.Autosize mah={400}>
               <SimpleGrid cols={2} spacing="md">
                 {storedFiles.map((file) => {
-                  const fileId = file.id || file.name;
+                  const fileId = file.id;
                   const isSelected = selectedFileIds.includes(fileId);
                   
                   return (
diff --git a/frontend/src/components/shared/FilePreview.tsx b/frontend/src/components/shared/FilePreview.tsx
index 4a58d4671..a13894040 100644
--- a/frontend/src/components/shared/FilePreview.tsx
+++ b/frontend/src/components/shared/FilePreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@mantine/core';
-import { FileWithUrl } from '../../types/file';
+import { FileMetadata } from '../../types/file';
 import DocumentThumbnail from './filePreview/DocumentThumbnail';
 import DocumentStack from './filePreview/DocumentStack';
 import HoverOverlay from './filePreview/HoverOverlay';
@@ -8,7 +8,7 @@ import NavigationArrows from './filePreview/NavigationArrows';
 
 export interface FilePreviewProps {
   // Core file data
-  file: File | FileWithUrl | null;
+  file: File | FileMetadata | null;
   thumbnail?: string | null;
   
   // Optional features
@@ -21,7 +21,7 @@ export interface FilePreviewProps {
   isAnimating?: boolean;
   
   // Event handlers
-  onFileClick?: (file: File | FileWithUrl | null) => void;
+  onFileClick?: (file: File | FileMetadata | null) => void;
   onPrevious?: () => void;
   onNext?: () => void;
 }
diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx
index 4af3d1202..6c1668a43 100644
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -33,7 +33,7 @@ const LandingPage = () => {
       {/* White PDF Page Background */}
       <Dropzone
         onDrop={handleFileDrop}
-        accept={["*/*"] as any}
+        accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
         multiple={true}
         className="w-4/5 flex items-center justify-center h-[95vh]"
         style={{
@@ -125,7 +125,7 @@ const LandingPage = () => {
               ref={fileInputRef}
               type="file"
               multiple
-              accept="*/*"
+              accept=".pdf,.zip"
               onChange={handleFileSelect}
               style={{ display: 'none' }}
             />
diff --git a/frontend/src/components/shared/NavigationWarningModal.tsx b/frontend/src/components/shared/NavigationWarningModal.tsx
index a3d3983d2..c7f591c71 100644
--- a/frontend/src/components/shared/NavigationWarningModal.tsx
+++ b/frontend/src/components/shared/NavigationWarningModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
-import { useFileContext } from '../../contexts/FileContext';
+import { useNavigationGuard } from '../../contexts/NavigationContext';
 
 interface NavigationWarningModalProps {
   onApplyAndContinue?: () => Promise<void>;
@@ -11,13 +11,13 @@ const NavigationWarningModal = ({
   onApplyAndContinue,
   onExportAndContinue
 }: NavigationWarningModalProps) => {
-  const { 
-    showNavigationWarning, 
+  const {
+    showNavigationWarning,
     hasUnsavedChanges,
-    confirmNavigation, 
     cancelNavigation,
+    confirmNavigation,
     setHasUnsavedChanges
-  } = useFileContext();
+  } = useNavigationGuard();
 
   const handleKeepWorking = () => {
     cancelNavigation();
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index 98f8d0115..ee5591694 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { Button, SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import LanguageSelector from "./LanguageSelector";
@@ -10,50 +10,18 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
 import { Group } from "@mantine/core";
+import { ModeType } from '../../contexts/NavigationContext';
 
-// This will be created inside the component to access switchingTo
-const createViewOptions = (switchingTo: string | null) => [
-  {
-    label: (
-      <Group gap={5}>
-        {switchingTo === "viewer" ? (
-          <Loader size="xs" />
-        ) : (
-          <VisibilityIcon fontSize="small" />
-        )}
-      </Group>
-    ),
-    value: "viewer",
-  },
-  {
-    label: (
-      <Group gap={4}>
-        {switchingTo === "pageEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <EditNoteIcon fontSize="small" />
-        )}
-      </Group>
-    ),
-    value: "pageEditor",
-  },
-  {
-    label: (
-      <Group gap={4}>
-        {switchingTo === "fileEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <FolderIcon fontSize="small" />
-        )}
-      </Group>
-    ),
-    value: "fileEditor",
-  },
-];
+// Stable view option objects that don't recreate on every render
+const VIEW_OPTIONS_BASE = [
+  { value: "viewer", icon: VisibilityIcon },
+  { value: "pageEditor", icon: EditNoteIcon },
+  { value: "fileEditor", icon: FolderIcon },
+] as const;
 
 interface TopControlsProps {
-  currentView: string;
-  setCurrentView: (view: string) => void;
+  currentView: ModeType;
+  setCurrentView: (view: ModeType) => void;
   selectedToolKey?: string | null;
 }
 
@@ -68,6 +36,9 @@ const TopControls = ({
   const isToolSelected = selectedToolKey !== null;
 
   const handleViewChange = useCallback((view: string) => {
+    // Guard against redundant changes
+    if (view === currentView) return;
+    
     // Show immediate feedback
     setSwitchingTo(view);
 
@@ -75,13 +46,28 @@ const TopControls = ({
     requestAnimationFrame(() => {
       // Give the spinner one more frame to show
       requestAnimationFrame(() => {
-        setCurrentView(view);
-
+        setCurrentView(view as ModeType);
+        
         // Clear the loading state after view change completes
         setTimeout(() => setSwitchingTo(null), 300);
       });
     });
-  }, [setCurrentView]);
+  }, [setCurrentView, currentView]);
+
+  // Memoize the SegmentedControl data with stable references
+  const viewOptions = useMemo(() => 
+    VIEW_OPTIONS_BASE.map(option => ({
+      value: option.value,
+      label: (
+        <Group gap={option.value === "viewer" ? 5 : 4}>
+          {switchingTo === option.value ? (
+            <Loader size="xs" />
+          ) : (
+            <option.icon fontSize="small" />
+          )}
+        </Group>
+      )
+    })), [switchingTo]);
 
   const getThemeIcon = () => {
     if (isRainbowMode) return <AutoAwesomeIcon className={rainbowStyles.rainbowText} />;
@@ -117,7 +103,7 @@ const TopControls = ({
       {!isToolSelected && (
         <div className="flex justify-center items-center h-full pointer-events-auto">
             <SegmentedControl
-              data={createViewOptions(switchingTo)}
+              data={viewOptions}
               value={currentView}
               onChange={handleViewChange}
               color="blue"
diff --git a/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx b/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
index 661947be2..56991e9d7 100644
--- a/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Box, Center, Image } from '@mantine/core';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import { FileWithUrl } from '../../../types/file';
+import { FileMetadata } from '../../../types/file';
 
 export interface DocumentThumbnailProps {
-  file: File | FileWithUrl | null;
+  file: File | FileMetadata | null;
   thumbnail?: string | null;
   style?: React.CSSProperties;
   onClick?: () => void;
diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 03fce1e7e..bec6b272f 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -5,8 +5,8 @@ import { useTranslation } from "react-i18next";
 import { useMultipleEndpointsEnabled } from "../../../hooks/useEndpointConfig";
 import { isImageFormat, isWebFormat } from "../../../utils/convertUtils";
 import { getConversionEndpoints } from "../../../data/toolsTaxonomy";
-import { useFileSelectionActions } from "../../../contexts/FileSelectionContext";
-import { useFileContext } from "../../../contexts/FileContext";
+import { useFileSelection } from "../../../contexts/FileContext";
+import { useFileState } from "../../../contexts/FileContext";
 import { detectFileExtension } from "../../../utils/fileUtils";
 import GroupedFormatDropdown from "./GroupedFormatDropdown";
 import ConvertToImageSettings from "./ConvertToImageSettings";
@@ -41,8 +41,9 @@ const ConvertSettings = ({
   const { t } = useTranslation();
   const theme = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
-  const { setSelectedFiles } = useFileSelectionActions();
-  const { activeFiles, setSelectedFiles: setContextSelectedFiles } = useFileContext();
+  const { setSelectedFiles } = useFileSelection();
+  const { state, selectors } = useFileState();
+  const activeFiles = state.files.ids;
 
   const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
 
@@ -85,9 +86,9 @@ const ConvertSettings = ({
     }
     
     return baseOptions;
-  }, [getAvailableToExtensions, endpointStatus, parameters.fromExtension]);
+  }, [parameters.fromExtension, endpointStatus]);
 
-  // Enhanced TO options with endpoint availability
+  // Enhanced TO options with endpoint availability  
   const enhancedToOptions = useMemo(() => {
     if (!parameters.fromExtension) return [];
     
@@ -96,7 +97,7 @@ const ConvertSettings = ({
       ...option,
       enabled: isConversionAvailable(parameters.fromExtension, option.value)
     }));
-  }, [parameters.fromExtension, getAvailableToExtensions, endpointStatus]);
+  }, [parameters.fromExtension, endpointStatus]);
 
   const resetParametersToDefaults = () => {
     onParameterChange('imageOptions', {
@@ -127,7 +128,8 @@ const ConvertSettings = ({
   };
 
   const filterFilesByExtension = (extension: string) => {
-    return activeFiles.filter(file => {
+    const files = activeFiles.map(fileId => selectors.getFile(fileId)).filter(Boolean) as File[];
+    return files.filter(file => {
       const fileExtension = detectFileExtension(file.name);
       
       if (extension === 'any') {
@@ -141,9 +143,21 @@ const ConvertSettings = ({
   };
 
   const updateFileSelection = (files: File[]) => {
-    setSelectedFiles(files);
-    const fileIds = files.map(file => (file as any).id || file.name);
-    setContextSelectedFiles(fileIds);
+    // Map File objects to their actual IDs in FileContext
+    const fileIds = files.map(file => {
+      // Find the file ID by matching file properties
+      const fileRecord = state.files.ids
+        .map(id => selectors.getFileRecord(id))
+        .find(record => 
+          record && 
+          record.name === file.name && 
+          record.size === file.size && 
+          record.lastModified === file.lastModified
+        );
+      return fileRecord?.id;
+    }).filter((id): id is string => id !== undefined); // Type guard to ensure only strings
+    
+    setSelectedFiles(fileIds);
   };
 
   const handleFromExtensionChange = (value: string) => {
diff --git a/frontend/src/components/viewer/Viewer.tsx b/frontend/src/components/viewer/Viewer.tsx
index 6e08962b1..c1a2b440a 100644
--- a/frontend/src/components/viewer/Viewer.tsx
+++ b/frontend/src/components/viewer/Viewer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import { Paper, Stack, Text, ScrollArea, Loader, Center, Button, Group, NumberInput, useMantineTheme, ActionIcon, Box, Tabs } from "@mantine/core";
-import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
 import { useTranslation } from "react-i18next";
+import { pdfWorkerManager } from "../../services/pdfWorkerManager";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import FirstPageIcon from "@mui/icons-material/FirstPage";
@@ -13,10 +13,9 @@ import CloseIcon from "@mui/icons-material/Close";
 import { useLocalStorage } from "@mantine/hooks";
 import { fileStorage } from "../../services/fileStorage";
 import SkeletonLoader from '../shared/SkeletonLoader';
-import { useFileContext } from "../../contexts/FileContext";
+import { useFileState, useFileActions, useCurrentFile } from "../../contexts/FileContext";
 import { useFileWithUrl } from "../../hooks/useFileWithUrl";
 
-GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
 
 // Lazy loading page image component
 interface LazyPageImageProps {
@@ -150,7 +149,15 @@ const Viewer = ({
   const theme = useMantineTheme();
 
   // Get current file from FileContext
-  const { getCurrentFile, getCurrentProcessedFile, clearAllFiles, addFiles, activeFiles } = useFileContext();
+  const { selectors } = useFileState();
+  const { actions } = useFileActions();
+  const currentFile = useCurrentFile();
+  
+  const getCurrentFile = () => currentFile.file;
+  const getCurrentProcessedFile = () => currentFile.record?.processedFile || undefined;
+  const clearAllFiles = actions.clearAllFiles;
+  const addFiles = actions.addFiles;
+  const activeFiles = selectors.getFiles();
 
   // Tab management for multiple files
   const [activeTab, setActiveTab] = useState<string>("0");
@@ -171,6 +178,10 @@ const Viewer = ({
   const [zoom, setZoom] = useState(1); // 1 = 100%
   const pageRefs = useRef<(HTMLImageElement | null)[]>([]);
 
+  // Memoize setPageRef to prevent infinite re-renders
+  const setPageRef = useCallback((index: number, ref: HTMLImageElement | null) => {
+    pageRefs.current[index] = ref;
+  }, []);
 
   // Get files with URLs for tabs - we'll need to create these individually
   const file0WithUrl = useFileWithUrl(activeFiles[0]);
@@ -385,7 +396,7 @@ const Viewer = ({
           throw new Error('No valid PDF source available');
         }
 
-        const pdf = await getDocument(pdfData).promise;
+        const pdf = await pdfWorkerManager.createDocument(pdfData);
         pdfDocRef.current = pdf;
         setNumPages(pdf.numPages);
         if (!cancelled) {
@@ -406,6 +417,11 @@ const Viewer = ({
       cancelled = true;
       // Stop any ongoing preloading
       preloadingRef.current = false;
+      // Cleanup PDF document using worker manager
+      if (pdfDocRef.current) {
+        pdfWorkerManager.destroyDocument(pdfDocRef.current);
+        pdfDocRef.current = null;
+      }
       // Cleanup ArrayBuffer reference to help garbage collection
       currentArrayBufferRef.current = null;
     };
@@ -461,7 +477,7 @@ const Viewer = ({
             >
               <Tabs value={activeTab} onChange={(value) => handleTabChange(value || "0")}>
                 <Tabs.List>
-                  {activeFiles.map((file, index) => (
+                  {activeFiles.map((file: any, index: number) => (
                     <Tabs.Tab key={index} value={index.toString()}>
                       {file.name.length > 20 ? `${file.name.substring(0, 20)}...` : file.name}
                     </Tabs.Tab>
@@ -494,7 +510,7 @@ const Viewer = ({
                       isFirst={i === 0}
                       renderPage={renderPage}
                       pageImages={pageImages}
-                      setPageRef={(index, ref) => { pageRefs.current[index] = ref; }}
+                      setPageRef={setPageRef}
                     />
                     {i * 2 + 1 < numPages && (
                       <LazyPageImage
@@ -504,7 +520,7 @@ const Viewer = ({
                         isFirst={i === 0}
                         renderPage={renderPage}
                         pageImages={pageImages}
-                        setPageRef={(index, ref) => { pageRefs.current[index] = ref; }}
+                        setPageRef={setPageRef}
                       />
                     )}
                   </Group>
@@ -518,7 +534,7 @@ const Viewer = ({
                     isFirst={idx === 0}
                     renderPage={renderPage}
                     pageImages={pageImages}
-                    setPageRef={(index, ref) => { pageRefs.current[index] = ref; }}
+                    setPageRef={setPageRef}
                   />
                 ))}
           </Stack>
diff --git a/frontend/src/contexts/FileContext.tsx b/frontend/src/contexts/FileContext.tsx
index 13b1a77be..44adf6b28 100644
--- a/frontend/src/contexts/FileContext.tsx
+++ b/frontend/src/contexts/FileContext.tsx
@@ -1,961 +1,279 @@
 /**
- * Global file context for managing files, edits, and navigation across all views and tools
+ * FileContext - Manages PDF files for Stirling PDF multi-tool workflow
+ * 
+ * Handles file state, memory management, and resource cleanup for large PDFs (up to 100GB+).
+ * Users upload PDFs once and chain tools (split → merge → compress → view) without reloading.
+ * 
+ * Key hooks:
+ * - useFileState() - access file state and UI state
+ * - useFileActions() - file operations (add/remove/update)  
+ * - useFileSelection() - for file selection state and actions
+ * 
+ * Memory management handled by FileLifecycleManager (PDF.js cleanup, blob URL revocation).
  */
 
-import React, { createContext, useContext, useReducer, useCallback, useEffect, useRef } from 'react';
+import React, { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
 import {
-  FileContextValue,
-  FileContextState,
   FileContextProviderProps,
-  ModeType,
-  ViewType,
-  ToolType,
-  FileOperation,
-  FileEditHistory,
-  FileOperationHistory,
-  ViewerConfig,
-  FileContextUrlParams
+  FileContextSelectors,
+  FileContextStateValue,
+  FileContextActionsValue,
+  FileContextActions,
+  FileId,
+  FileRecord
 } from '../types/fileContext';
-import { ProcessedFile } from '../types/processing';
-import { PageOperation, PDFDocument } from '../types/pageEditor';
-import { useEnhancedProcessedFiles } from '../hooks/useEnhancedProcessedFiles';
-import { fileStorage } from '../services/fileStorage';
-import { enhancedPDFProcessingService } from '../services/enhancedPDFProcessingService';
-import { thumbnailGenerationService } from '../services/thumbnailGenerationService';
-import { getFileId } from '../utils/fileUtils';
 
-// Initial state
-const initialViewerConfig: ViewerConfig = {
-  zoom: 1.0,
-  currentPage: 1,
-  viewMode: 'single',
-  sidebarOpen: false
-};
+// Import modular components
+import { fileContextReducer, initialFileContextState } from './file/FileReducer';
+import { createFileSelectors } from './file/fileSelectors';
+import { addFiles, consumeFiles, createFileActions } from './file/fileActions';
+import { FileLifecycleManager } from './file/lifecycle';
+import { FileStateContext, FileActionsContext } from './file/contexts';
+import { IndexedDBProvider, useIndexedDB } from './IndexedDBContext';
 
-const initialState: FileContextState = {
-  activeFiles: [],
-  processedFiles: new Map(),
-  pinnedFiles: new Set(),
-  currentMode: 'pageEditor',
-  currentView: 'fileEditor', // Legacy field
-  currentTool: null, // Legacy field
-  fileEditHistory: new Map(),
-  globalFileOperations: [],
-  fileOperationHistory: new Map(),
-  selectedFileIds: [],
-  selectedPageNumbers: [],
-  viewerConfig: initialViewerConfig,
-  isProcessing: false,
-  processingProgress: 0,
-  lastExportConfig: undefined,
-  hasUnsavedChanges: false,
-  pendingNavigation: null,
-  showNavigationWarning: false
-};
+const DEBUG = process.env.NODE_ENV === 'development';
 
-// Action types
-type FileContextAction =
-  | { type: 'SET_ACTIVE_FILES'; payload: File[] }
-  | { type: 'ADD_FILES'; payload: File[] }
-  | { type: 'REMOVE_FILES'; payload: string[] }
-  | { type: 'SET_PROCESSED_FILES'; payload: Map<File, ProcessedFile> }
-  | { type: 'UPDATE_PROCESSED_FILE'; payload: { file: File; processedFile: ProcessedFile } }
-  | { type: 'SET_CURRENT_MODE'; payload: ModeType }
-  | { type: 'SET_CURRENT_VIEW'; payload: ViewType }
-  | { type: 'SET_CURRENT_TOOL'; payload: ToolType }
-  | { type: 'SET_SELECTED_FILES'; payload: string[] }
-  | { type: 'SET_SELECTED_PAGES'; payload: number[] }
-  | { type: 'CLEAR_SELECTIONS' }
-  | { type: 'SET_PROCESSING'; payload: { isProcessing: boolean; progress: number } }
-  | { type: 'UPDATE_VIEWER_CONFIG'; payload: Partial<ViewerConfig> }
-  | { type: 'ADD_PAGE_OPERATIONS'; payload: { fileId: string; operations: PageOperation[] } }
-  | { type: 'ADD_FILE_OPERATION'; payload: FileOperation }
-  | { type: 'RECORD_OPERATION'; payload: { fileId: string; operation: FileOperation | PageOperation } }
-  | { type: 'MARK_OPERATION_APPLIED'; payload: { fileId: string; operationId: string } }
-  | { type: 'MARK_OPERATION_FAILED'; payload: { fileId: string; operationId: string; error: string } }
-  | { type: 'CLEAR_FILE_HISTORY'; payload: string }
-  | { type: 'SET_EXPORT_CONFIG'; payload: FileContextState['lastExportConfig'] }
-  | { type: 'SET_UNSAVED_CHANGES'; payload: boolean }
-  | { type: 'SET_PENDING_NAVIGATION'; payload: (() => void) | null }
-  | { type: 'SHOW_NAVIGATION_WARNING'; payload: boolean }
-  | { type: 'PIN_FILE'; payload: File }
-  | { type: 'UNPIN_FILE'; payload: File }
-  | { type: 'CONSUME_FILES'; payload: { inputFiles: File[]; outputFiles: File[] } }
-  | { type: 'RESET_CONTEXT' }
-  | { type: 'LOAD_STATE'; payload: Partial<FileContextState> };
 
-// Reducer
-function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
-  switch (action.type) {
-    case 'SET_ACTIVE_FILES':
-      return {
-        ...state,
-        activeFiles: action.payload,
-        selectedFileIds: [], // Clear selections when files change
-        selectedPageNumbers: []
-      };
-
-    case 'ADD_FILES':
-      return {
-        ...state,
-        activeFiles: [...state.activeFiles, ...action.payload]
-      };
-
-    case 'REMOVE_FILES':
-      const remainingFiles = state.activeFiles.filter(file => {
-        const fileId = getFileId(file);
-        return !fileId || !action.payload.includes(fileId);
-      });
-      const safeSelectedFileIds = Array.isArray(state.selectedFileIds) ? state.selectedFileIds : [];
-      return {
-        ...state,
-        activeFiles: remainingFiles,
-        selectedFileIds: safeSelectedFileIds.filter(id => !action.payload.includes(id))
-      };
-
-    case 'SET_PROCESSED_FILES':
-      return {
-        ...state,
-        processedFiles: action.payload
-      };
-
-    case 'UPDATE_PROCESSED_FILE':
-      const updatedProcessedFiles = new Map(state.processedFiles);
-      updatedProcessedFiles.set(action.payload.file, action.payload.processedFile);
-      return {
-        ...state,
-        processedFiles: updatedProcessedFiles
-      };
-
-    case 'SET_CURRENT_MODE':
-      const coreViews = ['viewer', 'pageEditor', 'fileEditor'];
-      const isToolMode = !coreViews.includes(action.payload);
-
-      return {
-        ...state,
-        currentMode: action.payload,
-        // Update legacy fields for backward compatibility
-        currentView: isToolMode ? 'fileEditor' : action.payload as ViewType,
-        currentTool: isToolMode ? action.payload as ToolType : null
-      };
-
-    case 'SET_CURRENT_VIEW':
-      // Legacy action - just update currentMode
-      return {
-        ...state,
-        currentMode: action.payload as ModeType,
-        currentView: action.payload,
-        currentTool: null
-      };
-
-    case 'SET_CURRENT_TOOL':
-      // Legacy action - just update currentMode
-      return {
-        ...state,
-        currentMode: action.payload ? action.payload as ModeType : 'pageEditor',
-        currentView: action.payload ? 'fileEditor' : 'pageEditor',
-        currentTool: action.payload
-      };
-
-    case 'SET_SELECTED_FILES':
-      return {
-        ...state,
-        selectedFileIds: action.payload
-      };
-
-    case 'SET_SELECTED_PAGES':
-      return {
-        ...state,
-        selectedPageNumbers: action.payload
-      };
-
-    case 'CLEAR_SELECTIONS':
-      return {
-        ...state,
-        selectedFileIds: [],
-        selectedPageNumbers: []
-      };
-
-    case 'SET_PROCESSING':
-      return {
-        ...state,
-        isProcessing: action.payload.isProcessing,
-        processingProgress: action.payload.progress
-      };
-
-    case 'UPDATE_VIEWER_CONFIG':
-      return {
-        ...state,
-        viewerConfig: {
-          ...state.viewerConfig,
-          ...action.payload
-        }
-      };
-
-    case 'ADD_PAGE_OPERATIONS':
-      const newHistory = new Map(state.fileEditHistory);
-      const existing = newHistory.get(action.payload.fileId);
-      newHistory.set(action.payload.fileId, {
-        fileId: action.payload.fileId,
-        pageOperations: existing ?
-          [...existing.pageOperations, ...action.payload.operations] :
-          action.payload.operations,
-        lastModified: Date.now()
-      });
-      return {
-        ...state,
-        fileEditHistory: newHistory
-      };
-
-    case 'ADD_FILE_OPERATION':
-      return {
-        ...state,
-        globalFileOperations: [...state.globalFileOperations, action.payload]
-      };
-
-    case 'RECORD_OPERATION':
-      const { fileId, operation } = action.payload;
-      const newOperationHistory = new Map(state.fileOperationHistory);
-      const existingHistory = newOperationHistory.get(fileId);
-
-      if (existingHistory) {
-        // Add operation to existing history
-        newOperationHistory.set(fileId, {
-          ...existingHistory,
-          operations: [...existingHistory.operations, operation],
-          lastModified: Date.now()
-        });
-      } else {
-        // Create new history for this file
-        newOperationHistory.set(fileId, {
-          fileId,
-          fileName: fileId, // Will be updated with actual filename when available
-          operations: [operation],
-          createdAt: Date.now(),
-          lastModified: Date.now()
-        });
-      }
-
-      return {
-        ...state,
-        fileOperationHistory: newOperationHistory
-      };
-
-    case 'MARK_OPERATION_APPLIED':
-      const appliedHistory = new Map(state.fileOperationHistory);
-      const appliedFileHistory = appliedHistory.get(action.payload.fileId);
-
-      if (appliedFileHistory) {
-        const updatedOperations = appliedFileHistory.operations.map(op =>
-          op.id === action.payload.operationId
-            ? { ...op, status: 'applied' as const }
-            : op
-        );
-        appliedHistory.set(action.payload.fileId, {
-          ...appliedFileHistory,
-          operations: updatedOperations,
-          lastModified: Date.now()
-        });
-      }
-
-      return {
-        ...state,
-        fileOperationHistory: appliedHistory
-      };
-
-    case 'MARK_OPERATION_FAILED':
-      const failedHistory = new Map(state.fileOperationHistory);
-      const failedFileHistory = failedHistory.get(action.payload.fileId);
-
-      if (failedFileHistory) {
-        const updatedOperations = failedFileHistory.operations.map(op =>
-          op.id === action.payload.operationId
-            ? {
-                ...op,
-                status: 'failed' as const,
-                metadata: { ...op.metadata, error: action.payload.error }
-              }
-            : op
-        );
-        failedHistory.set(action.payload.fileId, {
-          ...failedFileHistory,
-          operations: updatedOperations,
-          lastModified: Date.now()
-        });
-      }
-
-      return {
-        ...state,
-        fileOperationHistory: failedHistory
-      };
-
-    case 'CLEAR_FILE_HISTORY':
-      const clearedHistory = new Map(state.fileOperationHistory);
-      clearedHistory.delete(action.payload);
-      return {
-        ...state,
-        fileOperationHistory: clearedHistory
-      };
-
-    case 'SET_EXPORT_CONFIG':
-      return {
-        ...state,
-        lastExportConfig: action.payload
-      };
-
-    case 'SET_UNSAVED_CHANGES':
-      return {
-        ...state,
-        hasUnsavedChanges: action.payload
-      };
-
-    case 'SET_PENDING_NAVIGATION':
-      return {
-        ...state,
-        pendingNavigation: action.payload
-      };
-
-    case 'SHOW_NAVIGATION_WARNING':
-      return {
-        ...state,
-        showNavigationWarning: action.payload
-      };
-
-    case 'PIN_FILE':
-      return {
-        ...state,
-        pinnedFiles: new Set([...state.pinnedFiles, action.payload])
-      };
-
-    case 'UNPIN_FILE':
-      const newPinnedFiles = new Set(state.pinnedFiles);
-      newPinnedFiles.delete(action.payload);
-      return {
-        ...state,
-        pinnedFiles: newPinnedFiles
-      };
-
-    case 'CONSUME_FILES': {
-      const { inputFiles, outputFiles } = action.payload;
-      const unpinnedInputFiles = inputFiles.filter(file => !state.pinnedFiles.has(file));
-
-      // Remove unpinned input files and add output files
-      const newActiveFiles = [
-        ...state.activeFiles.filter(file => !unpinnedInputFiles.includes(file)),
-        ...outputFiles
-      ];
-
-      // Update processed files map - remove consumed files, keep pinned ones
-      const newProcessedFiles = new Map(state.processedFiles);
-      unpinnedInputFiles.forEach(file => {
-        newProcessedFiles.delete(file);
-      });
-
-      return {
-        ...state,
-        activeFiles: newActiveFiles,
-        processedFiles: newProcessedFiles
-      };
-    }
-
-    case 'RESET_CONTEXT':
-      return {
-        ...initialState
-      };
-
-    case 'LOAD_STATE':
-      return {
-        ...state,
-        ...action.payload
-      };
-
-    default:
-      return state;
-  }
-}
-
-// Context
-const FileContext = createContext<FileContextValue | undefined>(undefined);
-
-// Provider component
-export function FileContextProvider({
+// Inner provider component that has access to IndexedDB
+function FileContextInner({
   children,
   enableUrlSync = true,
-  enablePersistence = true,
-  maxCacheSize = 1024 * 1024 * 1024 // 1GB
+  enablePersistence = true 
 }: FileContextProviderProps) {
-  const [state, dispatch] = useReducer(fileContextReducer, initialState);
+  const [state, dispatch] = useReducer(fileContextReducer, initialFileContextState);
+  
+  // IndexedDB context for persistence
+  const indexedDB = enablePersistence ? useIndexedDB() : null;
 
-  // Cleanup timers and refs
-  const cleanupTimers = useRef<Map<string, NodeJS.Timeout>>(new Map());
-  const blobUrls = useRef<Set<string>>(new Set());
-  const pdfDocuments = useRef<Map<string, PDFDocument>>(new Map());
+  // File ref map - stores File objects outside React state
+  const filesRef = useRef<Map<FileId, File>>(new Map());
+  
+  // Stable state reference for selectors
+  const stateRef = useRef(state);
+  stateRef.current = state;
 
-  // Enhanced file processing hook
-  const {
-    processedFiles,
-    processingStates,
-    isProcessing: globalProcessing,
-    processingProgress,
-    actions: processingActions
-  } = useEnhancedProcessedFiles(state.activeFiles, {
-    strategy: 'progressive_chunked',
-    thumbnailQuality: 'medium',
-    chunkSize: 5, // Process 5 pages at a time for smooth progress
-    priorityPageCount: 0 // No special priority pages
-  });
+  // Create lifecycle manager
+  const lifecycleManagerRef = useRef<FileLifecycleManager | null>(null);
+  if (!lifecycleManagerRef.current) {
+    lifecycleManagerRef.current = new FileLifecycleManager(filesRef, dispatch);
+  }
+  const lifecycleManager = lifecycleManagerRef.current;
 
-  // Update processed files when they change
-  useEffect(() => {
-    dispatch({ type: 'SET_PROCESSED_FILES', payload: processedFiles });
-    dispatch({
-      type: 'SET_PROCESSING',
-      payload: {
-        isProcessing: globalProcessing,
-        progress: processingProgress.overall
-      }
-    });
-  }, [processedFiles, globalProcessing, processingProgress.overall]);
+  // Create stable selectors (memoized once to avoid re-renders)
+  const selectors = useMemo<FileContextSelectors>(() => 
+    createFileSelectors(stateRef, filesRef), 
+    [] // Empty deps - selectors are stable
+  );
 
-
-  // Centralized memory management
-  const trackBlobUrl = useCallback((url: string) => {
-    blobUrls.current.add(url);
-  }, []);
-
-  const trackPdfDocument = useCallback((fileId: string, pdfDoc: PDFDocument) => {
-    // Clean up existing document for this file if any
-    const existing = pdfDocuments.current.get(fileId);
-    if (existing && existing.destroy) {
-      try {
-        existing.destroy();
-      } catch (error) {
-        console.warn('Error destroying existing PDF document:', error);
-      }
-    }
-    pdfDocuments.current.set(fileId, pdfDoc);
-  }, []);
-
-  const cleanupFile = useCallback(async (fileId: string) => {
-    console.log('Cleaning up file:', fileId);
-
-    try {
-      // Cancel any pending cleanup timer
-      const timer = cleanupTimers.current.get(fileId);
-      if (timer) {
-        clearTimeout(timer);
-        cleanupTimers.current.delete(fileId);
-      }
-
-      // Cleanup PDF document instances (but preserve processed file cache)
-      const pdfDoc = pdfDocuments.current.get(fileId);
-      if (pdfDoc && pdfDoc.destroy) {
-        pdfDoc.destroy();
-        pdfDocuments.current.delete(fileId);
-      }
-
-      // IMPORTANT: Don't cancel processing or clear cache during normal view switches
-      // Only do this when file is actually being removed
-      // enhancedPDFProcessingService.cancelProcessing(fileId);
-      // thumbnailGenerationService.stopGeneration();
-
-    } catch (error) {
-      console.warn('Error during file cleanup:', error);
-    }
-  }, []);
-
-  const cleanupAllFiles = useCallback(() => {
-    console.log('Cleaning up all files');
-
-    try {
-      // Clear all timers
-      cleanupTimers.current.forEach(timer => clearTimeout(timer));
-      cleanupTimers.current.clear();
-
-      // Destroy all PDF documents
-      pdfDocuments.current.forEach((pdfDoc, fileId) => {
-        if (pdfDoc && pdfDoc.destroy) {
-          try {
-            pdfDoc.destroy();
-          } catch (error) {
-            console.warn(`Error destroying PDF document for ${fileId}:`, error);
-          }
-        }
-      });
-      pdfDocuments.current.clear();
-
-      // Revoke all blob URLs
-      blobUrls.current.forEach(url => {
-        try {
-          URL.revokeObjectURL(url);
-        } catch (error) {
-          console.warn('Error revoking blob URL:', error);
-        }
-      });
-      blobUrls.current.clear();
-
-      // Clear all processing
-      enhancedPDFProcessingService.clearAllProcessing();
-
-      // Destroy thumbnails
-      thumbnailGenerationService.destroy();
-
-      // Force garbage collection hint
-      setTimeout(() => window?.gc?.(), 100);
-
-    } catch (error) {
-      console.warn('Error during cleanup all files:', error);
-    }
-  }, []);
-
-  const scheduleCleanup = useCallback((fileId: string, delay: number = 30000) => {
-    // Cancel existing timer
-    const existingTimer = cleanupTimers.current.get(fileId);
-    if (existingTimer) {
-      clearTimeout(existingTimer);
-      cleanupTimers.current.delete(fileId);
-    }
-
-    // If delay is negative, just cancel (don't reschedule)
-    if (delay < 0) {
-      return;
-    }
-
-    // Schedule new cleanup
-    const timer = setTimeout(() => {
-      cleanupFile(fileId);
-    }, delay);
-
-    cleanupTimers.current.set(fileId, timer);
-  }, [cleanupFile]);
-
-  // Action implementations
-  const addFiles = useCallback(async (files: File[]): Promise<File[]> => {
-    dispatch({ type: 'ADD_FILES', payload: files });
-
-    // Auto-save to IndexedDB if persistence enabled
-    if (enablePersistence) {
-      for (const file of files) {
-        try {
-          // Check if file already has an explicit ID property (already in IndexedDB)
-          const fileId = getFileId(file);
-          if (!fileId) {
-            // File doesn't have explicit ID, store it with thumbnail
-            try {
-              // Generate thumbnail for better recent files experience
-              const thumbnail = await (thumbnailGenerationService as any /* FIX ME */).generateThumbnail(file);
-              const storedFile = await fileStorage.storeFile(file, thumbnail);
-              // Add the ID to the file object
-              Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-            } catch (thumbnailError) {
-              // If thumbnail generation fails, store without thumbnail
-              console.warn('Failed to generate thumbnail, storing without:', thumbnailError);
-              const storedFile = await fileStorage.storeFile(file);
-              Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-            }
-          }
-        } catch (error) {
-          console.error('Failed to store file:', error);
-        }
-      }
-    }
-
-    // Return files with their IDs assigned
-    return files;
-  }, [enablePersistence]);
-
-  const removeFiles = useCallback((fileIds: string[], deleteFromStorage: boolean = true) => {
-    // FULL cleanup for actually removed files (including cache)
-    fileIds.forEach(fileId => {
-      // Cancel processing and clear caches when file is actually removed
-      enhancedPDFProcessingService.cancelProcessing(fileId);
-      cleanupFile(fileId);
-    });
-
-    dispatch({ type: 'REMOVE_FILES', payload: fileIds });
-
-    // Remove from IndexedDB only if requested
-    if (enablePersistence && deleteFromStorage) {
-      fileIds.forEach(async (fileId) => {
-        try {
-          await fileStorage.deleteFile(fileId);
-        } catch (error) {
-          console.error('Failed to remove file from storage:', error);
-        }
-      });
-    }
-  }, [enablePersistence, cleanupFile]);
-
-
-  const replaceFile = useCallback(async (oldFileId: string, newFile: File) => {
-    // Remove old file and add new one
-    removeFiles([oldFileId]);
-    await addFiles([newFile]);
-  }, [removeFiles, addFiles]);
-
-  const clearAllFiles = useCallback(() => {
-    // Cleanup all memory before clearing files
-    cleanupAllFiles();
-
-    dispatch({ type: 'SET_ACTIVE_FILES', payload: [] });
-    dispatch({ type: 'CLEAR_SELECTIONS' });
-  }, [cleanupAllFiles]);
-
-  // File pinning functions
-  const pinFile = useCallback((file: File) => {
-    dispatch({ type: 'PIN_FILE', payload: file });
-  }, []);
-
-  const unpinFile = useCallback((file: File) => {
-    dispatch({ type: 'UNPIN_FILE', payload: file });
-  }, []);
-
-  const isFilePinned = useCallback((file: File): boolean => {
-    return state.pinnedFiles.has(file);
-  }, [state.pinnedFiles]);
-
-  // File consumption function
-  const consumeFiles = useCallback(async (inputFiles: File[], outputFiles: File[]): Promise<void> => {
-    dispatch({ type: 'CONSUME_FILES', payload: { inputFiles, outputFiles } });
-
-    // Store new output files if persistence is enabled
-    if (enablePersistence) {
-      for (const file of outputFiles) {
-        try {
-          const fileId = getFileId(file);
-          if (!fileId) {
-            try {
-              const thumbnail = await (thumbnailGenerationService as any /* FIX ME */).generateThumbnail(file);
-              const storedFile = await fileStorage.storeFile(file, thumbnail);
-              Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-            } catch (thumbnailError) {
-              console.warn('Failed to generate thumbnail, storing without:', thumbnailError);
-              const storedFile = await fileStorage.storeFile(file);
-              Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-            }
-          }
-        } catch (error) {
-          console.error('Failed to store output file:', error);
-        }
-      }
-    }
-  }, [enablePersistence, state.pinnedFiles]);
+  // Navigation management removed - moved to NavigationContext
 
   // Navigation guard system functions
   const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
-    dispatch({ type: 'SET_UNSAVED_CHANGES', payload: hasChanges });
+    dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
   }, []);
 
-  const requestNavigation = useCallback((navigationFn: () => void): boolean => {
-    if (state.hasUnsavedChanges) {
-      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: navigationFn });
-      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: true });
-      return false;
+  // File operations using unified addFiles helper with persistence
+  const addRawFiles = useCallback(async (files: File[]): Promise<File[]> => {
+    const addedFilesWithIds = await addFiles('raw', { files }, stateRef, filesRef, dispatch, lifecycleManager);
+    
+    // Persist to IndexedDB if enabled
+    if (indexedDB && enablePersistence && addedFilesWithIds.length > 0) {
+      await Promise.all(addedFilesWithIds.map(async ({ file, id, thumbnail }) => {
+        try {
+          await indexedDB.saveFile(file, id, thumbnail);
+        } catch (error) {
+          console.error('Failed to persist file to IndexedDB:', file.name, error);
+        }
+      }));
+    }
+    
+    return addedFilesWithIds.map(({ file }) => file);
+  }, [indexedDB, enablePersistence]);
+
+  const addProcessedFiles = useCallback(async (filesWithThumbnails: Array<{ file: File; thumbnail?: string; pageCount?: number }>): Promise<File[]> => {
+    const result = await addFiles('processed', { filesWithThumbnails }, stateRef, filesRef, dispatch, lifecycleManager);
+    return result.map(({ file }) => file);
+  }, []);
+
+  const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: any }>): Promise<File[]> => {
+    const result = await addFiles('stored', { filesWithMetadata }, stateRef, filesRef, dispatch, lifecycleManager);
+    return result.map(({ file }) => file);
+  }, []);
+
+  // Action creators
+  const baseActions = useMemo(() => createFileActions(dispatch), []);
+
+  // Helper functions for pinned files
+  const consumeFilesWrapper = useCallback(async (inputFileIds: FileId[], outputFiles: File[]): Promise<void> => {
+    return consumeFiles(inputFileIds, outputFiles, stateRef, filesRef, dispatch);
+  }, []);
+
+  // Helper to find FileId from File object
+  const findFileId = useCallback((file: File): FileId | undefined => {
+    return Object.keys(stateRef.current.files.byId).find(id => {
+      const storedFile = filesRef.current.get(id);
+      return storedFile && 
+             storedFile.name === file.name && 
+             storedFile.size === file.size && 
+             storedFile.lastModified === file.lastModified;
+    });
+  }, []);
+
+  // File-to-ID wrapper functions for pinning
+  const pinFileWrapper = useCallback((file: File) => {
+    const fileId = findFileId(file);
+    if (fileId) {
+      baseActions.pinFile(fileId);
     } else {
-      navigationFn();
-      return true;
+      console.warn('File not found for pinning:', file.name);
     }
-  }, [state.hasUnsavedChanges]);
+  }, [baseActions, findFileId]);
 
-  const confirmNavigation = useCallback(() => {
-    if (state.pendingNavigation) {
-      state.pendingNavigation();
-      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: null });
+  const unpinFileWrapper = useCallback((file: File) => {
+    const fileId = findFileId(file);
+    if (fileId) {
+      baseActions.unpinFile(fileId);
+    } else {
+      console.warn('File not found for unpinning:', file.name);
     }
-    dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: false });
-  }, [state.pendingNavigation]);
+  }, [baseActions, findFileId]);
 
-  const cancelNavigation = useCallback(() => {
-    dispatch({ type: 'SET_PENDING_NAVIGATION', payload: null });
-    dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: false });
-  }, []);
-
-  const setCurrentMode = useCallback((mode: ModeType) => {
-    requestNavigation(() => {
-      dispatch({ type: 'SET_CURRENT_MODE', payload: mode });
-
-      if (state.currentMode !== mode && state.activeFiles.length > 0) {
-        if (window.requestIdleCallback) {
-          window.requestIdleCallback(() => {
-            window.gc?.();
-          }, { timeout: 5000 });
+  // Complete actions object
+  const actions = useMemo<FileContextActions>(() => ({
+    ...baseActions,
+    addFiles: addRawFiles,
+    addProcessedFiles,
+    addStoredFiles, 
+    removeFiles: async (fileIds: FileId[], deleteFromStorage?: boolean) => {
+      // Remove from memory and cleanup resources
+      lifecycleManager.removeFiles(fileIds, stateRef);
+      
+      // Remove from IndexedDB if enabled
+      if (indexedDB && enablePersistence && deleteFromStorage !== false) {
+        try {
+          await indexedDB.deleteMultiple(fileIds);
+        } catch (error) {
+          console.error('Failed to delete files from IndexedDB:', error);
         }
       }
-    });
-  }, [requestNavigation, state.currentMode, state.activeFiles]);
-
-  const setCurrentView = useCallback((view: ViewType) => {
-    requestNavigation(() => {
-      dispatch({ type: 'SET_CURRENT_VIEW', payload: view });
-
-      if (state.currentView !== view && state.activeFiles.length > 0) {
-        if (window.requestIdleCallback) {
-          window.requestIdleCallback(() => {
-            window.gc?.();
-          }, { timeout: 5000 });
+    },
+    updateFileRecord: (fileId: FileId, updates: Partial<FileRecord>) => 
+      lifecycleManager.updateFileRecord(fileId, updates, stateRef),
+    reorderFiles: (orderedFileIds: FileId[]) => {
+      dispatch({ type: 'REORDER_FILES', payload: { orderedFileIds } });
+    },
+    clearAllFiles: async () => {
+      lifecycleManager.cleanupAllFiles();
+      filesRef.current.clear();
+      dispatch({ type: 'RESET_CONTEXT' });
+      
+      // Clear IndexedDB if enabled
+      if (indexedDB && enablePersistence) {
+        try {
+          await indexedDB.clearAll();
+        } catch (error) {
+          console.error('Failed to clear IndexedDB:', error);
         }
       }
-    });
-  }, [requestNavigation, state.currentView, state.activeFiles]);
+    },
+    // Pinned files functionality with File object wrappers
+    pinFile: pinFileWrapper,
+    unpinFile: unpinFileWrapper,
+    consumeFiles: consumeFilesWrapper,
+    setHasUnsavedChanges,
+    trackBlobUrl: lifecycleManager.trackBlobUrl,
+    cleanupFile: (fileId: string) => lifecycleManager.cleanupFile(fileId, stateRef),
+    scheduleCleanup: (fileId: string, delay?: number) => 
+      lifecycleManager.scheduleCleanup(fileId, delay, stateRef)
+  }), [
+    baseActions, 
+    addRawFiles, 
+    addProcessedFiles, 
+    addStoredFiles, 
+    lifecycleManager,
+    setHasUnsavedChanges,
+    consumeFilesWrapper,
+    pinFileWrapper,
+    unpinFileWrapper,
+    indexedDB,
+    enablePersistence
+  ]);
 
-  const setCurrentTool = useCallback((tool: ToolType) => {
-    requestNavigation(() => {
-      dispatch({ type: 'SET_CURRENT_TOOL', payload: tool });
-    });
-  }, [requestNavigation]);
+  // Split context values to minimize re-renders
+  const stateValue = useMemo<FileContextStateValue>(() => ({
+    state,
+    selectors
+  }), [state, selectors]);
 
-  const setSelectedFiles = useCallback((fileIds: string[]) => {
-    dispatch({ type: 'SET_SELECTED_FILES', payload: fileIds });
-  }, []);
+  const actionsValue = useMemo<FileContextActionsValue>(() => ({
+    actions,
+    dispatch
+  }), [actions]);
 
-  const setSelectedPages = useCallback((pageNumbers: number[]) => {
-    dispatch({ type: 'SET_SELECTED_PAGES', payload: pageNumbers });
-  }, []);
-
-  const updateProcessedFile = useCallback((file: File, processedFile: ProcessedFile) => {
-    dispatch({ type: 'UPDATE_PROCESSED_FILE', payload: { file, processedFile } });
-  }, []);
-
-  const clearSelections = useCallback(() => {
-    dispatch({ type: 'CLEAR_SELECTIONS' });
-  }, []);
-
-  const applyPageOperations = useCallback((fileId: string, operations: PageOperation[]) => {
-    dispatch({
-      type: 'ADD_PAGE_OPERATIONS',
-      payload: { fileId, operations }
-    });
-  }, []);
-
-  const applyFileOperation = useCallback((operation: FileOperation) => {
-    dispatch({ type: 'ADD_FILE_OPERATION', payload: operation });
-  }, []);
-
-  const undoLastOperation = useCallback((fileId?: string) => {
-    console.warn('Undo not yet implemented');
-  }, []);
-
-  const updateViewerConfig = useCallback((config: Partial<ViewerConfig>) => {
-    dispatch({ type: 'UPDATE_VIEWER_CONFIG', payload: config });
-  }, []);
-
-  const setExportConfig = useCallback((config: FileContextState['lastExportConfig']) => {
-    dispatch({ type: 'SET_EXPORT_CONFIG', payload: config });
-  }, []);
-
-  // Operation history management functions
-  const recordOperation = useCallback((fileId: string, operation: FileOperation | PageOperation) => {
-    dispatch({ type: 'RECORD_OPERATION', payload: { fileId, operation } });
-  }, []);
-
-  const markOperationApplied = useCallback((fileId: string, operationId: string) => {
-    dispatch({ type: 'MARK_OPERATION_APPLIED', payload: { fileId, operationId } });
-  }, []);
-
-  const markOperationFailed = useCallback((fileId: string, operationId: string, error: string) => {
-    dispatch({ type: 'MARK_OPERATION_FAILED', payload: { fileId, operationId, error } });
-  }, []);
-
-  const getFileHistory = useCallback((fileId: string): FileOperationHistory | undefined => {
-    return state.fileOperationHistory.get(fileId);
-  }, [state.fileOperationHistory]);
-
-  const getAppliedOperations = useCallback((fileId: string): (FileOperation | PageOperation)[] => {
-    const history = state.fileOperationHistory.get(fileId);
-    return history ? history.operations.filter(op => op.status === 'applied') : [];
-  }, [state.fileOperationHistory]);
-
-  const clearFileHistory = useCallback((fileId: string) => {
-    dispatch({ type: 'CLEAR_FILE_HISTORY', payload: fileId });
-  }, []);
-
-  // Utility functions
-  const getFileById = useCallback((fileId: string): File | undefined => {
-    return state.activeFiles.find(file => {
-      const actualFileId = getFileId(file);
-      return actualFileId && actualFileId === fileId;
-    });
-  }, [state.activeFiles]);
-
-  const getProcessedFileById = useCallback((fileId: string): ProcessedFile | undefined => {
-    const file = getFileById(fileId);
-    return file ? state.processedFiles.get(file) : undefined;
-  }, [getFileById, state.processedFiles]);
-
-  const getCurrentFile = useCallback((): File | undefined => {
-    if (state.selectedFileIds.length > 0) {
-      return getFileById(state.selectedFileIds[0]);
-    }
-    return state.activeFiles[0]; // Default to first file
-  }, [state.selectedFileIds, state.activeFiles, getFileById]);
-
-  const getCurrentProcessedFile = useCallback((): ProcessedFile | undefined => {
-    const file = getCurrentFile();
-    return file ? state.processedFiles.get(file) : undefined;
-  }, [getCurrentFile, state.processedFiles]);
-
-  // Context persistence
-  const saveContext = useCallback(async () => {
-    if (!enablePersistence) return;
-
-    try {
-      const contextData = {
-        currentView: state.currentView,
-        currentTool: state.currentTool,
-        selectedFileIds: state.selectedFileIds,
-        selectedPageNumbers: state.selectedPageNumbers,
-        viewerConfig: state.viewerConfig,
-        lastExportConfig: state.lastExportConfig,
-        timestamp: Date.now()
-      };
-
-      localStorage.setItem('fileContext', JSON.stringify(contextData));
-    } catch (error) {
-      console.error('Failed to save context:', error);
-    }
-  }, [state, enablePersistence]);
-
-  const loadContext = useCallback(async () => {
-    if (!enablePersistence) return;
-
-    try {
-      const saved = localStorage.getItem('fileContext');
-      if (saved) {
-        const contextData = JSON.parse(saved);
-        dispatch({ type: 'LOAD_STATE', payload: contextData });
-      }
-    } catch (error) {
-      console.error('Failed to load context:', error);
-    }
-  }, [enablePersistence]);
-
-  const resetContext = useCallback(() => {
-    dispatch({ type: 'RESET_CONTEXT' });
-    if (enablePersistence) {
-      localStorage.removeItem('fileContext');
-    }
-  }, [enablePersistence]);
-
-
-  // Auto-save context when it changes
-  useEffect(() => {
-    saveContext();
-  }, [saveContext]);
-
-  // Load context on mount
-  useEffect(() => {
-    loadContext();
-  }, [loadContext]);
+  // Persistence loading disabled - files only loaded on explicit user action
+  // useEffect(() => {
+  //   if (!enablePersistence || !indexedDB) return;
+  //   const loadFromPersistence = async () => { /* loading logic removed */ };
+  //   loadFromPersistence();
+  // }, [enablePersistence, indexedDB]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      console.log('FileContext unmounting - cleaning up all resources');
-      cleanupAllFiles();
+      if (DEBUG) console.log('FileContext unmounting - cleaning up all resources');
+      lifecycleManager.destroy();
     };
-  }, [cleanupAllFiles]);
-
-  const contextValue: FileContextValue = {
-    // State
-    ...state,
-
-    // Actions
-    addFiles,
-    removeFiles,
-    replaceFile,
-    clearAllFiles,
-    pinFile,
-    unpinFile,
-    isFilePinned,
-    consumeFiles,
-    setCurrentMode,
-    setCurrentView,
-    setCurrentTool,
-    setSelectedFiles,
-    setSelectedPages,
-    updateProcessedFile,
-    clearSelections,
-    applyPageOperations,
-    applyFileOperation,
-    undoLastOperation,
-    updateViewerConfig,
-    setExportConfig,
-    getFileById,
-    getProcessedFileById,
-    getCurrentFile,
-    getCurrentProcessedFile,
-    saveContext,
-    loadContext,
-    resetContext,
-
-    // Operation history management
-    recordOperation,
-    markOperationApplied,
-    markOperationFailed,
-    getFileHistory,
-    getAppliedOperations,
-    clearFileHistory,
-
-    // Navigation guard system
-    setHasUnsavedChanges,
-    requestNavigation,
-    confirmNavigation,
-    cancelNavigation,
-
-    // Memory management
-    trackBlobUrl,
-    trackPdfDocument,
-    cleanupFile,
-    scheduleCleanup
-  };
+  }, [lifecycleManager]);
 
   return (
-    <FileContext.Provider value={contextValue}>
-      {children}
-    </FileContext.Provider>
+    <FileStateContext.Provider value={stateValue}>
+      <FileActionsContext.Provider value={actionsValue}>
+        {children}
+      </FileActionsContext.Provider>
+    </FileStateContext.Provider>
   );
 }
 
-// Custom hook to use the context
-export function useFileContext(): FileContextValue {
-  const context = useContext(FileContext);
-  if (!context) {
-    throw new Error('useFileContext must be used within a FileContextProvider');
+// Outer provider component that wraps with IndexedDBProvider
+export function FileContextProvider({
+  children,
+  enableUrlSync = true,
+  enablePersistence = true 
+}: FileContextProviderProps) {
+  if (enablePersistence) {
+    return (
+      <IndexedDBProvider>
+        <FileContextInner 
+          enableUrlSync={enableUrlSync}
+          enablePersistence={enablePersistence}
+        >
+          {children}
+        </FileContextInner>
+      </IndexedDBProvider>
+    );
+  } else {
+    return (
+      <FileContextInner 
+        enableUrlSync={enableUrlSync}
+        enablePersistence={enablePersistence}
+      >
+        {children}
+      </FileContextInner>
+    );
   }
-  return context;
 }
 
-// Helper hooks for specific aspects
-export function useCurrentFile() {
-  const { getCurrentFile, getCurrentProcessedFile } = useFileContext();
-  return {
-    file: getCurrentFile(),
-    processedFile: getCurrentProcessedFile()
-  };
-}
-
-export function useFileSelection() {
-  const {
-    selectedFileIds,
-    selectedPageNumbers,
-    setSelectedFiles,
-    setSelectedPages,
-    clearSelections
-  } = useFileContext();
-
-  return {
-    selectedFileIds,
-    selectedPageNumbers,
-    setSelectedFiles,
-    setSelectedPages,
-    clearSelections
-  };
-}
-
-export function useViewerState() {
-  const { viewerConfig, updateViewerConfig } = useFileContext();
-  return {
-    config: viewerConfig,
-    updateConfig: updateViewerConfig
-  };
-}
+// Export all hooks from the fileHooks module
+export {
+  useFileState,
+  useFileActions,
+  useCurrentFile,
+  useFileSelection,
+  useFileManagement,
+  useFileUI,
+  useFileRecord,
+  useAllFiles,
+  useSelectedFiles,
+  // Primary API hooks for tools
+  useFileContext
+} from './file/fileHooks';
\ No newline at end of file
diff --git a/frontend/src/contexts/FileManagerContext.tsx b/frontend/src/contexts/FileManagerContext.tsx
index 4115e873d..28b3d52df 100644
--- a/frontend/src/contexts/FileManagerContext.tsx
+++ b/frontend/src/contexts/FileManagerContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
-import { FileWithUrl } from '../types/file';
+import React, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { FileMetadata } from '../types/file';
 import { StoredFile, fileStorage } from '../services/fileStorage';
 import { downloadFiles } from '../utils/downloadUtils';
 
@@ -9,27 +9,27 @@ interface FileManagerContextValue {
   activeSource: 'recent' | 'local' | 'drive';
   selectedFileIds: string[];
   searchTerm: string;
-  selectedFiles: FileWithUrl[];
-  filteredFiles: FileWithUrl[];
+  selectedFiles: FileMetadata[];
+  filteredFiles: FileMetadata[];
   fileInputRef: React.RefObject<HTMLInputElement | null>;
   selectedFilesSet: Set<string>;
 
   // Handlers
   onSourceChange: (source: 'recent' | 'local' | 'drive') => void;
   onLocalFileClick: () => void;
-  onFileSelect: (file: FileWithUrl, index: number, shiftKey?: boolean) => void;
+  onFileSelect: (file: FileMetadata, index: number, shiftKey?: boolean) => void;
   onFileRemove: (index: number) => void;
-  onFileDoubleClick: (file: FileWithUrl) => void;
+  onFileDoubleClick: (file: FileMetadata) => void;
   onOpenFiles: () => void;
   onSearchChange: (value: string) => void;
   onFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onSelectAll: () => void;
   onDeleteSelected: () => void;
   onDownloadSelected: () => void;
-  onDownloadSingle: (file: FileWithUrl) => void;
+  onDownloadSingle: (file: FileMetadata) => void;
 
   // External props
-  recentFiles: FileWithUrl[];
+  recentFiles: FileMetadata[];
   isFileSupported: (fileName: string) => boolean;
   modalHeight: string;
 }
@@ -40,14 +40,14 @@ const FileManagerContext = createContext<FileManagerContextValue | null>(null);
 // Provider component props
 interface FileManagerProviderProps {
   children: React.ReactNode;
-  recentFiles: FileWithUrl[];
-  onFilesSelected: (files: FileWithUrl[]) => void;
+  recentFiles: FileMetadata[];
+  onFilesSelected: (files: FileMetadata[]) => void; // For selecting stored files
+  onNewFilesSelect: (files: File[]) => void; // For uploading new local files
   onClose: () => void;
   isFileSupported: (fileName: string) => boolean;
   isOpen: boolean;
   onFileRemove: (index: number) => void;
   modalHeight: string;
-  storeFile: (file: File) => Promise<StoredFile>;
   refreshRecentFiles: () => Promise<void>;
 }
 
@@ -55,12 +55,12 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   children,
   recentFiles,
   onFilesSelected,
+  onNewFilesSelect,
   onClose,
   isFileSupported,
   isOpen,
   onFileRemove,
   modalHeight,
-  storeFile,
   refreshRecentFiles,
 }) => {
   const [activeSource, setActiveSource] = useState<'recent' | 'local' | 'drive'>('recent');
@@ -76,7 +76,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   const selectedFilesSet = new Set(selectedFileIds);
   
   const selectedFiles = selectedFileIds.length === 0 ? [] : 
-    (recentFiles || []).filter(file => selectedFilesSet.has(file.id || file.name));
+    (recentFiles || []).filter(file => selectedFilesSet.has(file.id));
   
   const filteredFiles = !searchTerm ? recentFiles || [] :
     (recentFiles || []).filter(file =>
@@ -96,8 +96,8 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileSelect = useCallback((file: FileWithUrl, currentIndex: number, shiftKey?: boolean) => {
-    const fileId = file.id || file.name;
+  const handleFileSelect = useCallback((file: FileMetadata, currentIndex: number, shiftKey?: boolean) => {
+    const fileId = file.id;
     if (!fileId) return;
     
     if (shiftKey && lastClickedIndex !== null) {
@@ -110,7 +110,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
         
         // Add all files in the range to selection
         for (let i = startIndex; i <= endIndex; i++) {
-          const rangeFileId = filteredFiles[i]?.id || filteredFiles[i]?.name;
+          const rangeFileId = filteredFiles[i]?.id;
           if (rangeFileId) {
             selectedSet.add(rangeFileId);
           }
@@ -145,7 +145,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     onFileRemove(index);
   }, [filteredFiles, onFileRemove]);
 
-  const handleFileDoubleClick = useCallback((file: FileWithUrl) => {
+  const handleFileDoubleClick = useCallback((file: FileMetadata) => {
     if (isFileSupported(file.name)) {
       onFilesSelected([file]);
       onClose();
@@ -167,22 +167,8 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     const files = Array.from(event.target.files || []);
     if (files.length > 0) {
       try {
-        // Create FileWithUrl objects - FileContext will handle storage and ID assignment
-        const fileWithUrls = files.map(file => {
-          const url = URL.createObjectURL(file);
-          createdBlobUrls.current.add(url);
-
-          return {
-            // No ID assigned here - FileContext will handle storage and ID assignment
-            name: file.name,
-            file,
-            url,
-            size: file.size,
-            lastModified: file.lastModified,
-          };
-        });
-
-        onFilesSelected(fileWithUrls as any /* FIX ME */);
+        // For local file uploads, pass File objects directly to FileContext
+        onNewFilesSelect(files);
         await refreshRecentFiles();
         onClose();
       } catch (error) {
@@ -190,7 +176,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
       }
     }
     event.target.value = '';
-  }, [storeFile, onFilesSelected, refreshRecentFiles, onClose]);
+  }, [onNewFilesSelect, refreshRecentFiles, onClose]);
 
   const handleSelectAll = useCallback(() => {
     const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
@@ -200,7 +186,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
       setLastClickedIndex(null);
     } else {
       // Select all filtered files
-      setSelectedFileIds(filteredFiles.map(file => file.id || file.name));
+      setSelectedFileIds(filteredFiles.map(file => file.id).filter(Boolean));
       setLastClickedIndex(null);
     }
   }, [filteredFiles, selectedFileIds]);
@@ -211,13 +197,12 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     try {
       // Get files to delete based on current filtered view
       const filesToDelete = filteredFiles.filter(file => 
-        selectedFileIds.includes(file.id || file.name)
+        selectedFileIds.includes(file.id)
       );
 
       // Delete files from storage
       for (const file of filesToDelete) {
-        const lookupKey = file.id || file.name;
-        await fileStorage.deleteFile(lookupKey);
+        await fileStorage.deleteFile(file.id);
       }
 
       // Clear selection
@@ -237,7 +222,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     try {
       // Get selected files
       const selectedFilesToDownload = filteredFiles.filter(file => 
-        selectedFileIds.includes(file.id || file.name)
+        selectedFileIds.includes(file.id)
       );
 
       // Use generic download utility
@@ -249,7 +234,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     }
   }, [selectedFileIds, filteredFiles]);
 
-  const handleDownloadSingle = useCallback(async (file: FileWithUrl) => {
+  const handleDownloadSingle = useCallback(async (file: FileMetadata) => {
     try {
       await downloadFiles([file]);
     } catch (error) {
@@ -279,7 +264,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     }
   }, [isOpen]);
 
-  const contextValue: FileManagerContextValue = {
+  const contextValue: FileManagerContextValue = useMemo(() => ({
     // State
     activeSource,
     selectedFileIds,
@@ -307,7 +292,28 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     recentFiles,
     isFileSupported,
     modalHeight,
-  };
+  }), [
+    activeSource,
+    selectedFileIds,
+    searchTerm,
+    selectedFiles,
+    filteredFiles,
+    fileInputRef,
+    handleSourceChange,
+    handleLocalFileClick,
+    handleFileSelect,
+    handleFileRemove,
+    handleFileDoubleClick,
+    handleOpenFiles,
+    handleSearchChange,
+    handleFileInputChange,
+    handleSelectAll,
+    handleDeleteSelected,
+    handleDownloadSelected,
+    recentFiles,
+    isFileSupported,
+    modalHeight,
+  ]);
 
   return (
     <FileManagerContext.Provider value={contextValue}>
diff --git a/frontend/src/contexts/FileSelectionContext.tsx b/frontend/src/contexts/FileSelectionContext.tsx
deleted file mode 100644
index a0169b7ab..000000000
--- a/frontend/src/contexts/FileSelectionContext.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react';
-import {
-  MaxFiles,
-  FileSelectionContextValue
-} from '../types/tool';
-import { useFileContext } from './FileContext';
-
-interface FileSelectionProviderProps {
-  children: ReactNode;
-}
-
-const FileSelectionContext = createContext<FileSelectionContextValue | undefined>(undefined);
-
-export function FileSelectionProvider({ children }: FileSelectionProviderProps) {
-  const { activeFiles } = useFileContext();
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [maxFiles, setMaxFiles] = useState<MaxFiles>(-1);
-  const [isToolMode, setIsToolMode] = useState<boolean>(false);
-
-  // Sync selected files with active files - remove any selected files that are no longer active
-  useEffect(() => {
-    if (selectedFiles.length > 0) {
-      const activeFileSet = new Set(activeFiles);
-      const validSelectedFiles = selectedFiles.filter(file => activeFileSet.has(file));
-      
-      if (validSelectedFiles.length !== selectedFiles.length) {
-        setSelectedFiles(validSelectedFiles);
-      }
-    }
-  }, [activeFiles, selectedFiles]);
-
-  const clearSelection = useCallback(() => {
-    setSelectedFiles([]);
-  }, []);
-
-  const selectionCount = selectedFiles.length;
-  const canSelectMore = maxFiles === -1 || selectionCount < maxFiles;
-  const isAtLimit = maxFiles > 0 && selectionCount >= maxFiles;
-  const isMultiFileMode = maxFiles !== 1;
-
-  const contextValue: FileSelectionContextValue = {
-    selectedFiles,
-    maxFiles,
-    isToolMode,
-    setSelectedFiles,
-    setMaxFiles,
-    setIsToolMode,
-    clearSelection,
-    canSelectMore,
-    isAtLimit,
-    selectionCount,
-    isMultiFileMode
-  };
-
-  return (
-    <FileSelectionContext.Provider value={contextValue}>
-      {children}
-    </FileSelectionContext.Provider>
-  );
-}
-
-/**
- * Access the file selection context.
- * Throws if used outside a <FileSelectionProvider>.
- */
-export function useFileSelection(): FileSelectionContextValue {
-  const context = useContext(FileSelectionContext);
-  if (!context) {
-    throw new Error('useFileSelection must be used within a FileSelectionProvider');
-  }
-  return context;
-}
-
-// Returns only the file selection values relevant for tools (e.g. merge, split, etc.)
-// Use this in tool panels/components that need to know which files are selected and selection limits.
-export function useToolFileSelection(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'canSelectMore' | 'isAtLimit' | 'selectionCount'> {
-  const { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount } = useFileSelection();
-  return { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount };
-}
-
-// Returns actions for manipulating file selection state.
-// Use this in components that need to update the selection, clear it, or change selection mode.
-export function useFileSelectionActions(): Pick<FileSelectionContextValue, 'setSelectedFiles' | 'clearSelection' | 'setMaxFiles' | 'setIsToolMode'> {
-  const { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode } = useFileSelection();
-  return { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode };
-}
-
-// Returns the raw file selection state (selected files, max files, tool mode).
-// Use this for low-level state access, e.g. in context-aware UI.
-export function useFileSelectionState(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'isToolMode'> {
-  const { selectedFiles, maxFiles, isToolMode } = useFileSelection();
-  return { selectedFiles, maxFiles, isToolMode };
-}
-
-// Returns computed values derived from file selection state.
-// Use this for file selection UI logic (e.g. disabling buttons when at limit).
-export function useFileSelectionComputed(): Pick<FileSelectionContextValue, 'canSelectMore' | 'isAtLimit' | 'selectionCount' | 'isMultiFileMode'> {
-  const { canSelectMore, isAtLimit, selectionCount, isMultiFileMode } = useFileSelection();
-  return { canSelectMore, isAtLimit, selectionCount, isMultiFileMode };
-}
diff --git a/frontend/src/contexts/FilesModalContext.tsx b/frontend/src/contexts/FilesModalContext.tsx
index 25e6800a0..d7183eabf 100644
--- a/frontend/src/contexts/FilesModalContext.tsx
+++ b/frontend/src/contexts/FilesModalContext.tsx
@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { useFileHandler } from '../hooks/useFileHandler';
+import { FileMetadata } from '../types/file';
 
 interface FilesModalContextType {
   isFilesModalOpen: boolean;
@@ -7,6 +8,7 @@ interface FilesModalContextType {
   closeFilesModal: () => void;
   onFileSelect: (file: File) => void;
   onFilesSelect: (files: File[]) => void;
+  onStoredFilesSelect: (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => void;
   onModalClose?: () => void;
   setOnModalClose: (callback: () => void) => void;
 }
@@ -14,7 +16,7 @@ interface FilesModalContextType {
 const FilesModalContext = createContext<FilesModalContextType | null>(null);
 
 export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { addToActiveFiles, addMultipleFiles } = useFileHandler();
+  const { addToActiveFiles, addMultipleFiles, addStoredFiles } = useFileHandler();
   const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
   const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
 
@@ -37,19 +39,34 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
     closeFilesModal();
   }, [addMultipleFiles, closeFilesModal]);
 
+  const handleStoredFilesSelect = useCallback((filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => {
+    addStoredFiles(filesWithMetadata);
+    closeFilesModal();
+  }, [addStoredFiles, closeFilesModal]);
+
   const setModalCloseCallback = useCallback((callback: () => void) => {
     setOnModalClose(() => callback);
   }, []);
 
-  const contextValue: FilesModalContextType = {
+  const contextValue: FilesModalContextType = useMemo(() => ({
     isFilesModalOpen,
     openFilesModal,
     closeFilesModal,
     onFileSelect: handleFileSelect,
     onFilesSelect: handleFilesSelect,
+    onStoredFilesSelect: handleStoredFilesSelect,
     onModalClose,
     setOnModalClose: setModalCloseCallback,
-  };
+  }), [
+    isFilesModalOpen,
+    openFilesModal,
+    closeFilesModal,
+    handleFileSelect,
+    handleFilesSelect,
+    handleStoredFilesSelect,
+    onModalClose,
+    setModalCloseCallback,
+  ]);
 
   return (
     <FilesModalContext.Provider value={contextValue}>
diff --git a/frontend/src/contexts/IndexedDBContext.tsx b/frontend/src/contexts/IndexedDBContext.tsx
new file mode 100644
index 000000000..a09070403
--- /dev/null
+++ b/frontend/src/contexts/IndexedDBContext.tsx
@@ -0,0 +1,207 @@
+/**
+ * IndexedDBContext - Clean persistence layer for file storage
+ * Integrates with FileContext to provide transparent file persistence
+ */
+
+import React, { createContext, useContext, useCallback, useRef } from 'react';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+import { fileStorage, StoredFile } from '../services/fileStorage';
+import { FileId } from '../types/fileContext';
+import { FileMetadata } from '../types/file';
+import { generateThumbnailForFile } from '../utils/thumbnailUtils';
+
+interface IndexedDBContextValue {
+  // Core CRUD operations
+  saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<FileMetadata>;
+  loadFile: (fileId: FileId) => Promise<File | null>;
+  loadMetadata: (fileId: FileId) => Promise<FileMetadata | null>;
+  deleteFile: (fileId: FileId) => Promise<void>;
+  
+  // Batch operations
+  loadAllMetadata: () => Promise<FileMetadata[]>;
+  deleteMultiple: (fileIds: FileId[]) => Promise<void>;
+  clearAll: () => Promise<void>;
+  
+  // Utilities
+  getStorageStats: () => Promise<{ used: number; available: number; fileCount: number }>;
+  updateThumbnail: (fileId: FileId, thumbnail: string) => Promise<boolean>;
+}
+
+const IndexedDBContext = createContext<IndexedDBContextValue | null>(null);
+
+interface IndexedDBProviderProps {
+  children: React.ReactNode;
+}
+
+export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
+  // LRU File cache to avoid repeated ArrayBuffer→File conversions
+  const fileCache = useRef(new Map<FileId, { file: File; lastAccessed: number }>());
+  const MAX_CACHE_SIZE = 50; // Maximum number of files to cache
+
+  // LRU cache management
+  const evictLRUEntries = useCallback(() => {
+    if (fileCache.current.size <= MAX_CACHE_SIZE) return;
+
+    // Convert to array and sort by last accessed time (oldest first)
+    const entries = Array.from(fileCache.current.entries())
+      .sort(([, a], [, b]) => a.lastAccessed - b.lastAccessed);
+
+    // Remove the least recently used entries
+    const toRemove = entries.slice(0, fileCache.current.size - MAX_CACHE_SIZE);
+    toRemove.forEach(([fileId]) => {
+      fileCache.current.delete(fileId);
+    });
+
+    if (DEBUG) console.log(`🗂️ Evicted ${toRemove.length} LRU cache entries`);
+  }, []);
+
+  const saveFile = useCallback(async (file: File, fileId: FileId, existingThumbnail?: string): Promise<FileMetadata> => {
+    // Use existing thumbnail or generate new one if none provided
+    const thumbnail = existingThumbnail || await generateThumbnailForFile(file);
+    
+    // Store in IndexedDB
+    const storedFile = await fileStorage.storeFile(file, fileId, thumbnail);
+    
+    // Cache the file object for immediate reuse
+    fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
+    evictLRUEntries();
+    
+    // Return metadata
+    return {
+      id: fileId,
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      lastModified: file.lastModified,
+      thumbnail
+    };
+  }, []);
+
+  const loadFile = useCallback(async (fileId: FileId): Promise<File | null> => {
+    // Check cache first
+    const cached = fileCache.current.get(fileId);
+    if (cached) {
+      // Update last accessed time for LRU
+      cached.lastAccessed = Date.now();
+      return cached.file;
+    }
+
+    // Load from IndexedDB
+    const storedFile = await fileStorage.getFile(fileId);
+    if (!storedFile) return null;
+
+    // Reconstruct File object
+    const file = new File([storedFile.data], storedFile.name, {
+      type: storedFile.type,
+      lastModified: storedFile.lastModified
+    });
+
+    // Cache for future use with LRU eviction
+    fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
+    evictLRUEntries();
+
+    return file;
+  }, [evictLRUEntries]);
+
+  const loadMetadata = useCallback(async (fileId: FileId): Promise<FileMetadata | null> => {
+    // Try to get from cache first (no IndexedDB hit)
+    const cached = fileCache.current.get(fileId);
+    if (cached) {
+      const file = cached.file;
+      return {
+        id: fileId,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        lastModified: file.lastModified
+      };
+    }
+
+    // Load metadata from IndexedDB (efficient - no data field)
+    const metadata = await fileStorage.getAllFileMetadata();
+    const fileMetadata = metadata.find(m => m.id === fileId);
+    
+    if (!fileMetadata) return null;
+
+    return {
+      id: fileMetadata.id,
+      name: fileMetadata.name,
+      type: fileMetadata.type,
+      size: fileMetadata.size,
+      lastModified: fileMetadata.lastModified,
+      thumbnail: fileMetadata.thumbnail
+    };
+  }, []);
+
+  const deleteFile = useCallback(async (fileId: FileId): Promise<void> => {
+    // Remove from cache
+    fileCache.current.delete(fileId);
+    
+    // Remove from IndexedDB
+    await fileStorage.deleteFile(fileId);
+  }, []);
+
+  const loadAllMetadata = useCallback(async (): Promise<FileMetadata[]> => {
+    const metadata = await fileStorage.getAllFileMetadata();
+    
+    return metadata.map(m => ({
+      id: m.id,
+      name: m.name,
+      type: m.type,
+      size: m.size,
+      lastModified: m.lastModified,
+      thumbnail: m.thumbnail
+    }));
+  }, []);
+
+  const deleteMultiple = useCallback(async (fileIds: FileId[]): Promise<void> => {
+    // Remove from cache
+    fileIds.forEach(id => fileCache.current.delete(id));
+    
+    // Remove from IndexedDB in parallel
+    await Promise.all(fileIds.map(id => fileStorage.deleteFile(id)));
+  }, []);
+
+  const clearAll = useCallback(async (): Promise<void> => {
+    // Clear cache
+    fileCache.current.clear();
+    
+    // Clear IndexedDB
+    await fileStorage.clearAll();
+  }, []);
+
+  const getStorageStats = useCallback(async () => {
+    return await fileStorage.getStorageStats();
+  }, []);
+
+  const updateThumbnail = useCallback(async (fileId: FileId, thumbnail: string): Promise<boolean> => {
+    return await fileStorage.updateThumbnail(fileId, thumbnail);
+  }, []);
+
+  const value: IndexedDBContextValue = {
+    saveFile,
+    loadFile,
+    loadMetadata,
+    deleteFile,
+    loadAllMetadata,
+    deleteMultiple,
+    clearAll,
+    getStorageStats,
+    updateThumbnail
+  };
+
+  return (
+    <IndexedDBContext.Provider value={value}>
+      {children}
+    </IndexedDBContext.Provider>
+  );
+}
+
+export function useIndexedDB() {
+  const context = useContext(IndexedDBContext);
+  if (!context) {
+    throw new Error('useIndexedDB must be used within an IndexedDBProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/NavigationContext.tsx b/frontend/src/contexts/NavigationContext.tsx
new file mode 100644
index 000000000..c85eef158
--- /dev/null
+++ b/frontend/src/contexts/NavigationContext.tsx
@@ -0,0 +1,231 @@
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+import { useNavigationUrlSync } from '../hooks/useUrlSync';
+
+/**
+ * NavigationContext - Complete navigation management system
+ * 
+ * Handles navigation modes, navigation guards for unsaved changes,
+ * and breadcrumb/history navigation. Separated from FileContext to 
+ * maintain clear separation of concerns.
+ */
+
+// Navigation mode types - complete list to match fileContext.ts
+export type ModeType =
+  | 'viewer'
+  | 'pageEditor'
+  | 'fileEditor'
+  | 'merge'
+  | 'split'
+  | 'compress'
+  | 'ocr'
+  | 'convert'
+  | 'sanitize'
+  | 'addPassword'
+  | 'changePermissions'
+  | 'addWatermark'
+  | 'removePassword'
+  | 'single-large-page'
+  | 'repair'
+  | 'unlockPdfForms'
+  | 'removeCertificateSign';
+
+// Navigation state
+interface NavigationState {
+  currentMode: ModeType;
+  hasUnsavedChanges: boolean;
+  pendingNavigation: (() => void) | null;
+  showNavigationWarning: boolean;
+}
+
+// Navigation actions
+type NavigationAction =
+  | { type: 'SET_MODE'; payload: { mode: ModeType } }
+  | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
+  | { type: 'SET_PENDING_NAVIGATION'; payload: { navigationFn: (() => void) | null } }
+  | { type: 'SHOW_NAVIGATION_WARNING'; payload: { show: boolean } };
+
+// Navigation reducer
+const navigationReducer = (state: NavigationState, action: NavigationAction): NavigationState => {
+  switch (action.type) {
+    case 'SET_MODE':
+      return { ...state, currentMode: action.payload.mode };
+    
+    case 'SET_UNSAVED_CHANGES':
+      return { ...state, hasUnsavedChanges: action.payload.hasChanges };
+    
+    case 'SET_PENDING_NAVIGATION':
+      return { ...state, pendingNavigation: action.payload.navigationFn };
+    
+    case 'SHOW_NAVIGATION_WARNING':
+      return { ...state, showNavigationWarning: action.payload.show };
+    
+    default:
+      return state;
+  }
+};
+
+// Initial state
+const initialState: NavigationState = {
+  currentMode: 'pageEditor',
+  hasUnsavedChanges: false,
+  pendingNavigation: null,
+  showNavigationWarning: false
+};
+
+// Navigation context actions interface
+export interface NavigationContextActions {
+  setMode: (mode: ModeType) => void;
+  setHasUnsavedChanges: (hasChanges: boolean) => void;
+  showNavigationWarning: (show: boolean) => void;
+  requestNavigation: (navigationFn: () => void) => void;
+  confirmNavigation: () => void;
+  cancelNavigation: () => void;
+}
+
+// Split context values
+export interface NavigationContextStateValue {
+  currentMode: ModeType;
+  hasUnsavedChanges: boolean;
+  pendingNavigation: (() => void) | null;
+  showNavigationWarning: boolean;
+}
+
+export interface NavigationContextActionsValue {
+  actions: NavigationContextActions;
+}
+
+// Create contexts
+const NavigationStateContext = createContext<NavigationContextStateValue | undefined>(undefined);
+const NavigationActionsContext = createContext<NavigationContextActionsValue | undefined>(undefined);
+
+// Provider component
+export const NavigationProvider: React.FC<{ 
+  children: React.ReactNode;
+  enableUrlSync?: boolean;
+}> = ({ children, enableUrlSync = true }) => {
+  const [state, dispatch] = useReducer(navigationReducer, initialState);
+
+  const actions: NavigationContextActions = {
+    setMode: useCallback((mode: ModeType) => {
+      dispatch({ type: 'SET_MODE', payload: { mode } });
+    }, []),
+
+    setHasUnsavedChanges: useCallback((hasChanges: boolean) => {
+      dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
+    }, []),
+
+    showNavigationWarning: useCallback((show: boolean) => {
+      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show } });
+    }, []),
+
+    requestNavigation: useCallback((navigationFn: () => void) => {
+      // If no unsaved changes, navigate immediately
+      if (!state.hasUnsavedChanges) {
+        navigationFn();
+        return;
+      }
+
+      // Otherwise, store the navigation and show warning
+      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn } });
+      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+    }, [state.hasUnsavedChanges]),
+
+    confirmNavigation: useCallback(() => {
+      // Execute pending navigation
+      if (state.pendingNavigation) {
+        state.pendingNavigation();
+      }
+      
+      // Clear navigation state
+      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
+      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
+    }, [state.pendingNavigation]),
+
+    cancelNavigation: useCallback(() => {
+      // Clear navigation without executing
+      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
+      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
+    }, [])
+  };
+
+  const stateValue: NavigationContextStateValue = {
+    currentMode: state.currentMode,
+    hasUnsavedChanges: state.hasUnsavedChanges,
+    pendingNavigation: state.pendingNavigation,
+    showNavigationWarning: state.showNavigationWarning
+  };
+
+  const actionsValue: NavigationContextActionsValue = {
+    actions
+  };
+
+  // Enable URL synchronization
+  useNavigationUrlSync(state.currentMode, actions.setMode, enableUrlSync);
+
+  return (
+    <NavigationStateContext.Provider value={stateValue}>
+      <NavigationActionsContext.Provider value={actionsValue}>
+        {children}
+      </NavigationActionsContext.Provider>
+    </NavigationStateContext.Provider>
+  );
+};
+
+// Navigation hooks
+export const useNavigationState = () => {
+  const context = useContext(NavigationStateContext);
+  if (context === undefined) {
+    throw new Error('useNavigationState must be used within NavigationProvider');
+  }
+  return context;
+};
+
+export const useNavigationActions = () => {
+  const context = useContext(NavigationActionsContext);
+  if (context === undefined) {
+    throw new Error('useNavigationActions must be used within NavigationProvider');
+  }
+  return context;
+};
+
+// Combined hook for convenience
+export const useNavigation = () => {
+  const state = useNavigationState();
+  const { actions } = useNavigationActions();
+  return { ...state, ...actions };
+};
+
+// Navigation guard hook (equivalent to old useFileNavigation)
+export const useNavigationGuard = () => {
+  const state = useNavigationState();
+  const { actions } = useNavigationActions();
+  
+  return {
+    pendingNavigation: state.pendingNavigation,
+    showNavigationWarning: state.showNavigationWarning,
+    hasUnsavedChanges: state.hasUnsavedChanges,
+    requestNavigation: actions.requestNavigation,
+    confirmNavigation: actions.confirmNavigation,
+    cancelNavigation: actions.cancelNavigation,
+    setHasUnsavedChanges: actions.setHasUnsavedChanges,
+    setShowNavigationWarning: actions.showNavigationWarning
+  };
+};
+
+// Utility functions for mode handling
+export const isValidMode = (mode: string): mode is ModeType => {
+  const validModes: ModeType[] = [
+    'viewer', 'pageEditor', 'fileEditor', 'merge', 'split', 
+    'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 'sanitize'
+  ];
+  return validModes.includes(mode as ModeType);
+};
+
+export const getDefaultMode = (): ModeType => 'pageEditor';
+
+// TODO: This will be expanded for URL-based routing system
+// - URL parsing utilities
+// - Route definitions  
+// - Navigation hooks with URL sync
+// - History management
+// - Breadcrumb restoration from URL params
\ No newline at end of file
diff --git a/frontend/src/contexts/SidebarContext.tsx b/frontend/src/contexts/SidebarContext.tsx
index f09815c5c..64315fd45 100644
--- a/frontend/src/contexts/SidebarContext.tsx
+++ b/frontend/src/contexts/SidebarContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef } from 'react';
+import React, { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from '../types/sidebar';
 
 const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
@@ -12,24 +12,24 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
   const [readerMode, setReaderMode] = useState(false);
 
-  const sidebarState: SidebarState = {
+  const sidebarState: SidebarState = useMemo(() => ({
     sidebarsVisible,
     leftPanelView,
     readerMode,
-  };
+  }), [sidebarsVisible, leftPanelView, readerMode]);
 
-  const sidebarRefs: SidebarRefs = {
+  const sidebarRefs: SidebarRefs = useMemo(() => ({
     quickAccessRef,
     toolPanelRef,
-  };
+  }), [quickAccessRef, toolPanelRef]);
 
-  const contextValue: SidebarContextValue = {
+  const contextValue: SidebarContextValue = useMemo(() => ({
     sidebarState,
     sidebarRefs,
     setSidebarsVisible,
     setLeftPanelView,
     setReaderMode,
-  };
+  }), [sidebarState, sidebarRefs, setSidebarsVisible, setLeftPanelView, setReaderMode]);
 
   return (
     <SidebarContext.Provider value={contextValue}>
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 637906a22..4ca66e61c 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -7,6 +7,7 @@ import React, { createContext, useContext, useReducer, useCallback, useMemo } fr
 import { useToolManagement } from '../hooks/useToolManagement';
 import { PageEditorFunctions } from '../types/pageEditor';
 import { ToolRegistryEntry } from '../data/toolsTaxonomy';
+import { useToolWorkflowUrlSync } from '../hooks/useUrlSync';
 
 // State interface
 interface ToolWorkflowState {
@@ -101,9 +102,11 @@ interface ToolWorkflowProviderProps {
   children: React.ReactNode;
   /** Handler for view changes (passed from parent) */
   onViewChange?: (view: string) => void;
+  /** Enable URL synchronization for tool selection */
+  enableUrlSync?: boolean;
 }
 
-export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowProviderProps) {
+export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = true }: ToolWorkflowProviderProps) {
   const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
 
   // Tool management hook
@@ -182,6 +185,9 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro
     [state.sidebarsVisible, state.readerMode]
   );
 
+  // Enable URL synchronization for tool selection
+  useToolWorkflowUrlSync(selectedToolKey, selectTool, clearToolSelection, enableUrlSync);
+
   // Simple context value with basic memoization
   const contextValue = useMemo((): ToolWorkflowContextValue => ({
     // State
diff --git a/frontend/src/contexts/file/FileReducer.ts b/frontend/src/contexts/file/FileReducer.ts
new file mode 100644
index 000000000..0fbec6da0
--- /dev/null
+++ b/frontend/src/contexts/file/FileReducer.ts
@@ -0,0 +1,240 @@
+/**
+ * FileContext reducer - Pure state management for file operations
+ */
+
+import { 
+  FileContextState, 
+  FileContextAction, 
+  FileId, 
+  FileRecord
+} from '../../types/fileContext';
+
+// Initial state
+export const initialFileContextState: FileContextState = {
+  files: {
+    ids: [],
+    byId: {}
+  },
+  pinnedFiles: new Set(),
+  ui: {
+    selectedFileIds: [],
+    selectedPageNumbers: [],
+    isProcessing: false,
+    processingProgress: 0,
+    hasUnsavedChanges: false
+  }
+};
+
+// Pure reducer function
+export function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
+  switch (action.type) {
+    case 'ADD_FILES': {
+      const { fileRecords } = action.payload;
+      const newIds: FileId[] = [];
+      const newById: Record<FileId, FileRecord> = { ...state.files.byId };
+      
+      fileRecords.forEach(record => {
+        // Only add if not already present (dedupe by stable ID)
+        if (!newById[record.id]) {
+          newIds.push(record.id);
+          newById[record.id] = record;
+        }
+      });
+      
+      return {
+        ...state,
+        files: {
+          ids: [...state.files.ids, ...newIds],
+          byId: newById
+        }
+      };
+    }
+    
+    case 'REMOVE_FILES': {
+      const { fileIds } = action.payload;
+      const remainingIds = state.files.ids.filter(id => !fileIds.includes(id));
+      const newById = { ...state.files.byId };
+      
+      // Remove files from state (resource cleanup handled by lifecycle manager)
+      fileIds.forEach(id => {
+        delete newById[id];
+      });
+      
+      // Clear selections that reference removed files
+      const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !fileIds.includes(id));
+      
+      return {
+        ...state,
+        files: {
+          ids: remainingIds,
+          byId: newById
+        },
+        ui: {
+          ...state.ui,
+          selectedFileIds: validSelectedFileIds
+        }
+      };
+    }
+    
+    case 'UPDATE_FILE_RECORD': {
+      const { id, updates } = action.payload;
+      const existingRecord = state.files.byId[id];
+      
+      if (!existingRecord) {
+        return state; // File doesn't exist, no-op
+      }
+      
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          byId: {
+            ...state.files.byId,
+            [id]: {
+              ...existingRecord,
+              ...updates
+            }
+          }
+        }
+      };
+    }
+    
+    case 'REORDER_FILES': {
+      const { orderedFileIds } = action.payload;
+      
+      // Validate that all IDs exist in current state
+      const validIds = orderedFileIds.filter(id => state.files.byId[id]);
+      
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          ids: validIds
+        }
+      };
+    }
+    
+    case 'SET_SELECTED_FILES': {
+      const { fileIds } = action.payload;
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          selectedFileIds: fileIds
+        }
+      };
+    }
+    
+    case 'SET_SELECTED_PAGES': {
+      const { pageNumbers } = action.payload;
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          selectedPageNumbers: pageNumbers
+        }
+      };
+    }
+    
+    case 'CLEAR_SELECTIONS': {
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          selectedFileIds: [],
+          selectedPageNumbers: []
+        }
+      };
+    }
+    
+    case 'SET_PROCESSING': {
+      const { isProcessing, progress } = action.payload;
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          isProcessing,
+          processingProgress: progress
+        }
+      };
+    }
+    
+    case 'SET_UNSAVED_CHANGES': {
+      return {
+        ...state,
+        ui: {
+          ...state.ui,
+          hasUnsavedChanges: action.payload.hasChanges
+        }
+      };
+    }
+    
+    case 'PIN_FILE': {
+      const { fileId } = action.payload;
+      const newPinnedFiles = new Set(state.pinnedFiles);
+      newPinnedFiles.add(fileId);
+      
+      return {
+        ...state,
+        pinnedFiles: newPinnedFiles
+      };
+    }
+    
+    case 'UNPIN_FILE': {
+      const { fileId } = action.payload;
+      const newPinnedFiles = new Set(state.pinnedFiles);
+      newPinnedFiles.delete(fileId);
+      
+      return {
+        ...state,
+        pinnedFiles: newPinnedFiles
+      };
+    }
+    
+    case 'CONSUME_FILES': {
+      const { inputFileIds, outputFileRecords } = action.payload;
+      
+      // Only remove unpinned input files
+      const unpinnedInputIds = inputFileIds.filter(id => !state.pinnedFiles.has(id));
+      const remainingIds = state.files.ids.filter(id => !unpinnedInputIds.includes(id));
+      
+      // Remove unpinned files from state
+      const newById = { ...state.files.byId };
+      unpinnedInputIds.forEach(id => {
+        delete newById[id];
+      });
+      
+      // Add output files
+      const outputIds: FileId[] = [];
+      outputFileRecords.forEach(record => {
+        if (!newById[record.id]) {
+          outputIds.push(record.id);
+          newById[record.id] = record;
+        }
+      });
+      
+      // Clear selections that reference removed files
+      const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !unpinnedInputIds.includes(id));
+      
+      return {
+        ...state,
+        files: {
+          ids: [...remainingIds, ...outputIds],
+          byId: newById
+        },
+        ui: {
+          ...state.ui,
+          selectedFileIds: validSelectedFileIds
+        }
+      };
+    }
+    
+    case 'RESET_CONTEXT': {
+      // Reset UI state to clean slate (resource cleanup handled by lifecycle manager)
+      return { ...initialFileContextState };
+    }
+    
+    default:
+      return state;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/file/contexts.ts b/frontend/src/contexts/file/contexts.ts
new file mode 100644
index 000000000..2474f1094
--- /dev/null
+++ b/frontend/src/contexts/file/contexts.ts
@@ -0,0 +1,13 @@
+/**
+ * React contexts for file state and actions
+ */
+
+import { createContext } from 'react';
+import { FileContextStateValue, FileContextActionsValue } from '../../types/fileContext';
+
+// Split contexts for performance
+export const FileStateContext = createContext<FileContextStateValue | undefined>(undefined);
+export const FileActionsContext = createContext<FileContextActionsValue | undefined>(undefined);
+
+// Export types for use in hooks
+export type { FileContextStateValue, FileContextActionsValue };
\ No newline at end of file
diff --git a/frontend/src/contexts/file/fileActions.ts b/frontend/src/contexts/file/fileActions.ts
new file mode 100644
index 000000000..948b4f011
--- /dev/null
+++ b/frontend/src/contexts/file/fileActions.ts
@@ -0,0 +1,370 @@
+/**
+ * File actions - Unified file operations with single addFiles helper
+ */
+
+import { 
+  FileId, 
+  FileRecord, 
+  FileContextAction,
+  FileContextState,
+  toFileRecord,
+  createFileId,
+  createQuickKey
+} from '../../types/fileContext';
+import { FileMetadata } from '../../types/file';
+import { generateThumbnailWithMetadata } from '../../utils/thumbnailUtils';
+import { FileLifecycleManager } from './lifecycle';
+import { fileProcessingService } from '../../services/fileProcessingService';
+import { buildQuickKeySet, buildQuickKeySetFromMetadata } from './fileSelectors';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+
+/**
+ * Simple mutex to prevent race conditions in addFiles
+ */
+class SimpleMutex {
+  private locked = false;
+  private queue: Array<() => void> = [];
+
+  async lock(): Promise<void> {
+    if (!this.locked) {
+      this.locked = true;
+      return Promise.resolve();
+    }
+
+    return new Promise<void>((resolve) => {
+      this.queue.push(() => {
+        this.locked = true;
+        resolve();
+      });
+    });
+  }
+
+  unlock(): void {
+    if (this.queue.length > 0) {
+      const next = this.queue.shift()!;
+      next();
+    } else {
+      this.locked = false;
+    }
+  }
+}
+
+// Global mutex for addFiles operations
+const addFilesMutex = new SimpleMutex();
+
+/**
+ * Helper to create ProcessedFile metadata structure
+ */
+export function createProcessedFile(pageCount: number, thumbnail?: string) {
+  return {
+    totalPages: pageCount,
+    pages: Array.from({ length: pageCount }, (_, index) => ({
+      pageNumber: index + 1,
+      thumbnail: index === 0 ? thumbnail : undefined, // Only first page gets thumbnail initially
+      rotation: 0,
+      splitBefore: false
+    })),
+    thumbnailUrl: thumbnail,
+    lastProcessed: Date.now()
+  };
+}
+
+/**
+ * File addition types
+ */
+type AddFileKind = 'raw' | 'processed' | 'stored';
+
+interface AddFileOptions {
+  // For 'raw' files
+  files?: File[];
+  
+  // For 'processed' files  
+  filesWithThumbnails?: Array<{ file: File; thumbnail?: string; pageCount?: number }>;
+  
+  // For 'stored' files
+  filesWithMetadata?: Array<{ file: File; originalId: FileId; metadata: FileMetadata }>;
+}
+
+/**
+ * Unified file addition helper - replaces addFiles/addProcessedFiles/addStoredFiles
+ */
+export async function addFiles(
+  kind: AddFileKind,
+  options: AddFileOptions,
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
+  dispatch: React.Dispatch<FileContextAction>,
+  lifecycleManager: FileLifecycleManager
+): Promise<Array<{ file: File; id: FileId; thumbnail?: string }>> {
+  // Acquire mutex to prevent race conditions
+  await addFilesMutex.lock();
+  
+  try {
+  const fileRecords: FileRecord[] = [];
+  const addedFiles: Array<{ file: File; id: FileId; thumbnail?: string }> = [];
+  
+  // Build quickKey lookup from existing files for deduplication
+  const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
+  if (DEBUG) console.log(`📄 addFiles(${kind}): Existing quickKeys for deduplication:`, Array.from(existingQuickKeys));
+  
+  switch (kind) {
+    case 'raw': {
+      const { files = [] } = options;
+      if (DEBUG) console.log(`📄 addFiles(raw): Adding ${files.length} files with immediate thumbnail generation`);
+      
+      for (const file of files) {
+        const quickKey = createQuickKey(file);
+        
+        // Soft deduplication: Check if file already exists by metadata
+        if (existingQuickKeys.has(quickKey)) {
+          if (DEBUG) console.log(`📄 Skipping duplicate file: ${file.name} (quickKey: ${quickKey})`);
+          continue;
+        }
+        if (DEBUG) console.log(`📄 Adding new file: ${file.name} (quickKey: ${quickKey})`);
+        
+        const fileId = createFileId();
+        filesRef.current.set(fileId, file);
+        
+        // Generate thumbnail and page count immediately
+        let thumbnail: string | undefined;
+        let pageCount: number = 1;
+        
+        // Route based on file type - PDFs through full metadata pipeline, non-PDFs through simple path
+        if (file.type.startsWith('application/pdf')) {
+          try {
+            if (DEBUG) console.log(`📄 Generating PDF metadata for ${file.name}`);
+            const result = await generateThumbnailWithMetadata(file);
+            thumbnail = result.thumbnail;
+            pageCount = result.pageCount;
+            if (DEBUG) console.log(`📄 Generated PDF metadata for ${file.name}: ${pageCount} pages, thumbnail: SUCCESS`);
+          } catch (error) {
+            if (DEBUG) console.warn(`📄 Failed to generate PDF metadata for ${file.name}:`, error);
+          }
+        } else {
+          // Non-PDF files: simple thumbnail generation, no page count
+          try {
+            if (DEBUG) console.log(`📄 Generating simple thumbnail for non-PDF file ${file.name}`);
+            const { generateThumbnailForFile } = await import('../../utils/thumbnailUtils');
+            thumbnail = await generateThumbnailForFile(file);
+            pageCount = 0; // Non-PDFs have no page count
+            if (DEBUG) console.log(`📄 Generated simple thumbnail for ${file.name}: no page count, thumbnail: SUCCESS`);
+          } catch (error) {
+            if (DEBUG) console.warn(`📄 Failed to generate simple thumbnail for ${file.name}:`, error);
+          }
+        }
+        
+        // Create record with immediate thumbnail and page metadata
+        const record = toFileRecord(file, fileId);
+        if (thumbnail) {
+          record.thumbnailUrl = thumbnail;
+          // Track blob URLs for cleanup (images return blob URLs that need revocation)
+          if (thumbnail.startsWith('blob:')) {
+            lifecycleManager.trackBlobUrl(thumbnail);
+          }
+        }
+        
+        // Create initial processedFile metadata with page count
+        if (pageCount > 0) {
+          record.processedFile = createProcessedFile(pageCount, thumbnail);
+          if (DEBUG) console.log(`📄 addFiles(raw): Created initial processedFile metadata for ${file.name} with ${pageCount} pages`);
+        }
+        
+        existingQuickKeys.add(quickKey);
+        fileRecords.push(record);
+        addedFiles.push({ file, id: fileId, thumbnail });
+        }
+      break;
+    }
+    
+    case 'processed': {
+      const { filesWithThumbnails = [] } = options;
+      if (DEBUG) console.log(`📄 addFiles(processed): Adding ${filesWithThumbnails.length} processed files with pre-existing thumbnails`);
+      
+      for (const { file, thumbnail, pageCount = 1 } of filesWithThumbnails) {
+        const quickKey = createQuickKey(file);
+        
+        if (existingQuickKeys.has(quickKey)) {
+          if (DEBUG) console.log(`📄 Skipping duplicate processed file: ${file.name}`);
+          continue;
+        }
+        
+        const fileId = createFileId();
+        filesRef.current.set(fileId, file);
+        
+        const record = toFileRecord(file, fileId);
+        if (thumbnail) {
+          record.thumbnailUrl = thumbnail;
+          // Track blob URLs for cleanup (images return blob URLs that need revocation)
+          if (thumbnail.startsWith('blob:')) {
+            lifecycleManager.trackBlobUrl(thumbnail);
+          }
+        }
+        
+        // Create processedFile with provided metadata
+        if (pageCount > 0) {
+          record.processedFile = createProcessedFile(pageCount, thumbnail);
+          if (DEBUG) console.log(`📄 addFiles(processed): Created initial processedFile metadata for ${file.name} with ${pageCount} pages`);
+        }
+        
+        existingQuickKeys.add(quickKey);
+        fileRecords.push(record);
+        addedFiles.push({ file, id: fileId, thumbnail });
+      }
+      break;
+    }
+    
+    case 'stored': {
+      const { filesWithMetadata = [] } = options;
+      if (DEBUG) console.log(`📄 addFiles(stored): Restoring ${filesWithMetadata.length} files from storage with existing metadata`);
+      
+      for (const { file, originalId, metadata } of filesWithMetadata) {
+        const quickKey = createQuickKey(file);
+        
+        if (existingQuickKeys.has(quickKey)) {
+          if (DEBUG) console.log(`📄 Skipping duplicate stored file: ${file.name} (quickKey: ${quickKey})`);
+          continue;
+        }
+        if (DEBUG) console.log(`📄 Adding stored file: ${file.name} (quickKey: ${quickKey})`);
+        
+        // Try to preserve original ID, but generate new if it conflicts
+        let fileId = originalId;
+        if (filesRef.current.has(originalId)) {
+          fileId = createFileId();
+          if (DEBUG) console.log(`📄 ID conflict for stored file ${file.name}, using new ID: ${fileId}`);
+        }
+        
+        filesRef.current.set(fileId, file);
+        
+        const record = toFileRecord(file, fileId);
+        
+        // Generate processedFile metadata for stored files
+        let pageCount: number = 1;
+        
+        // Only process PDFs through PDF worker manager, non-PDFs have no page count
+        if (file.type.startsWith('application/pdf')) {
+          try {
+            if (DEBUG) console.log(`📄 addFiles(stored): Generating PDF metadata for stored file ${file.name}`);
+            
+            // Get page count from PDF
+            const arrayBuffer = await file.arrayBuffer();
+            const { pdfWorkerManager } = await import('../../services/pdfWorkerManager');
+            const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+            pageCount = pdf.numPages;
+            pdfWorkerManager.destroyDocument(pdf);
+            
+            if (DEBUG) console.log(`📄 addFiles(stored): Found ${pageCount} pages in PDF ${file.name}`);
+          } catch (error) {
+            if (DEBUG) console.warn(`📄 addFiles(stored): Failed to generate PDF metadata for ${file.name}:`, error);
+          }
+        } else {
+          pageCount = 0; // Non-PDFs have no page count
+          if (DEBUG) console.log(`📄 addFiles(stored): Non-PDF file ${file.name}, no page count`);
+        }
+        
+        // Restore metadata from storage
+        if (metadata.thumbnail) {
+          record.thumbnailUrl = metadata.thumbnail;
+          // Track blob URLs for cleanup (images return blob URLs that need revocation)
+          if (metadata.thumbnail.startsWith('blob:')) {
+            lifecycleManager.trackBlobUrl(metadata.thumbnail);
+          }
+        }
+        
+        // Create processedFile metadata with correct page count
+        if (pageCount > 0) {
+          record.processedFile = createProcessedFile(pageCount, metadata.thumbnail);
+          if (DEBUG) console.log(`📄 addFiles(stored): Created processedFile metadata for ${file.name} with ${pageCount} pages`);
+        }
+        
+        existingQuickKeys.add(quickKey);
+        fileRecords.push(record);
+        addedFiles.push({ file, id: fileId, thumbnail: metadata.thumbnail });
+        
+      }
+      break;
+    }
+  }
+  
+  // Dispatch ADD_FILES action if we have new files
+  if (fileRecords.length > 0) {
+    dispatch({ type: 'ADD_FILES', payload: { fileRecords } });
+    if (DEBUG) console.log(`📄 addFiles(${kind}): Successfully added ${fileRecords.length} files`);
+  }
+  
+  return addedFiles;
+  } finally {
+    // Always release mutex even if error occurs
+    addFilesMutex.unlock();
+  }
+}
+
+/**
+ * Consume files helper - replace unpinned input files with output files
+ */
+export async function consumeFiles(
+  inputFileIds: FileId[],
+  outputFiles: File[],
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
+  dispatch: React.Dispatch<FileContextAction>
+): Promise<void> {
+  if (DEBUG) console.log(`📄 consumeFiles: Processing ${inputFileIds.length} input files, ${outputFiles.length} output files`);
+  
+  // Process output files through the 'processed' path to generate thumbnails
+  const outputFileRecords = await Promise.all(
+    outputFiles.map(async (file) => {
+      const fileId = createFileId();
+      filesRef.current.set(fileId, file);
+      
+      // Generate thumbnail and page count for output file
+      let thumbnail: string | undefined;
+      let pageCount: number = 1;
+      
+      try {
+        if (DEBUG) console.log(`📄 consumeFiles: Generating thumbnail for output file ${file.name}`);
+        const result = await generateThumbnailWithMetadata(file);
+        thumbnail = result.thumbnail;
+        pageCount = result.pageCount;
+      } catch (error) {
+        if (DEBUG) console.warn(`📄 consumeFiles: Failed to generate thumbnail for output file ${file.name}:`, error);
+      }
+      
+      const record = toFileRecord(file, fileId);
+      if (thumbnail) {
+        record.thumbnailUrl = thumbnail;
+      }
+      
+      if (pageCount > 0) {
+        record.processedFile = createProcessedFile(pageCount, thumbnail);
+      }
+      
+      return record;
+    })
+  );
+  
+  // Dispatch the consume action
+  dispatch({ 
+    type: 'CONSUME_FILES', 
+    payload: { 
+      inputFileIds, 
+      outputFileRecords 
+    } 
+  });
+  
+  if (DEBUG) console.log(`📄 consumeFiles: Successfully consumed files - removed ${inputFileIds.length} inputs, added ${outputFileRecords.length} outputs`);
+}
+
+/**
+ * Action factory functions
+ */
+export const createFileActions = (dispatch: React.Dispatch<FileContextAction>) => ({
+  setSelectedFiles: (fileIds: FileId[]) => dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds } }),
+  setSelectedPages: (pageNumbers: number[]) => dispatch({ type: 'SET_SELECTED_PAGES', payload: { pageNumbers } }),
+  clearSelections: () => dispatch({ type: 'CLEAR_SELECTIONS' }),
+  setProcessing: (isProcessing: boolean, progress = 0) => dispatch({ type: 'SET_PROCESSING', payload: { isProcessing, progress } }),
+  setHasUnsavedChanges: (hasChanges: boolean) => dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } }),
+  pinFile: (fileId: FileId) => dispatch({ type: 'PIN_FILE', payload: { fileId } }),
+  unpinFile: (fileId: FileId) => dispatch({ type: 'UNPIN_FILE', payload: { fileId } }),
+  resetContext: () => dispatch({ type: 'RESET_CONTEXT' })
+});
diff --git a/frontend/src/contexts/file/fileHooks.ts b/frontend/src/contexts/file/fileHooks.ts
new file mode 100644
index 000000000..19452958f
--- /dev/null
+++ b/frontend/src/contexts/file/fileHooks.ts
@@ -0,0 +1,193 @@
+/**
+ * Performant file hooks - Clean API using FileContext
+ */
+
+import { useContext, useMemo } from 'react';
+import { 
+  FileStateContext, 
+  FileActionsContext,
+  FileContextStateValue,
+  FileContextActionsValue 
+} from './contexts';
+import { FileId, FileRecord } from '../../types/fileContext';
+
+/**
+ * Hook for accessing file state (will re-render on any state change)
+ * Use individual selector hooks below for better performance
+ */
+export function useFileState(): FileContextStateValue {
+  const context = useContext(FileStateContext);
+  if (!context) {
+    throw new Error('useFileState must be used within a FileContextProvider');
+  }
+  return context;
+}
+
+/**
+ * Hook for accessing file actions (stable - won't cause re-renders)
+ */
+export function useFileActions(): FileContextActionsValue {
+  const context = useContext(FileActionsContext);
+  if (!context) {
+    throw new Error('useFileActions must be used within a FileContextProvider');
+  }
+  return context;
+}
+
+/**
+ * Hook for current/primary file (first in list)
+ */
+export function useCurrentFile(): { file?: File; record?: FileRecord } {
+  const { state, selectors } = useFileState();
+  
+  const primaryFileId = state.files.ids[0];
+  return useMemo(() => ({
+    file: primaryFileId ? selectors.getFile(primaryFileId) : undefined,
+    record: primaryFileId ? selectors.getFileRecord(primaryFileId) : undefined
+  }), [primaryFileId, selectors]);
+}
+
+/**
+ * Hook for file selection state and actions
+ */
+export function useFileSelection() {
+  const { state, selectors } = useFileState();
+  const { actions } = useFileActions();
+
+  // Memoize selected files to avoid recreating arrays
+  const selectedFiles = useMemo(() => {
+    return selectors.getSelectedFiles();
+  }, [state.ui.selectedFileIds, selectors]);
+
+  return useMemo(() => ({
+    selectedFiles,
+    selectedFileIds: state.ui.selectedFileIds,
+    selectedPageNumbers: state.ui.selectedPageNumbers,
+    setSelectedFiles: actions.setSelectedFiles,
+    setSelectedPages: actions.setSelectedPages,
+    clearSelections: actions.clearSelections
+  }), [
+    selectedFiles,
+    state.ui.selectedFileIds,
+    state.ui.selectedPageNumbers,
+    actions.setSelectedFiles,
+    actions.setSelectedPages,
+    actions.clearSelections
+  ]);
+}
+
+/**
+ * Hook for file management operations
+ */
+export function useFileManagement() {
+  const { actions } = useFileActions();
+  
+  return useMemo(() => ({
+    addFiles: actions.addFiles,
+    removeFiles: actions.removeFiles,
+    clearAllFiles: actions.clearAllFiles,
+    updateFileRecord: actions.updateFileRecord,
+    reorderFiles: actions.reorderFiles
+  }), [actions]);
+}
+
+/**
+ * Hook for UI state
+ */
+export function useFileUI() {
+  const { state } = useFileState();
+  const { actions } = useFileActions();
+
+  return useMemo(() => ({
+    isProcessing: state.ui.isProcessing,
+    processingProgress: state.ui.processingProgress,
+    hasUnsavedChanges: state.ui.hasUnsavedChanges,
+    setProcessing: actions.setProcessing,
+    setUnsavedChanges: actions.setHasUnsavedChanges
+  }), [state.ui, actions]);
+}
+
+/**
+ * Hook for specific file by ID (optimized for individual file access)
+ */
+export function useFileRecord(fileId: FileId): { file?: File; record?: FileRecord } {
+  const { selectors } = useFileState();
+  
+  return useMemo(() => ({
+    file: selectors.getFile(fileId),
+    record: selectors.getFileRecord(fileId)
+  }), [fileId, selectors]);
+}
+
+/**
+ * Hook for all files (use sparingly - causes re-renders on file list changes)
+ */
+export function useAllFiles(): { files: File[]; records: FileRecord[]; fileIds: FileId[] } {
+  const { state, selectors } = useFileState();
+  
+  return useMemo(() => ({
+    files: selectors.getFiles(),
+    records: selectors.getFileRecords(),
+    fileIds: state.files.ids
+  }), [state.files.ids, selectors]);
+}
+
+/**
+ * Hook for selected files (optimized for selection-based UI)
+ */
+export function useSelectedFiles(): { files: File[]; records: FileRecord[]; fileIds: FileId[] } {
+  const { state, selectors } = useFileState();
+  
+  return useMemo(() => ({
+    files: selectors.getSelectedFiles(),
+    records: selectors.getSelectedFileRecords(),
+    fileIds: state.ui.selectedFileIds
+  }), [state.ui.selectedFileIds, selectors]);
+}
+
+// Navigation management removed - moved to NavigationContext
+
+/**
+ * Primary API hook for file context operations
+ * Used by tools for core file context functionality
+ */
+export function useFileContext() {
+  const { state, selectors } = useFileState();
+  const { actions } = useFileActions();
+
+  return useMemo(() => ({
+    // Lifecycle management
+    trackBlobUrl: actions.trackBlobUrl,
+    scheduleCleanup: actions.scheduleCleanup,
+    setUnsavedChanges: actions.setHasUnsavedChanges,
+    
+    // File management
+    addFiles: actions.addFiles,
+    consumeFiles: actions.consumeFiles,
+    recordOperation: (fileId: string, operation: any) => {}, // Operation tracking not implemented
+    markOperationApplied: (fileId: string, operationId: string) => {}, // Operation tracking not implemented  
+    markOperationFailed: (fileId: string, operationId: string, error: string) => {}, // Operation tracking not implemented
+    
+    // File ID lookup
+    findFileId: (file: File) => {
+      return state.files.ids.find(id => {
+        const record = state.files.byId[id];
+        return record && 
+               record.name === file.name && 
+               record.size === file.size && 
+               record.lastModified === file.lastModified;
+      });
+    },
+    
+    // Pinned files
+    pinnedFiles: state.pinnedFiles,
+    pinFile: actions.pinFile,
+    unpinFile: actions.unpinFile,
+    isFilePinned: selectors.isFilePinned,
+    
+    // Active files
+    activeFiles: selectors.getFiles()
+  }), [state, selectors, actions]);
+}
+
+
diff --git a/frontend/src/contexts/file/fileSelectors.ts b/frontend/src/contexts/file/fileSelectors.ts
new file mode 100644
index 000000000..5579aa3c7
--- /dev/null
+++ b/frontend/src/contexts/file/fileSelectors.ts
@@ -0,0 +1,130 @@
+/**
+ * File selectors - Pure functions for accessing file state
+ */
+
+import { 
+  FileId, 
+  FileRecord, 
+  FileContextState,
+  FileContextSelectors 
+} from '../../types/fileContext';
+
+/**
+ * Create stable selectors using stateRef and filesRef
+ */
+export function createFileSelectors(
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>
+): FileContextSelectors {
+  return {
+    getFile: (id: FileId) => filesRef.current.get(id),
+    
+    getFiles: (ids?: FileId[]) => {
+      const currentIds = ids || stateRef.current.files.ids;
+      return currentIds.map(id => filesRef.current.get(id)).filter(Boolean) as File[];
+    },
+    
+    getFileRecord: (id: FileId) => stateRef.current.files.byId[id],
+    
+    getFileRecords: (ids?: FileId[]) => {
+      const currentIds = ids || stateRef.current.files.ids;
+      return currentIds.map(id => stateRef.current.files.byId[id]).filter(Boolean);
+    },
+    
+    getAllFileIds: () => stateRef.current.files.ids,
+    
+    getSelectedFiles: () => {
+      return stateRef.current.ui.selectedFileIds
+        .map(id => filesRef.current.get(id))
+        .filter(Boolean) as File[];
+    },
+    
+    getSelectedFileRecords: () => {
+      return stateRef.current.ui.selectedFileIds
+        .map(id => stateRef.current.files.byId[id])
+        .filter(Boolean);
+    },
+    
+    // Pinned files selectors
+    getPinnedFileIds: () => {
+      return Array.from(stateRef.current.pinnedFiles);
+    },
+    
+    getPinnedFiles: () => {
+      return Array.from(stateRef.current.pinnedFiles)
+        .map(id => filesRef.current.get(id))
+        .filter(Boolean) as File[];
+    },
+    
+    getPinnedFileRecords: () => {
+      return Array.from(stateRef.current.pinnedFiles)
+        .map(id => stateRef.current.files.byId[id])
+        .filter(Boolean);
+    },
+    
+    isFilePinned: (file: File) => {
+      // Find FileId by matching File object properties
+      const fileId = Object.keys(stateRef.current.files.byId).find(id => {
+        const storedFile = filesRef.current.get(id);
+        return storedFile && 
+               storedFile.name === file.name && 
+               storedFile.size === file.size && 
+               storedFile.lastModified === file.lastModified;
+      });
+      return fileId ? stateRef.current.pinnedFiles.has(fileId) : false;
+    },
+    
+    // Stable signature for effects - prevents unnecessary re-renders
+    getFilesSignature: () => {
+      return stateRef.current.files.ids
+        .map(id => {
+          const record = stateRef.current.files.byId[id];
+          return record ? `${id}:${record.size}:${record.lastModified}` : '';
+        })
+        .join('|');
+    },
+
+  };
+}
+
+/**
+ * Helper for building quickKey sets for deduplication
+ */
+export function buildQuickKeySet(fileRecords: Record<FileId, FileRecord>): Set<string> {
+  const quickKeys = new Set<string>();
+  Object.values(fileRecords).forEach(record => {
+    if (record.quickKey) {
+      quickKeys.add(record.quickKey);
+    }
+  });
+  return quickKeys;
+}
+
+/**
+ * Helper for building quickKey sets from IndexedDB metadata
+ */
+export function buildQuickKeySetFromMetadata(metadata: Array<{ name: string; size: number; lastModified: number }>): Set<string> {
+  const quickKeys = new Set<string>();
+  metadata.forEach(meta => {
+    // Format: name|size|lastModified (same as createQuickKey)
+    const quickKey = `${meta.name}|${meta.size}|${meta.lastModified}`;
+    quickKeys.add(quickKey);
+  });
+  return quickKeys;
+}
+
+/**
+ * Get primary file (first in list) - commonly used pattern
+ */
+export function getPrimaryFile(
+  stateRef: React.MutableRefObject<FileContextState>,
+  filesRef: React.MutableRefObject<Map<FileId, File>>
+): { file?: File; record?: FileRecord } {
+  const primaryFileId = stateRef.current.files.ids[0];
+  if (!primaryFileId) return {};
+  
+  return {
+    file: filesRef.current.get(primaryFileId),
+    record: stateRef.current.files.byId[primaryFileId]
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/file/lifecycle.ts b/frontend/src/contexts/file/lifecycle.ts
new file mode 100644
index 000000000..99b46495f
--- /dev/null
+++ b/frontend/src/contexts/file/lifecycle.ts
@@ -0,0 +1,190 @@
+/**
+ * File lifecycle management - Resource cleanup and memory management
+ */
+
+import { FileId, FileContextAction, FileRecord, ProcessedFilePage } from '../../types/fileContext';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+
+/**
+ * Resource tracking and cleanup utilities
+ */
+export class FileLifecycleManager {
+  private cleanupTimers = new Map<string, number>();
+  private blobUrls = new Set<string>();
+  private fileGenerations = new Map<string, number>(); // Generation tokens to prevent stale cleanup
+
+  constructor(
+    private filesRef: React.MutableRefObject<Map<FileId, File>>,
+    private dispatch: React.Dispatch<FileContextAction>
+  ) {}
+
+  /**
+   * Track blob URLs for cleanup
+   */
+  trackBlobUrl = (url: string): void => {
+    // Only track actual blob URLs to avoid trying to revoke other schemes
+    if (url.startsWith('blob:')) {
+      this.blobUrls.add(url);
+    }
+  };
+
+
+  /**
+   * Clean up resources for a specific file (with stateRef access for complete cleanup)
+   */
+  cleanupFile = (fileId: string, stateRef?: React.MutableRefObject<any>): void => {
+    // Use comprehensive cleanup (same as removeFiles)
+    this.cleanupAllResourcesForFile(fileId, stateRef);
+    
+    // Remove file from state
+    this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds: [fileId] } });
+  };
+
+  /**
+   * Clean up all files and resources
+   */
+  cleanupAllFiles = (): void => {
+    // Revoke all blob URLs
+    this.blobUrls.forEach(url => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        // Ignore revocation errors
+      }
+    });
+    this.blobUrls.clear();
+    
+    // Clear all cleanup timers and generations
+    this.cleanupTimers.forEach(timer => clearTimeout(timer));
+    this.cleanupTimers.clear();
+    this.fileGenerations.clear();
+    
+    // Clear files ref
+    this.filesRef.current.clear();
+  };
+
+  /**
+   * Schedule delayed cleanup for a file with generation token to prevent stale cleanup
+   */
+  scheduleCleanup = (fileId: string, delay: number = 30000, stateRef?: React.MutableRefObject<any>): void => {
+    // Cancel existing timer
+    const existingTimer = this.cleanupTimers.get(fileId);
+    if (existingTimer) {
+      clearTimeout(existingTimer);
+      this.cleanupTimers.delete(fileId);
+    }
+
+    // If delay is negative, just cancel (don't reschedule)
+    if (delay < 0) {
+      return;
+    }
+
+    // Increment generation for this file to invalidate any pending cleanup
+    const currentGen = (this.fileGenerations.get(fileId) || 0) + 1;
+    this.fileGenerations.set(fileId, currentGen);
+
+    // Schedule new cleanup with generation token
+    const timer = window.setTimeout(() => {
+      // Check if this cleanup is still valid (file hasn't been re-added)
+      if (this.fileGenerations.get(fileId) === currentGen) {
+        this.cleanupFile(fileId, stateRef);
+      } else {
+        if (DEBUG) console.log(`🗂️ Skipped stale cleanup for file ${fileId} (generation mismatch)`);
+      }
+    }, delay);
+
+    this.cleanupTimers.set(fileId, timer);
+  };
+
+  /**
+   * Remove a file immediately with complete resource cleanup
+   */
+  removeFiles = (fileIds: FileId[], stateRef?: React.MutableRefObject<any>): void => {
+    fileIds.forEach(fileId => {
+      // Clean up all resources for this file
+      this.cleanupAllResourcesForFile(fileId, stateRef);
+    });
+    
+    // Dispatch removal action once for all files (reducer only updates state)
+    this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds } });
+  };
+
+  /**
+   * Complete resource cleanup for a single file
+   */
+  private cleanupAllResourcesForFile = (fileId: FileId, stateRef?: React.MutableRefObject<any>): void => {
+    // Remove from files ref
+    this.filesRef.current.delete(fileId);
+    
+    // Cancel cleanup timer and generation
+    const timer = this.cleanupTimers.get(fileId);
+    if (timer) {
+      clearTimeout(timer);
+      this.cleanupTimers.delete(fileId);
+    }
+    this.fileGenerations.delete(fileId);
+    
+    // Clean up blob URLs from file record if we have access to state
+    if (stateRef) {
+      const record = stateRef.current.files.byId[fileId];
+      if (record) {
+        // Clean up thumbnail blob URLs
+        if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
+          try {
+            URL.revokeObjectURL(record.thumbnailUrl);
+          } catch (error) {
+            // Ignore revocation errors
+          }
+        }
+        
+        if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
+          try {
+            URL.revokeObjectURL(record.blobUrl);
+          } catch (error) {
+            // Ignore revocation errors
+          }
+        }
+        
+        // Clean up processed file thumbnails
+        if (record.processedFile?.pages) {
+          record.processedFile.pages.forEach((page: ProcessedFilePage, index: number) => {
+            if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
+              try {
+                URL.revokeObjectURL(page.thumbnail);
+              } catch (error) {
+                // Ignore revocation errors
+              }
+            }
+          });
+        }
+      }
+    }
+  };
+
+  /**
+   * Update file record with race condition guards
+   */
+  updateFileRecord = (fileId: FileId, updates: Partial<FileRecord>, stateRef?: React.MutableRefObject<any>): void => {
+    // Guard against updating removed files (race condition protection)
+    if (!this.filesRef.current.has(fileId)) {
+      if (DEBUG) console.warn(`🗂️ Attempted to update removed file (filesRef): ${fileId}`);
+      return;
+    }
+    
+    // Additional state guard for rare race conditions
+    if (stateRef && !stateRef.current.files.byId[fileId]) {
+      if (DEBUG) console.warn(`🗂️ Attempted to update removed file (state): ${fileId}`);
+      return;
+    }
+    
+    this.dispatch({ type: 'UPDATE_FILE_RECORD', payload: { id: fileId, updates } });
+  };
+
+  /**
+   * Cleanup on unmount
+   */
+  destroy = (): void => {
+    this.cleanupAllFiles();
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index 718bc9370..eb4b5d6c2 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -1,6 +1,5 @@
 declare module "../tools/Split";
 declare module "../tools/Compress";
-declare module "../tools/Merge";
 declare module "../components/PageEditor";
 declare module "../components/Viewer";
 declare module "*.js";
diff --git a/frontend/src/hooks/tools/convert/useConvertParameters.ts b/frontend/src/hooks/tools/convert/useConvertParameters.ts
index 64ba7a38e..4d04dd8f0 100644
--- a/frontend/src/hooks/tools/convert/useConvertParameters.ts
+++ b/frontend/src/hooks/tools/convert/useConvertParameters.ts
@@ -12,6 +12,7 @@ import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat,
 import { detectFileExtension as detectFileExtensionUtil } from '../../../utils/fileUtils';
 import { BaseParameters } from '../../../types/parameters';
 import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+import { useCallback, useMemo } from 'react';
 
 export interface ConvertParameters extends BaseParameters {
   fromExtension: string;
@@ -121,11 +122,13 @@ const getEndpointName = (params: ConvertParameters): string => {
 };
 
 export const useConvertParameters = (): ConvertParametersHook => {
-  const baseHook = useBaseParameters({
+  const config = useMemo(() => ({
     defaultParameters,
     endpointName: getEndpointName,
     validateFn: validateParameters,
-  });
+  }), []);
+  
+  const baseHook = useBaseParameters(config);
 
   const getEndpoint = () => {
     const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = baseHook.parameters;
@@ -178,15 +181,22 @@ export const useConvertParameters = (): ConvertParametersHook => {
   };
 
 
-  const analyzeFileTypes = (files: Array<{name: string}>) => {
+  const analyzeFileTypes = useCallback((files: Array<{name: string}>) => {
     if (files.length === 0) {
       // No files - only reset smart detection, keep user's format choices
-      baseHook.setParameters(prev => ({
-        ...prev,
-        isSmartDetection: false,
-        smartDetectionType: 'none'
-        // Don't reset fromExtension and toExtension - let user keep their choices
-      }));
+      baseHook.setParameters(prev => {
+        // Only update if something actually changed
+        if (prev.isSmartDetection === false && prev.smartDetectionType === 'none') {
+          return prev; // No change needed
+        }
+        
+        return {
+          ...prev,
+          isSmartDetection: false,
+          smartDetectionType: 'none'
+          // Don't reset fromExtension and toExtension - let user keep their choices
+        };
+      });
       return;
     }
 
@@ -221,13 +231,25 @@ export const useConvertParameters = (): ConvertParametersHook => {
           newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
         }
 
-        return {
+        const newState = {
           ...prev,
           isSmartDetection: false,
-          smartDetectionType: 'none',
+          smartDetectionType: 'none' as const,
           fromExtension: fromExt,
           toExtension: newToExtension
         };
+
+        // Only update if something actually changed
+        if (
+          prev.isSmartDetection === newState.isSmartDetection &&
+          prev.smartDetectionType === newState.smartDetectionType &&
+          prev.fromExtension === newState.fromExtension &&
+          prev.toExtension === newState.toExtension
+        ) {
+          return prev; // Return the same object to prevent re-render
+        }
+
+        return newState;
       });
       return;
     }
@@ -262,13 +284,25 @@ export const useConvertParameters = (): ConvertParametersHook => {
           newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
         }
 
-        return {
+        const newState = {
           ...prev,
           isSmartDetection: false,
-          smartDetectionType: 'none',
+          smartDetectionType: 'none' as const,
           fromExtension: fromExt,
           toExtension: newToExtension
         };
+
+        // Only update if something actually changed
+        if (
+          prev.isSmartDetection === newState.isSmartDetection &&
+          prev.smartDetectionType === newState.smartDetectionType &&
+          prev.fromExtension === newState.fromExtension &&
+          prev.toExtension === newState.toExtension
+        ) {
+          return prev; // Return the same object to prevent re-render
+        }
+
+        return newState;
       });
     } else {
       // Mixed file types
@@ -277,34 +311,64 @@ export const useConvertParameters = (): ConvertParametersHook => {
 
       if (allImages) {
         // All files are images - use image-to-pdf conversion
-        baseHook.setParameters(prev => ({
-          ...prev,
-          isSmartDetection: true,
-          smartDetectionType: 'images',
-          fromExtension: 'image',
-          toExtension: 'pdf'
-        }));
+        baseHook.setParameters(prev => {
+          // Only update if something actually changed
+          if (prev.isSmartDetection === true && 
+              prev.smartDetectionType === 'images' && 
+              prev.fromExtension === 'image' && 
+              prev.toExtension === 'pdf') {
+            return prev; // No change needed
+          }
+          
+          return {
+            ...prev,
+            isSmartDetection: true,
+            smartDetectionType: 'images',
+            fromExtension: 'image',
+            toExtension: 'pdf'
+          };
+        });
       } else if (allWeb) {
         // All files are web files - use html-to-pdf conversion
-        baseHook.setParameters(prev => ({
-          ...prev,
-          isSmartDetection: true,
-          smartDetectionType: 'web',
-          fromExtension: 'html',
-          toExtension: 'pdf'
-        }));
+        baseHook.setParameters(prev => {
+          // Only update if something actually changed
+          if (prev.isSmartDetection === true && 
+              prev.smartDetectionType === 'web' && 
+              prev.fromExtension === 'html' && 
+              prev.toExtension === 'pdf') {
+            return prev; // No change needed
+          }
+          
+          return {
+            ...prev,
+            isSmartDetection: true,
+            smartDetectionType: 'web',
+            fromExtension: 'html',
+            toExtension: 'pdf'
+          };
+        });
       } else {
         // Mixed non-image types - use file-to-pdf conversion
-        baseHook.setParameters(prev => ({
-          ...prev,
-          isSmartDetection: true,
-          smartDetectionType: 'mixed',
-          fromExtension: 'any',
-          toExtension: 'pdf'
-        }));
+        baseHook.setParameters(prev => {
+          // Only update if something actually changed
+          if (prev.isSmartDetection === true && 
+              prev.smartDetectionType === 'mixed' && 
+              prev.fromExtension === 'any' && 
+              prev.toExtension === 'pdf') {
+            return prev; // No change needed
+          }
+          
+          return {
+            ...prev,
+            isSmartDetection: true,
+            smartDetectionType: 'mixed',
+            fromExtension: 'any',
+            toExtension: 'pdf'
+          };
+        });
       }
     }
-  };
+  }, [baseHook.setParameters]);
 
   return {
     ...baseHook,
diff --git a/frontend/src/hooks/tools/shared/useToolOperation.ts b/frontend/src/hooks/tools/shared/useToolOperation.ts
index 623b93d84..4e76e6e7d 100644
--- a/frontend/src/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@@ -104,7 +104,7 @@ export const useToolOperation = <TParams = void>(
   config: ToolOperationConfig<TParams>
 ): ToolOperationHook<TParams> => {
   const { t } = useTranslation();
-  const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles } = useFileContext();
+  const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, findFileId } = useFileContext();
 
   // Composed hooks
   const { state, actions } = useToolState();
@@ -198,8 +198,9 @@ export const useToolOperation = <TParams = void>(
         actions.setThumbnails(thumbnails);
         actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename);
 
-        // Consume input files and add output files (will replace unpinned inputs)
-        await consumeFiles(validFiles, processedFiles);
+        // Replace input files with processed files (consumeFiles handles pinning)
+        const inputFileIds = validFiles.map(file => findFileId(file)).filter(Boolean) as string[];
+        await consumeFiles(inputFileIds, processedFiles);
 
         markOperationApplied(fileId, operationId);
       }
@@ -213,7 +214,7 @@ export const useToolOperation = <TParams = void>(
       actions.setLoading(false);
       actions.setProgress(null);
     }
-  }, [t, config, actions, recordOperation, markOperationApplied, markOperationFailed, addFiles, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
+  }, [t, config, actions, recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, findFileId, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
 
   const cancelOperation = useCallback(() => {
     cancelApiCalls();
diff --git a/frontend/src/hooks/tools/shared/useToolResources.ts b/frontend/src/hooks/tools/shared/useToolResources.ts
index 8d0b75285..68e142128 100644
--- a/frontend/src/hooks/tools/shared/useToolResources.ts
+++ b/frontend/src/hooks/tools/shared/useToolResources.ts
@@ -1,5 +1,5 @@
-import { useState, useCallback, useEffect } from 'react';
-import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { generateThumbnailForFile, generateThumbnailWithMetadata, ThumbnailWithMetadata } from '../../../utils/thumbnailUtils';
 import { zipFileService } from '../../../services/zipFileService';
 
 
@@ -11,20 +11,28 @@ export const useToolResources = () => {
   }, []);
 
   const cleanupBlobUrls = useCallback(() => {
-    blobUrls.forEach(url => {
-      try {
-        URL.revokeObjectURL(url);
-      } catch (error) {
-        console.warn('Failed to revoke blob URL:', error);
-      }
+    setBlobUrls(prev => {
+      prev.forEach(url => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch (error) {
+          console.warn('Failed to revoke blob URL:', error);
+        }
+      });
+      return [];
     });
-    setBlobUrls([]);
-  }, [blobUrls]);
+  }, []); // No dependencies - use functional update pattern
 
-  // Cleanup on unmount
+  // Cleanup on unmount - use ref to avoid dependency on blobUrls state
+  const blobUrlsRef = useRef<string[]>([]);
+  
+  useEffect(() => {
+    blobUrlsRef.current = blobUrls;
+  }, [blobUrls]);
+  
   useEffect(() => {
     return () => {
-      blobUrls.forEach(url => {
+      blobUrlsRef.current.forEach(url => {
         try {
           URL.revokeObjectURL(url);
         } catch (error) {
@@ -32,19 +40,20 @@ export const useToolResources = () => {
         }
       });
     };
-  }, [blobUrls]);
+  }, []); // No dependencies - use ref to access current URLs
 
   const generateThumbnails = useCallback(async (files: File[]): Promise<string[]> => {
+    console.log(`🖼️ useToolResources.generateThumbnails: Starting for ${files.length} files`);
     const thumbnails: string[] = [];
 
     for (const file of files) {
       try {
+        console.log(`🖼️ Generating thumbnail for: ${file.name} (${file.type}, ${file.size} bytes)`);
         const thumbnail = await generateThumbnailForFile(file);
-        if (thumbnail) {
-          thumbnails.push(thumbnail);
-        }
+        console.log(`🖼️ Generated thumbnail for ${file.name}: SUCCESS`);
+        thumbnails.push(thumbnail);
       } catch (error) {
-        console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
+        console.warn(`🖼️ Failed to generate thumbnail for ${file.name}:`, error);
         thumbnails.push('');
       }
     }
@@ -52,6 +61,26 @@ export const useToolResources = () => {
     return thumbnails;
   }, []);
 
+  const generateThumbnailsWithMetadata = useCallback(async (files: File[]): Promise<ThumbnailWithMetadata[]> => {
+    console.log(`🖼️ useToolResources.generateThumbnailsWithMetadata: Starting for ${files.length} files`);
+    const results: ThumbnailWithMetadata[] = [];
+
+    for (const file of files) {
+      try {
+        console.log(`🖼️ Generating thumbnail with metadata for: ${file.name} (${file.type}, ${file.size} bytes)`);
+        const result = await generateThumbnailWithMetadata(file);
+        console.log(`🖼️ Generated thumbnail with metadata for ${file.name}: SUCCESS, ${result.pageCount} pages`);
+        results.push(result);
+      } catch (error) {
+        console.warn(`🖼️ Failed to generate thumbnail with metadata for ${file.name}:`, error);
+        results.push({ thumbnail: '', pageCount: 1 });
+      }
+    }
+
+    console.log(`🖼️ useToolResources.generateThumbnailsWithMetadata: Complete. Generated ${results.length}/${files.length} thumbnails with metadata`);
+    return results;
+  }, []);
+
   const extractZipFiles = useCallback(async (zipBlob: Blob): Promise<File[]> => {
     try {
       const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
@@ -108,6 +137,7 @@ export const useToolResources = () => {
 
   return {
     generateThumbnails,
+    generateThumbnailsWithMetadata,
     createDownloadInfo,
     extractZipFiles,
     extractAllZipFiles,
diff --git a/frontend/src/hooks/tools/shared/useToolState.ts b/frontend/src/hooks/tools/shared/useToolState.ts
index 196a05e72..883a1555f 100644
--- a/frontend/src/hooks/tools/shared/useToolState.ts
+++ b/frontend/src/hooks/tools/shared/useToolState.ts
@@ -88,6 +88,8 @@ export const useToolState = () => {
   }, []);
 
   const setThumbnails = useCallback((thumbnails: string[]) => {
+    console.log(`🔧 useToolState.setThumbnails: Setting ${thumbnails.length} thumbnails:`, 
+      thumbnails.map((t, i) => `[${i}]: ${t ? 'PRESENT' : 'MISSING'}`));
     dispatch({ type: 'SET_THUMBNAILS', payload: thumbnails });
   }, []);
 
diff --git a/frontend/src/hooks/useFileHandler.ts b/frontend/src/hooks/useFileHandler.ts
index efd988906..b42b4e94c 100644
--- a/frontend/src/hooks/useFileHandler.ts
+++ b/frontend/src/hooks/useFileHandler.ts
@@ -1,27 +1,38 @@
 import { useCallback } from 'react';
-import { useFileContext } from '../contexts/FileContext';
+import { useFileState, useFileActions } from '../contexts/FileContext';
+import { FileMetadata } from '../types/file';
 
 export const useFileHandler = () => {
-  const { activeFiles, addFiles } = useFileContext();
+  const { state } = useFileState(); // Still needed for addStoredFiles
+  const { actions } = useFileActions();
 
   const addToActiveFiles = useCallback(async (file: File) => {
-    const exists = activeFiles.some(f => f.name === file.name && f.size === file.size);
-    if (!exists) {
-      await addFiles([file]);
-    }
-  }, [activeFiles, addFiles]);
+    // Let FileContext handle deduplication with quickKey logic
+    await actions.addFiles([file]);
+  }, [actions.addFiles]);
 
   const addMultipleFiles = useCallback(async (files: File[]) => {
-    const newFiles = files.filter(file => 
-      !activeFiles.some(f => f.name === file.name && f.size === file.size)
-    );
+    // Let FileContext handle deduplication with quickKey logic
+    await actions.addFiles(files);
+  }, [actions.addFiles]);
+
+  // Add stored files preserving their original IDs to prevent session duplicates
+  const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => {
+    // Filter out files that already exist with the same ID (exact match)
+    const newFiles = filesWithMetadata.filter(({ originalId }) => {
+      return state.files.byId[originalId] === undefined;
+    });
+    
     if (newFiles.length > 0) {
-      await addFiles(newFiles);
+      await actions.addStoredFiles(newFiles);
     }
-  }, [activeFiles, addFiles]);
+    
+    console.log(`📁 Added ${newFiles.length} stored files (${filesWithMetadata.length - newFiles.length} skipped as duplicates)`);
+  }, [state.files.byId, actions.addStoredFiles]);
 
   return {
     addToActiveFiles,
     addMultipleFiles,
+    addStoredFiles,
   };
 };
\ No newline at end of file
diff --git a/frontend/src/hooks/useFileManager.ts b/frontend/src/hooks/useFileManager.ts
index dfa2d1dec..59e8c1cdb 100644
--- a/frontend/src/hooks/useFileManager.ts
+++ b/frontend/src/hooks/useFileManager.ts
@@ -1,84 +1,125 @@
 import { useState, useCallback } from 'react';
-import { fileStorage } from '../services/fileStorage';
-import { FileWithUrl } from '../types/file';
-import { createEnhancedFileFromStored } from '../utils/fileUtils';
+import { useIndexedDB } from '../contexts/IndexedDBContext';
+import { FileMetadata } from '../types/file';
 import { generateThumbnailForFile } from '../utils/thumbnailUtils';
 
 export const useFileManager = () => {
   const [loading, setLoading] = useState(false);
+  const indexedDB = useIndexedDB();
 
-  const convertToFile = useCallback(async (fileWithUrl: FileWithUrl): Promise<File> => {
-    if (fileWithUrl.url && fileWithUrl.url.startsWith('blob:')) {
-      const response = await fetch(fileWithUrl.url);
-      const data = await response.arrayBuffer();
-      const file = new File([data], fileWithUrl.name, {
-        type: fileWithUrl.type || 'application/pdf',
-        lastModified: fileWithUrl.lastModified || Date.now()
-      });
-      // Preserve the ID if it exists
-      if (fileWithUrl.id) {
-        Object.defineProperty(file, 'id', { value: fileWithUrl.id, writable: false });
+  const convertToFile = useCallback(async (fileMetadata: FileMetadata): Promise<File> => {
+    if (!indexedDB) {
+      throw new Error('IndexedDB context not available');
+    }
+    
+    // Handle drafts differently from regular files
+    if (fileMetadata.isDraft) {
+      // Load draft from the drafts database
+      try {
+        const { indexedDBManager, DATABASE_CONFIGS } = await import('../services/indexedDBManager');
+        const db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.DRAFTS);
+        
+        return new Promise((resolve, reject) => {
+          const transaction = db.transaction(['drafts'], 'readonly');
+          const store = transaction.objectStore('drafts');
+          const request = store.get(fileMetadata.id);
+          
+          request.onsuccess = () => {
+            const draft = request.result;
+            if (draft && draft.pdfData) {
+              const file = new File([draft.pdfData], fileMetadata.name, {
+                type: 'application/pdf',
+                lastModified: fileMetadata.lastModified
+              });
+              resolve(file);
+            } else {
+              reject(new Error('Draft data not found'));
+            }
+          };
+          
+          request.onerror = () => reject(request.error);
+        });
+      } catch (error) {
+        throw new Error(`Failed to load draft: ${fileMetadata.name} (${error})`);
       }
-      return file;
     }
-
-    // Always use ID first, fallback to name only if ID doesn't exist
-    const lookupKey = fileWithUrl.id || fileWithUrl.name;
-    const storedFile = await fileStorage.getFile(lookupKey);
-    if (storedFile) {
-      const file = new File([storedFile.data], storedFile.name, {
-        type: storedFile.type,
-        lastModified: storedFile.lastModified
-      });
-      // Add the ID to the file object
-      Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-      return file;
+    
+    // Regular file loading
+    if (fileMetadata.id) {
+      const file = await indexedDB.loadFile(fileMetadata.id);
+      if (file) {
+        return file;
+      }
     }
+    throw new Error(`File not found in storage: ${fileMetadata.name} (ID: ${fileMetadata.id})`);
+  }, [indexedDB]);
 
-    throw new Error('File not found in storage');
-  }, []);
-
-  const loadRecentFiles = useCallback(async (): Promise<FileWithUrl[]> => {
+  const loadRecentFiles = useCallback(async (): Promise<FileMetadata[]> => {
     setLoading(true);
     try {
-      const files = await fileStorage.getAllFiles();
-      const sortedFiles = files.sort((a, b) => (b.lastModified || 0) - (a.lastModified || 0));
-      return sortedFiles.map(file => createEnhancedFileFromStored(file));
+      if (!indexedDB) {
+        return [];
+      }
+      
+      // Load regular files metadata only
+      const storedFileMetadata = await indexedDB.loadAllMetadata();
+      
+      // For now, only regular files - drafts will be handled separately in the future
+      const allFiles = storedFileMetadata;
+      const sortedFiles = allFiles.sort((a, b) => (b.lastModified || 0) - (a.lastModified || 0));
+      
+      return sortedFiles;
     } catch (error) {
       console.error('Failed to load recent files:', error);
       return [];
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [indexedDB]);
 
-  const handleRemoveFile = useCallback(async (index: number, files: FileWithUrl[], setFiles: (files: FileWithUrl[]) => void) => {
+  const handleRemoveFile = useCallback(async (index: number, files: FileMetadata[], setFiles: (files: FileMetadata[]) => void) => {
     const file = files[index];
+    if (!file.id) {
+      throw new Error('File ID is required for removal');
+    }
+    if (!indexedDB) {
+      throw new Error('IndexedDB context not available');
+    }
     try {
-      await fileStorage.deleteFile(file.id || file.name);
+      await indexedDB.deleteFile(file.id);
       setFiles(files.filter((_, i) => i !== index));
     } catch (error) {
       console.error('Failed to remove file:', error);
       throw error;
     }
-  }, []);
+  }, [indexedDB]);
 
-  const storeFile = useCallback(async (file: File) => {
+  const storeFile = useCallback(async (file: File, fileId: string) => {
+    if (!indexedDB) {
+      throw new Error('IndexedDB context not available');
+    }
     try {
-      // Generate thumbnail for the file
-      const thumbnail = await generateThumbnailForFile(file);
+      // Store file with provided UUID from FileContext (thumbnail generated internally)
+      const metadata = await indexedDB.saveFile(file, fileId);
 
-      // Store file with thumbnail
-      const storedFile = await fileStorage.storeFile(file, thumbnail);
-
-      // Add the ID to the file object
-      Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-      return storedFile;
+      // Convert file to ArrayBuffer for StoredFile interface compatibility
+      const arrayBuffer = await file.arrayBuffer();
+      
+      // Return StoredFile format for compatibility with old API
+      return {
+        id: fileId,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        lastModified: file.lastModified,
+        data: arrayBuffer,
+        thumbnail: metadata.thumbnail
+      };
     } catch (error) {
       console.error('Failed to store file:', error);
       throw error;
     }
-  }, []);
+  }, [indexedDB]);
 
   const createFileSelectionHandlers = useCallback((
     selectedFiles: string[],
@@ -96,14 +137,23 @@ export const useFileManager = () => {
       setSelectedFiles([]);
     };
 
-    const selectMultipleFiles = async (files: FileWithUrl[], onFilesSelect: (files: File[]) => void) => {
+    const selectMultipleFiles = async (files: FileMetadata[], onStoredFilesSelect: (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => void) => {
       if (selectedFiles.length === 0) return;
 
       try {
-        const selectedFileObjects = files.filter(f => selectedFiles.includes(f.id || f.name));
-        const filePromises = selectedFileObjects.map(convertToFile);
-        const convertedFiles = await Promise.all(filePromises);
-        onFilesSelect(convertedFiles);
+        // Filter by UUID and convert to File objects
+        const selectedFileObjects = files.filter(f => selectedFiles.includes(f.id));
+        
+        // Use stored files flow that preserves IDs
+        const filesWithMetadata = await Promise.all(
+          selectedFileObjects.map(async (metadata) => ({
+            file: await convertToFile(metadata),
+            originalId: metadata.id,
+            metadata
+          }))
+        );
+        onStoredFilesSelect(filesWithMetadata);
+        
         clearSelection();
       } catch (error) {
         console.error('Failed to load selected files:', error);
@@ -119,12 +169,18 @@ export const useFileManager = () => {
   }, [convertToFile]);
 
   const touchFile = useCallback(async (id: string) => {
+    if (!indexedDB) {
+      console.warn('IndexedDB context not available for touch operation');
+      return;
+    }
     try {
-      await fileStorage.touchFile(id);
+      // Update access time - this will be handled by the cache in IndexedDBContext
+      // when the file is loaded, so we can just load it briefly to "touch" it
+      await indexedDB.loadFile(id);
     } catch (error) {
       console.error('Failed to touch file:', error);
     }
-  }, []);
+  }, [indexedDB]);
 
   return {
     loading,
diff --git a/frontend/src/hooks/useIndexedDBThumbnail.ts b/frontend/src/hooks/useIndexedDBThumbnail.ts
index 03a9e92e9..4f0d77c0e 100644
--- a/frontend/src/hooks/useIndexedDBThumbnail.ts
+++ b/frontend/src/hooks/useIndexedDBThumbnail.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
+import { FileMetadata } from "../types/file";
+import { useIndexedDB } from "../contexts/IndexedDBContext";
 import { generateThumbnailForFile } from "../utils/thumbnailUtils";
 
 /**
@@ -22,12 +22,13 @@ function calculateThumbnailScale(pageViewport: { width: number; height: number }
  * Hook for IndexedDB-aware thumbnail loading
  * Handles thumbnail generation for files not in IndexedDB
  */
-export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
+export function useIndexedDBThumbnail(file: FileMetadata | undefined | null): {
   thumbnail: string | null;
   isGenerating: boolean
 } {
   const [thumb, setThumb] = useState<string | null>(null);
   const [generating, setGenerating] = useState(false);
+  const indexedDB = useIndexedDB();
 
   useEffect(() => {
     let cancelled = false;
@@ -44,46 +45,36 @@ export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
         return;
       }
 
-      // Second priority: generate thumbnail for any file type
+      // Second priority: generate thumbnail for files under 100MB
       if (file.size < 100 * 1024 * 1024 && !generating) {
         setGenerating(true);
         try {
           let fileObject: File;
 
-          // Handle IndexedDB files vs regular File objects
-          if (file.storedInIndexedDB && file.id) {
-            // For IndexedDB files, recreate File object from stored data
-            const storedFile = await fileStorage.getFile(file.id);
-            if (!storedFile) {
+          // Try to load file from IndexedDB using new context
+          if (file.id && indexedDB) {
+            const loadedFile = await indexedDB.loadFile(file.id);
+            if (!loadedFile) {
               throw new Error('File not found in IndexedDB');
             }
-            fileObject = new File([storedFile.data], storedFile.name, {
-              type: storedFile.type,
-              lastModified: storedFile.lastModified
-            });
-          } else if ((file as any /* Fix me */).file) {
-            // For FileWithUrl objects that have a File object
-            fileObject = (file as any /* Fix me */).file;
-          } else if (file.id) {
-            // Fallback: try to get from IndexedDB even if storedInIndexedDB flag is missing
-            const storedFile = await fileStorage.getFile(file.id);
-            if (!storedFile) {
-              throw new Error('File not found in IndexedDB and no File object available');
-            }
-            fileObject = new File([storedFile.data], storedFile.name, {
-              type: storedFile.type,
-              lastModified: storedFile.lastModified
-            });
+            fileObject = loadedFile;
           } else {
-            throw new Error('File object not available and no ID for IndexedDB lookup');
+            throw new Error('File ID not available or IndexedDB context not available');
           }
 
           // Use the universal thumbnail generator
           const thumbnail = await generateThumbnailForFile(fileObject);
-          if (!cancelled && thumbnail) {
+          if (!cancelled) {
             setThumb(thumbnail);
-          } else if (!cancelled) {
-            setThumb(null);
+            
+            // Save thumbnail to IndexedDB for persistence
+            if (file.id && indexedDB && thumbnail) {
+              try {
+                await indexedDB.updateThumbnail(file.id, thumbnail);
+              } catch (error) {
+                console.warn('Failed to save thumbnail to IndexedDB:', error);
+              }
+            }
           }
         } catch (error) {
           console.warn('Failed to generate thumbnail for file', file.name, error);
@@ -92,14 +83,14 @@ export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
           if (!cancelled) setGenerating(false);
         }
       } else {
-        // Large files - generate placeholder
+        // Large files - no thumbnail
         setThumb(null);
       }
     }
 
     loadThumbnail();
     return () => { cancelled = true; };
-  }, [file, file?.thumbnail, file?.id]);
+  }, [file, file?.thumbnail, file?.id, indexedDB, generating]);
 
   return { thumbnail: thumb, isGenerating: generating };
 }
diff --git a/frontend/src/hooks/useMemoryManagement.ts b/frontend/src/hooks/useMemoryManagement.ts
deleted file mode 100644
index d27e5ed56..000000000
--- a/frontend/src/hooks/useMemoryManagement.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-import { useFileContext } from '../contexts/FileContext';
-
-/**
- * Hook for components that need to register resources with centralized memory management
- */
-export function useMemoryManagement() {
-  const { trackBlobUrl, trackPdfDocument, scheduleCleanup } = useFileContext();
-
-  const registerBlobUrl = useCallback((url: string) => {
-    trackBlobUrl(url);
-    return url;
-  }, [trackBlobUrl]);
-
-  const registerPdfDocument = useCallback((fileId: string, pdfDoc: any) => {
-    trackPdfDocument(fileId, pdfDoc);
-    return pdfDoc;
-  }, [trackPdfDocument]);
-
-  const cancelCleanup = useCallback((fileId: string) => {
-    // Cancel scheduled cleanup (user is actively using the file)
-    scheduleCleanup(fileId, -1); // -1 cancels the timer
-  }, [scheduleCleanup]);
-
-  return {
-    registerBlobUrl,
-    registerPdfDocument,
-    cancelCleanup
-  };
-}
\ No newline at end of file
diff --git a/frontend/src/hooks/usePDFProcessor.ts b/frontend/src/hooks/usePDFProcessor.ts
index 0a717a3a9..a35b777ca 100644
--- a/frontend/src/hooks/usePDFProcessor.ts
+++ b/frontend/src/hooks/usePDFProcessor.ts
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
-import { getDocument } from 'pdfjs-dist';
 import { PDFDocument, PDFPage } from '../types/pageEditor';
+import { pdfWorkerManager } from '../services/pdfWorkerManager';
 
 export function usePDFProcessor() {
   const [loading, setLoading] = useState(false);
@@ -13,7 +13,7 @@ export function usePDFProcessor() {
   ): Promise<string> => {
     try {
       const arrayBuffer = await file.arrayBuffer();
-      const pdf = await getDocument({ data: arrayBuffer }).promise;
+      const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
       const page = await pdf.getPage(pageNumber);
       
       const viewport = page.getViewport({ scale });
@@ -29,8 +29,8 @@ export function usePDFProcessor() {
       await page.render({ canvasContext: context, viewport }).promise;
       const thumbnail = canvas.toDataURL();
       
-      // Clean up
-      pdf.destroy();
+      // Clean up using worker manager
+      pdfWorkerManager.destroyDocument(pdf);
       
       return thumbnail;
     } catch (error) {
@@ -39,13 +39,35 @@ export function usePDFProcessor() {
     }
   }, []);
 
+  // Internal function to generate thumbnail from already-opened PDF
+  const generateThumbnailFromPDF = useCallback(async (
+    pdf: any, 
+    pageNumber: number, 
+    scale: number = 0.5
+  ): Promise<string> => {
+    const page = await pdf.getPage(pageNumber);
+    
+    const viewport = page.getViewport({ scale });
+    const canvas = document.createElement('canvas');
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Could not get canvas context');
+    }
+    
+    await page.render({ canvasContext: context, viewport }).promise;
+    return canvas.toDataURL();
+  }, []);
+
   const processPDFFile = useCallback(async (file: File): Promise<PDFDocument> => {
     setLoading(true);
     setError(null);
     
     try {
       const arrayBuffer = await file.arrayBuffer();
-      const pdf = await getDocument({ data: arrayBuffer }).promise;
+      const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
       const totalPages = pdf.numPages;
       
       const pages: PDFPage[] = [];
@@ -61,19 +83,19 @@ export function usePDFProcessor() {
         });
       }
       
-      // Generate thumbnails for first 10 pages immediately for better UX
+      // Generate thumbnails for first 10 pages immediately using the same PDF instance
       const priorityPages = Math.min(10, totalPages);
       for (let i = 1; i <= priorityPages; i++) {
         try {
-          const thumbnail = await generatePageThumbnail(file, i);
+          const thumbnail = await generateThumbnailFromPDF(pdf, i);
           pages[i - 1].thumbnail = thumbnail;
         } catch (error) {
           console.warn(`Failed to generate thumbnail for page ${i}:`, error);
         }
       }
       
-      // Clean up
-      pdf.destroy();
+      // Clean up using worker manager
+      pdfWorkerManager.destroyDocument(pdf);
       
       const document: PDFDocument = {
         id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
@@ -91,7 +113,7 @@ export function usePDFProcessor() {
     } finally {
       setLoading(false);
     }
-  }, [generatePageThumbnail]);
+  }, [generateThumbnailFromPDF]);
 
   return {
     processPDFFile,
diff --git a/frontend/src/hooks/usePdfSignatureDetection.ts b/frontend/src/hooks/usePdfSignatureDetection.ts
index ea7d0bdf0..17f90f2d9 100644
--- a/frontend/src/hooks/usePdfSignatureDetection.ts
+++ b/frontend/src/hooks/usePdfSignatureDetection.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import * as pdfjsLib from 'pdfjs-dist';
+import { pdfWorkerManager } from '../services/pdfWorkerManager';
 
 export interface PdfSignatureDetectionResult {
   hasDigitalSignatures: boolean;
@@ -21,14 +22,12 @@ export const usePdfSignatureDetection = (files: File[]): PdfSignatureDetectionRe
       let foundSignature = false;
 
       try {
-        // Set up PDF.js worker
-        pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-legacy/pdf.worker.mjs';
 
         for (const file of files) {
           const arrayBuffer = await file.arrayBuffer();
           
           try {
-            const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+            const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
 
             for (let i = 1; i <= pdf.numPages; i++) {
               const page = await pdf.getPage(i);
@@ -42,6 +41,9 @@ export const usePdfSignatureDetection = (files: File[]): PdfSignatureDetectionRe
 
               if (foundSignature) break;
             }
+            
+            // Clean up PDF document using worker manager
+            pdfWorkerManager.destroyDocument(pdf);
           } catch (error) {
             console.warn('Error analyzing PDF for signatures:', error);
           }
diff --git a/frontend/src/hooks/useThumbnailGeneration.ts b/frontend/src/hooks/useThumbnailGeneration.ts
index 2d1138401..09bec7c9c 100644
--- a/frontend/src/hooks/useThumbnailGeneration.ts
+++ b/frontend/src/hooks/useThumbnailGeneration.ts
@@ -1,12 +1,121 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { thumbnailGenerationService } from '../services/thumbnailGenerationService';
 
+// Request queue to handle concurrent thumbnail requests
+interface ThumbnailRequest {
+  pageId: string;
+  file: File;
+  pageNumber: number;
+  resolve: (thumbnail: string | null) => void;
+  reject: (error: Error) => void;
+}
+
+// Global request queue (shared across all hook instances)
+const requestQueue: ThumbnailRequest[] = [];
+let isProcessingQueue = false;
+let batchTimer: number | null = null;
+
+// Track active thumbnail requests to prevent duplicates across components
+const activeRequests = new Map<string, Promise<string | null>>();
+
+// Batch processing configuration
+const BATCH_SIZE = 20; // Process thumbnails in batches of 20 for better UI responsiveness
+const BATCH_DELAY = 100; // Wait 100ms to collect requests before processing
+const PRIORITY_BATCH_DELAY = 50; // Faster processing for the first batch (visible pages)
+
+// Process the queue in batches for better performance
+async function processRequestQueue() {
+  if (isProcessingQueue || requestQueue.length === 0) {
+    return;
+  }
+
+  isProcessingQueue = true;
+
+  try {
+    while (requestQueue.length > 0) {
+      // Sort queue by page number to prioritize visible pages first
+      requestQueue.sort((a, b) => a.pageNumber - b.pageNumber);
+      
+      // Take a batch of requests (same file only for efficiency)
+      const batchSize = Math.min(BATCH_SIZE, requestQueue.length);
+      const batch = requestQueue.splice(0, batchSize);
+      
+      // Group by file to process efficiently
+      const fileGroups = new Map<File, ThumbnailRequest[]>();
+      
+      // First, resolve any cached thumbnails immediately
+      const uncachedRequests: ThumbnailRequest[] = [];
+      
+      for (const request of batch) {
+        const cached = thumbnailGenerationService.getThumbnailFromCache(request.pageId);
+        if (cached) {
+          request.resolve(cached);
+        } else {
+          uncachedRequests.push(request);
+          
+          if (!fileGroups.has(request.file)) {
+            fileGroups.set(request.file, []);
+          }
+          fileGroups.get(request.file)!.push(request);
+        }
+      }
+      
+      // Process each file group with batch thumbnail generation
+      for (const [file, requests] of fileGroups) {
+        if (requests.length === 0) continue;
+        
+        try {
+          const pageNumbers = requests.map(req => req.pageNumber);
+          const arrayBuffer = await file.arrayBuffer();
+          
+          console.log(`📸 Batch generating ${requests.length} thumbnails for pages: ${pageNumbers.slice(0, 5).join(', ')}${pageNumbers.length > 5 ? '...' : ''}`);
+          
+          // Use file name as fileId for PDF document caching
+          const fileId = file.name + '_' + file.size + '_' + file.lastModified;
+          
+          const results = await thumbnailGenerationService.generateThumbnails(
+            fileId,
+            arrayBuffer,
+            pageNumbers,
+            { scale: 1.0, quality: 0.8, batchSize: BATCH_SIZE },
+            (progress) => {
+              // Optional: Could emit progress events here for UI feedback
+              console.log(`📸 Batch progress: ${progress.completed}/${progress.total} thumbnails generated`);
+            }
+          );
+          
+          // Match results back to requests and resolve
+          for (const request of requests) {
+            const result = results.find(r => r.pageNumber === request.pageNumber);
+            
+            if (result && result.success && result.thumbnail) {
+              thumbnailGenerationService.addThumbnailToCache(request.pageId, result.thumbnail);
+              request.resolve(result.thumbnail);
+            } else {
+              console.warn(`No result for page ${request.pageNumber}`);
+              request.resolve(null);
+            }
+          }
+          
+        } catch (error) {
+          console.warn(`Batch thumbnail generation failed for ${requests.length} pages:`, error);
+          // Reject all requests in this batch
+          requests.forEach(request => request.reject(error as Error));
+        }
+      }
+    }
+  } finally {
+    isProcessingQueue = false;
+  }
+}
+
 /**
  * Hook for tools that want to use thumbnail generation
  * Tools can choose whether to include visual features
  */
 export function useThumbnailGeneration() {
   const generateThumbnails = useCallback(async (
+    fileId: string,
     pdfArrayBuffer: ArrayBuffer,
     pageNumbers: number[],
     options: {
@@ -18,6 +127,7 @@ export function useThumbnailGeneration() {
     onProgress?: (progress: { completed: number; total: number; thumbnails: any[] }) => void
   ) => {
     return thumbnailGenerationService.generateThumbnails(
+      fileId,
       pdfArrayBuffer,
       pageNumbers,
       options,
@@ -42,15 +152,88 @@ export function useThumbnailGeneration() {
   }, []);
 
   const destroyThumbnails = useCallback(() => {
+    // Clear any pending batch timer
+    if (batchTimer) {
+      clearTimeout(batchTimer);
+      batchTimer = null;
+    }
+    
+    // Clear the queue and active requests
+    requestQueue.length = 0;
+    activeRequests.clear();
+    isProcessingQueue = false;
+    
     thumbnailGenerationService.destroy();
   }, []);
 
+  const clearPDFCacheForFile = useCallback((fileId: string) => {
+    thumbnailGenerationService.clearPDFCacheForFile(fileId);
+  }, []);
+
+  const requestThumbnail = useCallback(async (
+    pageId: string, 
+    file: File, 
+    pageNumber: number
+  ): Promise<string | null> => {
+    // Check cache first for immediate return
+    const cached = thumbnailGenerationService.getThumbnailFromCache(pageId);
+    if (cached) {
+      return cached;
+    }
+
+    // Check if this request is already being processed globally
+    const activeRequest = activeRequests.get(pageId);
+    if (activeRequest) {
+      return activeRequest;
+    }
+
+    // Create new request promise and track it globally
+    const requestPromise = new Promise<string | null>((resolve, reject) => {
+      requestQueue.push({
+        pageId,
+        file,
+        pageNumber,
+        resolve: (result: string | null) => {
+          activeRequests.delete(pageId);
+          resolve(result);
+        },
+        reject: (error: Error) => {
+          activeRequests.delete(pageId);
+          reject(error);
+        }
+      });
+      
+      // Schedule batch processing with a small delay to collect more requests
+      if (batchTimer) {
+        clearTimeout(batchTimer);
+      }
+      
+      // Use shorter delay for the first batch (pages 1-50) to show visible content faster
+      const isFirstBatch = requestQueue.length <= BATCH_SIZE && requestQueue.every(req => req.pageNumber <= BATCH_SIZE);
+      const delay = isFirstBatch ? PRIORITY_BATCH_DELAY : BATCH_DELAY;
+      
+      batchTimer = window.setTimeout(() => {
+        processRequestQueue().catch(error => {
+          console.error('Error processing thumbnail request queue:', error);
+        });
+        batchTimer = null;
+      }, delay);
+    });
+
+    // Track this request to prevent duplicates
+    activeRequests.set(pageId, requestPromise);
+    
+    return requestPromise;
+  }, []);
+
   return {
     generateThumbnails,
     addThumbnailToCache,
     getThumbnailFromCache,
     getCacheStats,
     stopGeneration,
-    destroyThumbnails
+    destroyThumbnails,
+    clearPDFCacheForFile,
+    requestThumbnail
   };
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/useUrlSync.ts b/frontend/src/hooks/useUrlSync.ts
new file mode 100644
index 000000000..ef181c04b
--- /dev/null
+++ b/frontend/src/hooks/useUrlSync.ts
@@ -0,0 +1,125 @@
+/**
+ * URL synchronization hooks for tool routing
+ */
+
+import { useEffect, useCallback } from 'react';
+import { ModeType } from '../contexts/NavigationContext';
+import { parseToolRoute, updateToolRoute, clearToolRoute } from '../utils/urlRouting';
+
+/**
+ * Hook to sync navigation mode with URL
+ */
+export function useNavigationUrlSync(
+  currentMode: ModeType,
+  setMode: (mode: ModeType) => void,
+  enableSync: boolean = true
+) {
+  // Initialize mode from URL on mount
+  useEffect(() => {
+    if (!enableSync) return;
+    
+    const route = parseToolRoute();
+    if (route.mode !== currentMode) {
+      setMode(route.mode);
+    }
+  }, []); // Only run on mount
+
+  // Update URL when mode changes
+  useEffect(() => {
+    if (!enableSync) return;
+    
+    if (currentMode === 'pageEditor') {
+      clearToolRoute();
+    } else {
+      updateToolRoute(currentMode, currentMode);
+    }
+  }, [currentMode, enableSync]);
+
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    if (!enableSync) return;
+    
+    const handlePopState = () => {
+      const route = parseToolRoute();
+      if (route.mode !== currentMode) {
+        setMode(route.mode);
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [currentMode, setMode, enableSync]);
+}
+
+/**
+ * Hook to sync tool workflow with URL
+ */
+export function useToolWorkflowUrlSync(
+  selectedToolKey: string | null,
+  selectTool: (toolKey: string) => void,
+  clearTool: () => void,
+  enableSync: boolean = true
+) {
+  // Initialize tool from URL on mount
+  useEffect(() => {
+    if (!enableSync) return;
+    
+    const route = parseToolRoute();
+    if (route.toolKey && route.toolKey !== selectedToolKey) {
+      selectTool(route.toolKey);
+    } else if (!route.toolKey && selectedToolKey) {
+      clearTool();
+    }
+  }, []); // Only run on mount
+
+  // Update URL when tool changes
+  useEffect(() => {
+    if (!enableSync) return;
+    
+    if (selectedToolKey) {
+      const route = parseToolRoute();
+      if (route.toolKey !== selectedToolKey) {
+        updateToolRoute(selectedToolKey as ModeType, selectedToolKey);
+      }
+    }
+  }, [selectedToolKey, enableSync]);
+}
+
+/**
+ * Hook to get current URL route information
+ */
+export function useCurrentRoute() {
+  const getCurrentRoute = useCallback(() => {
+    return parseToolRoute();
+  }, []);
+
+  return getCurrentRoute;
+}
+
+/**
+ * Hook to programmatically navigate to tools
+ */
+export function useToolNavigation() {
+  const navigateToTool = useCallback((toolKey: string) => {
+    updateToolRoute(toolKey as ModeType, toolKey);
+    
+    // Dispatch a custom event to notify other components
+    window.dispatchEvent(new CustomEvent('toolNavigation', { 
+      detail: { toolKey } 
+    }));
+  }, []);
+
+  const navigateToHome = useCallback(() => {
+    clearToolRoute();
+    
+    // Dispatch a custom event to notify other components
+    window.dispatchEvent(new CustomEvent('toolNavigation', { 
+      detail: { toolKey: null } 
+    }));
+  }, []);
+
+  return {
+    navigateToTool,
+    navigateToHome
+  };
+}
\ No newline at end of file
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index d26a40caa..022789f6c 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useFileContext } from "../contexts/FileContext";
-import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
+import { useFileActions, useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 import { ToolWorkflowProvider, useToolWorkflow } from "../contexts/ToolWorkflowContext";
 import { Group } from "@mantine/core";
 import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
@@ -22,7 +22,7 @@ function HomePageContent() {
 
   const { quickAccessRef } = sidebarRefs;
 
-  const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
+  const { setSelectedFiles } = useFileSelection();
 
   const { selectedTool, selectedToolKey } = useToolWorkflow();
 
@@ -38,17 +38,7 @@ function HomePageContent() {
     ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl
   });
 
-  // Update file selection context when tool changes
-  useEffect(() => {
-    if (selectedTool) {
-      setMaxFiles(selectedTool.maxFiles ?? -1);
-      setIsToolMode(true);
-    } else {
-      setMaxFiles(-1);
-      setIsToolMode(false);
-      setSelectedFiles([]);
-    }
-  }, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
+  // Note: File selection limits are now handled directly by individual tools
 
   return (
     <Group
@@ -65,15 +55,23 @@ function HomePageContent() {
   );
 }
 
-export default function HomePage() {
-  const { setCurrentView } = useFileContext();
+function HomePageWithProviders() {
+  const { actions } = useNavigationActions();
+  
+  // Wrapper to convert string to ModeType
+  const handleViewChange = (view: string) => {
+    actions.setMode(view as any); // ToolWorkflowContext should validate this
+  };
+  
   return (
-    <FileSelectionProvider>
-      <ToolWorkflowProvider onViewChange={setCurrentView as any /* FIX ME */}>
-        <SidebarProvider>
-          <HomePageContent />
-        </SidebarProvider>
-      </ToolWorkflowProvider>
-    </FileSelectionProvider>
+    <ToolWorkflowProvider onViewChange={handleViewChange}>
+      <SidebarProvider>
+        <HomePageContent />
+      </SidebarProvider>
+    </ToolWorkflowProvider>
   );
-}
\ No newline at end of file
+}
+
+export default function HomePage() {
+  return <HomePageWithProviders />;
+}
diff --git a/frontend/src/services/enhancedPDFProcessingService.ts b/frontend/src/services/enhancedPDFProcessingService.ts
index 086846515..f9f067c30 100644
--- a/frontend/src/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/services/enhancedPDFProcessingService.ts
@@ -1,12 +1,10 @@
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+import * as pdfjsLib from 'pdfjs-dist';
 import { ProcessedFile, ProcessingState, PDFPage, ProcessingStrategy, ProcessingConfig, ProcessingMetrics } from '../types/processing';
 import { ProcessingCache } from './processingCache';
 import { FileHasher } from '../utils/fileHash';
 import { FileAnalyzer } from './fileAnalyzer';
 import { ProcessingErrorHandler } from './processingErrorHandler';
-
-// Set up PDF.js worker
-GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+import { pdfWorkerManager } from './pdfWorkerManager';
 
 export class EnhancedPDFProcessingService {
   private static instance: EnhancedPDFProcessingService;
@@ -183,43 +181,45 @@ export class EnhancedPDFProcessingService {
     state: ProcessingState
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
-    const pdf = await getDocument({ data: arrayBuffer }).promise;
-    const totalPages = pdf.numPages;
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+    
+    try {
+      const totalPages = pdf.numPages;
 
-    state.progress = 10;
-    this.notifyListeners();
+      state.progress = 10;
+      this.notifyListeners();
 
-    const pages: PDFPage[] = [];
+      const pages: PDFPage[] = [];
 
-    for (let i = 1; i <= totalPages; i++) {
-      // Check for cancellation
-      if (state.cancellationToken?.signal.aborted) {
-        pdf.destroy();
-        throw new Error('Processing cancelled');
+      for (let i = 1; i <= totalPages; i++) {
+        // Check for cancellation
+        if (state.cancellationToken?.signal.aborted) {
+          throw new Error('Processing cancelled');
+        }
+
+        const page = await pdf.getPage(i);
+        const thumbnail = await this.renderPageThumbnail(page, config.thumbnailQuality);
+
+        pages.push({
+          id: `${file.name}-page-${i}`,
+          pageNumber: i,
+          thumbnail,
+          rotation: 0,
+          selected: false
+        });
+
+        // Update progress
+        state.progress = 10 + (i / totalPages) * 85;
+        state.currentPage = i;
+        this.notifyListeners();
       }
 
-      const page = await pdf.getPage(i);
-      const thumbnail = await this.renderPageThumbnail(page, config.thumbnailQuality);
-
-      pages.push({
-        id: `${file.name}-page-${i}`,
-        pageNumber: i,
-        thumbnail,
-        rotation: 0,
-        selected: false
-      });
-
-      // Update progress
-      state.progress = 10 + (i / totalPages) * 85;
-      state.currentPage = i;
+      return this.createProcessedFile(file, pages, totalPages);
+    } finally {
+      pdfWorkerManager.destroyDocument(pdf);
+      state.progress = 100;
       this.notifyListeners();
     }
-
-    pdf.destroy();
-    state.progress = 100;
-    this.notifyListeners();
-
-    return this.createProcessedFile(file, pages, totalPages);
   }
 
   /**
@@ -231,7 +231,7 @@ export class EnhancedPDFProcessingService {
     state: ProcessingState
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
-    const pdf = await getDocument({ data: arrayBuffer }).promise;
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
 
     state.progress = 10;
@@ -243,7 +243,7 @@ export class EnhancedPDFProcessingService {
     // Process priority pages first
     for (let i = 1; i <= priorityCount; i++) {
       if (state.cancellationToken?.signal.aborted) {
-        pdf.destroy();
+        pdfWorkerManager.destroyDocument(pdf);
         throw new Error('Processing cancelled');
       }
 
@@ -274,7 +274,7 @@ export class EnhancedPDFProcessingService {
       });
     }
 
-    pdf.destroy();
+    pdfWorkerManager.destroyDocument(pdf);
     state.progress = 100;
     this.notifyListeners();
 
@@ -290,7 +290,7 @@ export class EnhancedPDFProcessingService {
     state: ProcessingState
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
-    const pdf = await getDocument({ data: arrayBuffer }).promise;
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
 
     state.progress = 10;
@@ -305,7 +305,7 @@ export class EnhancedPDFProcessingService {
 
     for (let i = 1; i <= firstChunkEnd; i++) {
       if (state.cancellationToken?.signal.aborted) {
-        pdf.destroy();
+        pdfWorkerManager.destroyDocument(pdf);
         throw new Error('Processing cancelled');
       }
 
@@ -342,7 +342,7 @@ export class EnhancedPDFProcessingService {
       });
     }
 
-    pdf.destroy();
+    pdfWorkerManager.destroyDocument(pdf);
     state.progress = 100;
     this.notifyListeners();
 
@@ -358,7 +358,7 @@ export class EnhancedPDFProcessingService {
     state: ProcessingState
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
-    const pdf = await getDocument({ data: arrayBuffer }).promise;
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
 
     state.progress = 50;
@@ -376,7 +376,7 @@ export class EnhancedPDFProcessingService {
       });
     }
 
-    pdf.destroy();
+    pdfWorkerManager.destroyDocument(pdf);
     state.progress = 100;
     this.notifyListeners();
 
@@ -519,7 +519,10 @@ export class EnhancedPDFProcessingService {
     this.notifyListeners();
 
     // Force memory cleanup hint
-    setTimeout(() => window?.gc?.(), 100);
+    if (typeof window !== 'undefined' && window.gc) {
+      let gc = window.gc;
+      setTimeout(() => gc(), 100);
+    }
   }
 
   /**
@@ -537,6 +540,15 @@ export class EnhancedPDFProcessingService {
     this.processing.clear();
     this.notifyListeners();
   }
+
+  /**
+   * Emergency cleanup - destroy all PDF workers
+   */
+  emergencyCleanup(): void {
+    this.clearAllProcessing();
+    this.clearAll();
+    pdfWorkerManager.destroyAllDocuments();
+  }
 }
 
 // Export singleton instance
diff --git a/frontend/src/services/fileAnalyzer.ts b/frontend/src/services/fileAnalyzer.ts
index 6c5f3ec1f..537692600 100644
--- a/frontend/src/services/fileAnalyzer.ts
+++ b/frontend/src/services/fileAnalyzer.ts
@@ -1,5 +1,5 @@
-import { getDocument } from 'pdfjs-dist';
 import { FileAnalysis, ProcessingStrategy } from '../types/processing';
+import { pdfWorkerManager } from './pdfWorkerManager';
 
 export class FileAnalyzer {
   private static readonly SIZE_THRESHOLDS = {
@@ -66,17 +66,16 @@ export class FileAnalyzer {
       // For large files, try the whole file first (PDF.js needs the complete structure)
       const arrayBuffer = await file.arrayBuffer();
 
-      const pdf = await getDocument({
-        data: arrayBuffer,
+      const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
         stopAtErrors: false, // Don't stop at minor errors
         verbosity: 0 // Suppress PDF.js warnings
-      }).promise;
+      });
 
       const pageCount = pdf.numPages;
       const isEncrypted = (pdf as any).isEncrypted;
 
-      // Clean up
-      pdf.destroy();
+      // Clean up using worker manager
+      pdfWorkerManager.destroyDocument(pdf);
 
       return {
         pageCount,
diff --git a/frontend/src/services/fileOperationsService.ts b/frontend/src/services/fileOperationsService.ts
deleted file mode 100644
index d13965837..000000000
--- a/frontend/src/services/fileOperationsService.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { FileWithUrl } from "../types/file";
-import { fileStorage, StorageStats } from "./fileStorage";
-import { loadFilesFromIndexedDB, createEnhancedFileFromStored, cleanupFileUrls } from "../utils/fileUtils";
-import { generateThumbnailForFile } from "../utils/thumbnailUtils";
-import { updateStorageStatsIncremental } from "../utils/storageUtils";
-
-/**
- * Service for file storage operations
- * Contains all IndexedDB operations and file management logic
- */
-export const fileOperationsService = {
-  
-  /**
-   * Load storage statistics
-   */
-  async loadStorageStats(): Promise<StorageStats | null> {
-    try {
-      return await fileStorage.getStorageStats();
-    } catch (error) {
-      console.error('Failed to load storage stats:', error);
-      return null;
-    }
-  },
-
-  /**
-   * Force reload files from IndexedDB
-   */
-  async forceReloadFiles(): Promise<FileWithUrl[]> {
-    try {
-      return await loadFilesFromIndexedDB();
-    } catch (error) {
-      console.error('Failed to force reload files:', error);
-      return [];
-    }
-  },
-
-  /**
-   * Load existing files from IndexedDB if not already loaded
-   */
-  async loadExistingFiles(
-    filesLoaded: boolean, 
-    currentFiles: FileWithUrl[]
-  ): Promise<FileWithUrl[]> {
-    if (filesLoaded && currentFiles.length > 0) {
-      return currentFiles;
-    }
-    
-    try {
-      await fileStorage.init();
-      const storedFiles = await fileStorage.getAllFileMetadata();
-      
-      // Detect if IndexedDB was purged by comparing with current UI state
-      if (currentFiles.length > 0 && storedFiles.length === 0) {
-        console.warn('IndexedDB appears to have been purged - clearing UI state');
-        return [];
-      }
-      
-      return await loadFilesFromIndexedDB();
-    } catch (error) {
-      console.error('Failed to load existing files:', error);
-      return [];
-    }
-  },
-
-  /**
-   * Upload files to IndexedDB with thumbnail generation
-   */
-  async uploadFiles(
-    uploadedFiles: File[],
-    useIndexedDB: boolean
-  ): Promise<FileWithUrl[]> {
-    const newFiles: FileWithUrl[] = [];
-
-    for (const file of uploadedFiles) {
-      if (useIndexedDB) {
-        try {
-          console.log('Storing file in IndexedDB:', file.name);
-          
-          // Generate thumbnail only during upload
-          const thumbnail = await generateThumbnailForFile(file);
-          
-          const storedFile = await fileStorage.storeFile(file, thumbnail);
-          console.log('File stored with ID:', storedFile.id);
-          
-          const baseFile = fileStorage.createFileFromStored(storedFile);
-          const enhancedFile = createEnhancedFileFromStored(storedFile, thumbnail);
-          
-          // Copy File interface methods from baseFile
-          enhancedFile.arrayBuffer = baseFile.arrayBuffer.bind(baseFile);
-          enhancedFile.slice = baseFile.slice.bind(baseFile);
-          enhancedFile.stream = baseFile.stream.bind(baseFile);
-          enhancedFile.text = baseFile.text.bind(baseFile);
-          
-          newFiles.push(enhancedFile);
-        } catch (error) {
-          console.error('Failed to store file in IndexedDB:', error);
-          // Fallback to RAM storage
-          const enhancedFile: FileWithUrl = Object.assign(file, {
-            url: URL.createObjectURL(file),
-            storedInIndexedDB: false
-          });
-          newFiles.push(enhancedFile);
-        }
-      } else {
-        // IndexedDB disabled - use RAM
-        const enhancedFile: FileWithUrl = Object.assign(file, {
-          url: URL.createObjectURL(file),
-          storedInIndexedDB: false
-        });
-        newFiles.push(enhancedFile);
-      }
-    }
-
-    return newFiles;
-  },
-
-  /**
-   * Remove a file from storage
-   */
-  async removeFile(file: FileWithUrl): Promise<void> {
-    // Clean up blob URL
-    if (file.url && !file.url.startsWith('indexeddb:')) {
-      URL.revokeObjectURL(file.url);
-    }
-
-    // Remove from IndexedDB if stored there
-    if (file.storedInIndexedDB && file.id) {
-      try {
-        await fileStorage.deleteFile(file.id);
-      } catch (error) {
-        console.error('Failed to delete file from IndexedDB:', error);
-      }
-    }
-  },
-
-  /**
-   * Clear all files from storage
-   */
-  async clearAllFiles(files: FileWithUrl[]): Promise<void> {
-    // Clean up all blob URLs
-    cleanupFileUrls(files);
-
-    // Clear IndexedDB
-    try {
-      await fileStorage.clearAll();
-    } catch (error) {
-      console.error('Failed to clear IndexedDB:', error);
-    }
-  },
-
-  /**
-   * Create blob URL for file viewing
-   */
-  async createBlobUrlForFile(file: FileWithUrl): Promise<string> {
-    // For large files, use IndexedDB direct access to avoid memory issues
-    const FILE_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
-    if (file.size > FILE_SIZE_LIMIT) {
-      console.warn(`File ${file.name} is too large for blob URL. Use direct IndexedDB access.`);
-      return `indexeddb:${file.id}`;
-    }
-    
-    // For all files, avoid persistent blob URLs
-    if (file.storedInIndexedDB && file.id) {
-      const storedFile = await fileStorage.getFile(file.id);
-      if (storedFile) {
-        return fileStorage.createBlobUrl(storedFile);
-      }
-    }
-    
-    // Fallback for files not in IndexedDB
-    return URL.createObjectURL(file);
-  },
-
-  /**
-   * Check for IndexedDB purge
-   */
-  async checkForPurge(currentFiles: FileWithUrl[]): Promise<boolean> {
-    if (currentFiles.length === 0) return false;
-    
-    try {
-      await fileStorage.init();
-      const storedFiles = await fileStorage.getAllFileMetadata();
-      return storedFiles.length === 0; // Purge detected if no files in storage but UI shows files
-    } catch (error) {
-      console.error('Error checking for purge:', error);
-      return true; // Assume purged if can't access IndexedDB
-    }
-  },
-
-  /**
-   * Update storage stats incrementally (re-export utility for convenience)
-   */
-  updateStorageStatsIncremental
-};
\ No newline at end of file
diff --git a/frontend/src/services/fileProcessingService.ts b/frontend/src/services/fileProcessingService.ts
new file mode 100644
index 000000000..cb7682c8b
--- /dev/null
+++ b/frontend/src/services/fileProcessingService.ts
@@ -0,0 +1,209 @@
+/**
+ * Centralized file processing service
+ * Handles metadata discovery, page counting, and thumbnail generation
+ * Called when files are added to FileContext, before any view sees them
+ */
+
+import * as pdfjsLib from 'pdfjs-dist';
+import { generateThumbnailForFile } from '../utils/thumbnailUtils';
+import { pdfWorkerManager } from './pdfWorkerManager';
+
+export interface ProcessedFileMetadata {
+  totalPages: number;
+  pages: Array<{
+    pageNumber: number;
+    thumbnail?: string;
+    rotation: number;
+    splitBefore: boolean;
+  }>;
+  thumbnailUrl?: string; // Page 1 thumbnail for FileEditor
+  lastProcessed: number;
+}
+
+export interface FileProcessingResult {
+  success: boolean;
+  metadata?: ProcessedFileMetadata;
+  error?: string;
+}
+
+interface ProcessingOperation {
+  promise: Promise<FileProcessingResult>;
+  abortController: AbortController;
+}
+
+class FileProcessingService {
+  private processingCache = new Map<string, ProcessingOperation>();
+
+  /**
+   * Process a file to extract metadata, page count, and generate thumbnails
+   * This is the single source of truth for file processing
+   */
+  async processFile(file: File, fileId: string): Promise<FileProcessingResult> {
+    // Check if we're already processing this file
+    const existingOperation = this.processingCache.get(fileId);
+    if (existingOperation) {
+      console.log(`📁 FileProcessingService: Using cached processing for ${file.name}`);
+      return existingOperation.promise;
+    }
+
+    // Create abort controller for this operation
+    const abortController = new AbortController();
+    
+    // Create processing promise
+    const processingPromise = this.performProcessing(file, fileId, abortController);
+    
+    // Store operation with abort controller
+    const operation: ProcessingOperation = {
+      promise: processingPromise,
+      abortController
+    };
+    this.processingCache.set(fileId, operation);
+
+    // Clean up cache after completion
+    processingPromise.finally(() => {
+      this.processingCache.delete(fileId);
+    });
+
+    return processingPromise;
+  }
+
+  private async performProcessing(file: File, fileId: string, abortController: AbortController): Promise<FileProcessingResult> {
+    console.log(`📁 FileProcessingService: Starting processing for ${file.name} (${fileId})`);
+
+    try {
+      // Check for cancellation at start
+      if (abortController.signal.aborted) {
+        throw new Error('Processing cancelled');
+      }
+
+      let totalPages = 1;
+      let thumbnailUrl: string | undefined;
+
+      // Handle PDF files
+      if (file.type === 'application/pdf') {
+        // Read arrayBuffer once and reuse for both PDF.js and fallback
+        const arrayBuffer = await file.arrayBuffer();
+        
+        // Check for cancellation after async operation
+        if (abortController.signal.aborted) {
+          throw new Error('Processing cancelled');
+        }
+        
+        // Discover page count using PDF.js (most accurate)
+        try {
+          const pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
+            disableAutoFetch: true,
+            disableStream: true
+          });
+
+          totalPages = pdfDoc.numPages;
+          console.log(`📁 FileProcessingService: PDF.js discovered ${totalPages} pages for ${file.name}`);
+
+          // Clean up immediately
+          pdfWorkerManager.destroyDocument(pdfDoc);
+          
+          // Check for cancellation after PDF.js processing
+          if (abortController.signal.aborted) {
+            throw new Error('Processing cancelled');
+          }
+        } catch (pdfError) {
+          console.warn(`📁 FileProcessingService: PDF.js failed for ${file.name}, setting pages to 0:`, pdfError);
+          totalPages = 0; // Unknown page count - UI will hide page count display
+        }
+      }
+
+      // Generate page 1 thumbnail
+      try {
+        thumbnailUrl = await generateThumbnailForFile(file);
+        console.log(`📁 FileProcessingService: Generated thumbnail for ${file.name}`);
+        
+        // Check for cancellation after thumbnail generation
+        if (abortController.signal.aborted) {
+          throw new Error('Processing cancelled');
+        }
+      } catch (thumbError) {
+        console.warn(`📁 FileProcessingService: Thumbnail generation failed for ${file.name}:`, thumbError);
+      }
+
+      // Create page structure
+      const pages = Array.from({ length: totalPages }, (_, index) => ({
+        pageNumber: index + 1,
+        thumbnail: index === 0 ? thumbnailUrl : undefined, // Only page 1 gets thumbnail initially
+        rotation: 0,
+        splitBefore: false
+      }));
+
+      const metadata: ProcessedFileMetadata = {
+        totalPages,
+        pages,
+        thumbnailUrl, // For FileEditor display
+        lastProcessed: Date.now()
+      };
+
+      console.log(`📁 FileProcessingService: Processing complete for ${file.name} - ${totalPages} pages`);
+      
+      return {
+        success: true,
+        metadata
+      };
+
+    } catch (error) {
+      console.error(`📁 FileProcessingService: Processing failed for ${file.name}:`, error);
+      
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown processing error'
+      };
+    }
+  }
+
+  /**
+   * Clear all processing caches
+   */
+  clearCache(): void {
+    this.processingCache.clear();
+  }
+
+  /**
+   * Check if a file is currently being processed
+   */
+  isProcessing(fileId: string): boolean {
+    return this.processingCache.has(fileId);
+  }
+
+  /**
+   * Cancel processing for a specific file
+   */
+  cancelProcessing(fileId: string): boolean {
+    const operation = this.processingCache.get(fileId);
+    if (operation) {
+      operation.abortController.abort();
+      console.log(`📁 FileProcessingService: Cancelled processing for ${fileId}`);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Cancel all ongoing processing operations
+   */
+  cancelAllProcessing(): void {
+    this.processingCache.forEach((operation, fileId) => {
+      operation.abortController.abort();
+      console.log(`📁 FileProcessingService: Cancelled processing for ${fileId}`);
+    });
+    console.log(`📁 FileProcessingService: Cancelled ${this.processingCache.size} processing operations`);
+  }
+
+  /**
+   * Emergency cleanup - cancel all processing and destroy workers
+   */
+  emergencyCleanup(): void {
+    this.cancelAllProcessing();
+    this.clearCache();
+    pdfWorkerManager.destroyAllDocuments();
+  }
+}
+
+// Export singleton instance
+export const fileProcessingService = new FileProcessingService();
\ No newline at end of file
diff --git a/frontend/src/services/fileStorage.ts b/frontend/src/services/fileStorage.ts
index 1e7a73ee5..cdbe183a5 100644
--- a/frontend/src/services/fileStorage.ts
+++ b/frontend/src/services/fileStorage.ts
@@ -1,8 +1,11 @@
 /**
  * IndexedDB File Storage Service
  * Provides high-capacity file storage for PDF processing
+ * Now uses centralized IndexedDB manager
  */
 
+import { indexedDBManager, DATABASE_CONFIGS } from './indexedDBManager';
+
 export interface StoredFile {
   id: string;
   name: string;
@@ -22,75 +25,26 @@ export interface StorageStats {
 }
 
 class FileStorageService {
-  private dbName = 'stirling-pdf-files';
-  private dbVersion = 2; // Increment version to force schema update
-  private storeName = 'files';
-  private db: IDBDatabase | null = null;
-  private initPromise: Promise<void> | null = null;
+  private readonly dbConfig = DATABASE_CONFIGS.FILES;
+  private readonly storeName = 'files';
 
   /**
-   * Initialize the IndexedDB database (singleton pattern)
+   * Get database connection using centralized manager
    */
-  async init(): Promise<void> {
-    if (this.db) {
-      return Promise.resolve();
-    }
-
-    if (this.initPromise) {
-      return this.initPromise;
-    }
-
-    this.initPromise = new Promise((resolve, reject) => {
-      const request = indexedDB.open(this.dbName, this.dbVersion);
-
-      request.onerror = () => {
-        this.initPromise = null;
-        reject(request.error);
-      };
-
-      request.onsuccess = () => {
-        this.db = request.result;
-        console.log('IndexedDB connection established');
-        resolve();
-      };
-
-      request.onupgradeneeded = (event) => {
-        const db = (event.target as IDBOpenDBRequest).result;
-        const oldVersion = (event as any).oldVersion;
-
-        console.log('IndexedDB upgrade needed from version', oldVersion, 'to', this.dbVersion);
-
-        // Only recreate object store if it doesn't exist or if upgrading from version < 2
-        if (!db.objectStoreNames.contains(this.storeName)) {
-          const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-          store.createIndex('name', 'name', { unique: false });
-          store.createIndex('lastModified', 'lastModified', { unique: false });
-          console.log('IndexedDB object store created with keyPath: id');
-        } else if (oldVersion < 2) {
-          // Only delete and recreate if upgrading from version 1 to 2
-          db.deleteObjectStore(this.storeName);
-          const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-          store.createIndex('name', 'name', { unique: false });
-          store.createIndex('lastModified', 'lastModified', { unique: false });
-          console.log('IndexedDB object store recreated with keyPath: id (version upgrade)');
-        }
-      };
-    });
-
-    return this.initPromise;
+  private async getDatabase(): Promise<IDBDatabase> {
+    return indexedDBManager.openDatabase(this.dbConfig);
   }
 
   /**
-   * Store a file in IndexedDB
+   * Store a file in IndexedDB with external UUID
    */
-  async storeFile(file: File, thumbnail?: string): Promise<StoredFile> {
-    if (!this.db) await this.init();
+  async storeFile(file: File, fileId: string, thumbnail?: string): Promise<StoredFile> {
+    const db = await this.getDatabase();
 
-    const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     const arrayBuffer = await file.arrayBuffer();
 
     const storedFile: StoredFile = {
-      id,
+      id: fileId, // Use provided UUID
       name: file.name,
       type: file.type,
       size: file.size,
@@ -101,13 +55,13 @@ class FileStorageService {
 
     return new Promise((resolve, reject) => {
       try {
-        const transaction = this.db!.transaction([this.storeName], 'readwrite');
+        const transaction = db.transaction([this.storeName], 'readwrite');
         const store = transaction.objectStore(this.storeName);
 
         // Debug logging
         console.log('Object store keyPath:', store.keyPath);
-        console.log('Storing file:', {
-          id: storedFile.id,
+        console.log('Storing file with UUID:', {
+          id: storedFile.id, // Now a UUID from FileContext
           name: storedFile.name,
           hasData: !!storedFile.data,
           dataSize: storedFile.data.byteLength
@@ -135,10 +89,10 @@ class FileStorageService {
    * Retrieve a file from IndexedDB
    */
   async getFile(id: string): Promise<StoredFile | null> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], 'readonly');
       const store = transaction.objectStore(this.storeName);
       const request = store.get(id);
 
@@ -151,10 +105,10 @@ class FileStorageService {
    * Get all stored files (WARNING: loads all data into memory)
    */
   async getAllFiles(): Promise<StoredFile[]> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], 'readonly');
       const store = transaction.objectStore(this.storeName);
       const request = store.getAll();
 
@@ -176,10 +130,10 @@ class FileStorageService {
    * Get metadata of all stored files (without loading data into memory)
    */
   async getAllFileMetadata(): Promise<Omit<StoredFile, 'data'>[]> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], 'readonly');
       const store = transaction.objectStore(this.storeName);
       const request = store.openCursor();
       const files: Omit<StoredFile, 'data'>[] = [];
@@ -202,7 +156,7 @@ class FileStorageService {
           }
           cursor.continue();
         } else {
-          console.log('Loaded metadata for', files.length, 'files without loading data');
+          // Metadata loaded efficiently without file data
           resolve(files);
         }
       };
@@ -213,10 +167,10 @@ class FileStorageService {
    * Delete a file from IndexedDB
    */
   async deleteFile(id: string): Promise<void> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], 'readwrite');
       const store = transaction.objectStore(this.storeName);
       const request = store.delete(id);
 
@@ -229,9 +183,9 @@ class FileStorageService {
    * Update the lastModified timestamp of a file (for most recently used sorting)
    */
   async touchFile(id: string): Promise<boolean> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], 'readwrite');
       const store = transaction.objectStore(this.storeName);
       
       const getRequest = store.get(id);
@@ -255,10 +209,10 @@ class FileStorageService {
    * Clear all stored files
    */
   async clearAll(): Promise<void> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], 'readwrite');
       const store = transaction.objectStore(this.storeName);
       const request = store.clear();
 
@@ -271,8 +225,6 @@ class FileStorageService {
    * Get storage statistics (only our IndexedDB usage)
    */
   async getStorageStats(): Promise<StorageStats> {
-    if (!this.db) await this.init();
-
     let used = 0;
     let available = 0;
     let quota: number | undefined;
@@ -315,10 +267,10 @@ class FileStorageService {
    * Get file count quickly without loading metadata
    */
   async getFileCount(): Promise<number> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], 'readonly');
       const store = transaction.objectStore(this.storeName);
       const request = store.count();
 
@@ -365,9 +317,9 @@ class FileStorageService {
     // Also check our specific database with different versions
     for (let version = 1; version <= 3; version++) {
       try {
-        console.log(`Trying to open ${this.dbName} version ${version}...`);
+        console.log(`Trying to open ${this.dbConfig.name} version ${version}...`);
         const db = await new Promise<IDBDatabase>((resolve, reject) => {
-          const request = indexedDB.open(this.dbName, version);
+          const request = indexedDB.open(this.dbConfig.name, version);
           request.onsuccess = () => resolve(request.result);
           request.onerror = () => reject(request.error);
           request.onupgradeneeded = () => {
@@ -400,10 +352,10 @@ class FileStorageService {
    * Debug method to check what's actually in the database
    */
   async debugDatabaseContents(): Promise<void> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = this.db!.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], 'readonly');
       const store = transaction.objectStore(this.storeName);
 
       // First try getAll to see if there's anything
@@ -460,7 +412,8 @@ class FileStorageService {
   }
 
   /**
-   * Convert StoredFile back to File object for compatibility
+   * Convert StoredFile back to pure File object without mutations
+   * Returns a clean File object - use FileContext.addStoredFiles() for proper metadata handling
    */
   createFileFromStored(storedFile: StoredFile): File {
     if (!storedFile || !storedFile.data) {
@@ -477,13 +430,26 @@ class FileStorageService {
       lastModified: storedFile.lastModified
     });
 
-    // Add custom properties for compatibility
-    Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
-    Object.defineProperty(file, 'thumbnail', { value: storedFile.thumbnail, writable: false });
-
+    // Use FileContext.addStoredFiles() to properly associate with metadata
     return file;
   }
 
+  /**
+   * Convert StoredFile to the format expected by FileContext.addStoredFiles()
+   * This is the recommended way to load stored files into FileContext
+   */
+  createFileWithMetadata(storedFile: StoredFile): { file: File; originalId: string; metadata: { thumbnail?: string } } {
+    const file = this.createFileFromStored(storedFile);
+    
+    return {
+      file,
+      originalId: storedFile.id,
+      metadata: {
+        thumbnail: storedFile.thumbnail
+      }
+    };
+  }
+
   /**
    * Create blob URL for stored file
    */
@@ -527,11 +493,11 @@ class FileStorageService {
    * Update thumbnail for an existing file
    */
   async updateThumbnail(id: string, thumbnail: string): Promise<boolean> {
-    if (!this.db) await this.init();
+    const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
       try {
-        const transaction = this.db!.transaction([this.storeName], 'readwrite');
+        const transaction = db.transaction([this.storeName], 'readwrite');
         const store = transaction.objectStore(this.storeName);
         const getRequest = store.get(id);
 
diff --git a/frontend/src/services/indexedDBManager.ts b/frontend/src/services/indexedDBManager.ts
new file mode 100644
index 000000000..2048c021f
--- /dev/null
+++ b/frontend/src/services/indexedDBManager.ts
@@ -0,0 +1,227 @@
+/**
+ * Centralized IndexedDB Manager
+ * Handles all database initialization, schema management, and migrations
+ * Prevents race conditions and duplicate schema upgrades
+ */
+
+export interface DatabaseConfig {
+  name: string;
+  version: number;
+  stores: {
+    name: string;
+    keyPath?: string | string[];
+    autoIncrement?: boolean;
+    indexes?: {
+      name: string;
+      keyPath: string | string[];
+      unique: boolean;
+    }[];
+  }[];
+}
+
+class IndexedDBManager {
+  private static instance: IndexedDBManager;
+  private databases = new Map<string, IDBDatabase>();
+  private initPromises = new Map<string, Promise<IDBDatabase>>();
+
+  private constructor() {}
+
+  static getInstance(): IndexedDBManager {
+    if (!IndexedDBManager.instance) {
+      IndexedDBManager.instance = new IndexedDBManager();
+    }
+    return IndexedDBManager.instance;
+  }
+
+  /**
+   * Open or get existing database connection
+   */
+  async openDatabase(config: DatabaseConfig): Promise<IDBDatabase> {
+    const existingDb = this.databases.get(config.name);
+    if (existingDb) {
+      return existingDb;
+    }
+
+    const existingPromise = this.initPromises.get(config.name);
+    if (existingPromise) {
+      return existingPromise;
+    }
+
+    const initPromise = this.performDatabaseInit(config);
+    this.initPromises.set(config.name, initPromise);
+
+    try {
+      const db = await initPromise;
+      this.databases.set(config.name, db);
+      return db;
+    } catch (error) {
+      this.initPromises.delete(config.name);
+      throw error;
+    }
+  }
+
+  private performDatabaseInit(config: DatabaseConfig): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      console.log(`Opening IndexedDB: ${config.name} v${config.version}`);
+      const request = indexedDB.open(config.name, config.version);
+
+      request.onerror = () => {
+        console.error(`Failed to open ${config.name}:`, request.error);
+        reject(request.error);
+      };
+
+      request.onsuccess = () => {
+        const db = request.result;
+        console.log(`Successfully opened ${config.name}`);
+        
+        // Set up close handler to clean up our references
+        db.onclose = () => {
+          console.log(`Database ${config.name} closed`);
+          this.databases.delete(config.name);
+          this.initPromises.delete(config.name);
+        };
+
+        resolve(db);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = request.result;
+        const oldVersion = event.oldVersion;
+        
+        console.log(`Upgrading ${config.name} from v${oldVersion} to v${config.version}`);
+
+        // Create or update object stores
+        config.stores.forEach(storeConfig => {
+          let store: IDBObjectStore;
+
+          if (db.objectStoreNames.contains(storeConfig.name)) {
+            // Store exists - for now, just continue (could add migration logic here)
+            console.log(`Object store '${storeConfig.name}' already exists`);
+            return;
+          }
+
+          // Create new object store
+          const options: IDBObjectStoreParameters = {};
+          if (storeConfig.keyPath) {
+            options.keyPath = storeConfig.keyPath;
+          }
+          if (storeConfig.autoIncrement) {
+            options.autoIncrement = storeConfig.autoIncrement;
+          }
+
+          store = db.createObjectStore(storeConfig.name, options);
+          console.log(`Created object store '${storeConfig.name}'`);
+
+          // Create indexes
+          if (storeConfig.indexes) {
+            storeConfig.indexes.forEach(indexConfig => {
+              store.createIndex(
+                indexConfig.name,
+                indexConfig.keyPath,
+                { unique: indexConfig.unique }
+              );
+              console.log(`Created index '${indexConfig.name}' on '${storeConfig.name}'`);
+            });
+          }
+        });
+      };
+    });
+  }
+
+  /**
+   * Get database connection (must be already opened)
+   */
+  getDatabase(name: string): IDBDatabase | null {
+    return this.databases.get(name) || null;
+  }
+
+  /**
+   * Close database connection
+   */
+  closeDatabase(name: string): void {
+    const db = this.databases.get(name);
+    if (db) {
+      db.close();
+      this.databases.delete(name);
+      this.initPromises.delete(name);
+    }
+  }
+
+  /**
+   * Close all database connections
+   */
+  closeAllDatabases(): void {
+    this.databases.forEach((db, name) => {
+      console.log(`Closing database: ${name}`);
+      db.close();
+    });
+    this.databases.clear();
+    this.initPromises.clear();
+  }
+
+  /**
+   * Delete database completely
+   */
+  async deleteDatabase(name: string): Promise<void> {
+    // Close connection if open
+    this.closeDatabase(name);
+
+    return new Promise((resolve, reject) => {
+      const deleteRequest = indexedDB.deleteDatabase(name);
+      
+      deleteRequest.onerror = () => reject(deleteRequest.error);
+      deleteRequest.onsuccess = () => {
+        console.log(`Deleted database: ${name}`);
+        resolve();
+      };
+    });
+  }
+
+  /**
+   * Check if a database exists and what version it is
+   */
+  async getDatabaseVersion(name: string): Promise<number | null> {
+    return new Promise((resolve) => {
+      const request = indexedDB.open(name);
+      request.onsuccess = () => {
+        const db = request.result;
+        const version = db.version;
+        db.close();
+        resolve(version);
+      };
+      request.onerror = () => resolve(null);
+      request.onupgradeneeded = () => {
+        // Cancel the upgrade
+        request.transaction?.abort();
+        resolve(null);
+      };
+    });
+  }
+}
+
+// Pre-defined database configurations
+export const DATABASE_CONFIGS = {
+  FILES: {
+    name: 'stirling-pdf-files',
+    version: 2,
+    stores: [{
+      name: 'files',
+      keyPath: 'id',
+      indexes: [
+        { name: 'name', keyPath: 'name', unique: false },
+        { name: 'lastModified', keyPath: 'lastModified', unique: false }
+      ]
+    }]
+  } as DatabaseConfig,
+
+  DRAFTS: {
+    name: 'stirling-pdf-drafts',
+    version: 1,
+    stores: [{
+      name: 'drafts',
+      keyPath: 'id'
+    }]
+  } as DatabaseConfig
+} as const;
+
+export const indexedDBManager = IndexedDBManager.getInstance();
\ No newline at end of file
diff --git a/frontend/src/services/pdfProcessingService.ts b/frontend/src/services/pdfProcessingService.ts
index 2b0dae0f0..065f53210 100644
--- a/frontend/src/services/pdfProcessingService.ts
+++ b/frontend/src/services/pdfProcessingService.ts
@@ -1,9 +1,6 @@
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
 import { ProcessedFile, ProcessingState, PDFPage } from '../types/processing';
 import { ProcessingCache } from './processingCache';
-
-// Set up PDF.js worker
-GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+import { pdfWorkerManager } from './pdfWorkerManager';
 
 export class PDFProcessingService {
   private static instance: PDFProcessingService;
@@ -96,7 +93,7 @@ export class PDFProcessingService {
     onProgress: (progress: number) => void
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
-    const pdf = await getDocument({ data: arrayBuffer }).promise;
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
 
     onProgress(10); // PDF loaded
@@ -129,7 +126,7 @@ export class PDFProcessingService {
       onProgress(progress);
     }
 
-    pdf.destroy();
+    pdfWorkerManager.destroyDocument(pdf);
     onProgress(100);
 
     return {
diff --git a/frontend/src/services/pdfWorkerManager.ts b/frontend/src/services/pdfWorkerManager.ts
new file mode 100644
index 000000000..c31bc5f88
--- /dev/null
+++ b/frontend/src/services/pdfWorkerManager.ts
@@ -0,0 +1,203 @@
+/**
+ * PDF.js Worker Manager - Centralized worker lifecycle management
+ * 
+ * Prevents infinite worker creation by managing PDF.js workers globally
+ * and ensuring proper cleanup when operations complete.
+ */
+
+import * as pdfjsLib from 'pdfjs-dist';
+const { getDocument, GlobalWorkerOptions } = pdfjsLib;
+
+class PDFWorkerManager {
+  private static instance: PDFWorkerManager;
+  private activeDocuments = new Set<any>();
+  private workerCount = 0;
+  private maxWorkers = 3; // Limit concurrent workers
+  private isInitialized = false;
+
+  private constructor() {
+    this.initializeWorker();
+  }
+
+  static getInstance(): PDFWorkerManager {
+    if (!PDFWorkerManager.instance) {
+      PDFWorkerManager.instance = new PDFWorkerManager();
+    }
+    return PDFWorkerManager.instance;
+  }
+
+  /**
+   * Initialize PDF.js worker once globally
+   */
+  private initializeWorker(): void {
+    if (!this.isInitialized) {
+      GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+      this.isInitialized = true;
+      console.log('🏭 PDF.js worker initialized');
+    }
+  }
+
+  /**
+   * Create a PDF document with proper lifecycle management
+   * Supports ArrayBuffer, Uint8Array, URL string, or {data: ArrayBuffer} object
+   */
+  async createDocument(
+    data: ArrayBuffer | Uint8Array | string | { data: ArrayBuffer },
+    options: {
+      disableAutoFetch?: boolean;
+      disableStream?: boolean;
+      stopAtErrors?: boolean;
+      verbosity?: number;
+    } = {}
+  ): Promise<any> {
+    // Wait if we've hit the worker limit
+    if (this.activeDocuments.size >= this.maxWorkers) {
+      console.warn(`🏭 PDF Worker limit reached (${this.maxWorkers}), waiting for available worker...`);
+      await this.waitForAvailableWorker();
+    }
+
+    // Normalize input data to PDF.js format
+    let pdfData: any;
+    if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
+      pdfData = { data };
+    } else if (typeof data === 'string') {
+      pdfData = data; // URL string
+    } else if (data && typeof data === 'object' && 'data' in data) {
+      pdfData = data; // Already in {data: ArrayBuffer} format
+    } else {
+      pdfData = data; // Pass through as-is
+    }
+
+    const loadingTask = getDocument(
+      typeof pdfData === 'string' ? {
+        url: pdfData,
+        disableAutoFetch: options.disableAutoFetch ?? true,
+        disableStream: options.disableStream ?? true,
+        stopAtErrors: options.stopAtErrors ?? false,
+        verbosity: options.verbosity ?? 0
+      } : {
+        ...pdfData,
+        disableAutoFetch: options.disableAutoFetch ?? true,
+        disableStream: options.disableStream ?? true,
+        stopAtErrors: options.stopAtErrors ?? false,
+        verbosity: options.verbosity ?? 0
+      }
+    );
+
+    try {
+      const pdf = await loadingTask.promise;
+      this.activeDocuments.add(pdf);
+      this.workerCount++;
+      
+      console.log(`🏭 PDF document created (active: ${this.activeDocuments.size}/${this.maxWorkers})`);
+      
+      return pdf;
+    } catch (error) {
+      // If document creation fails, make sure to clean up the loading task
+      if (loadingTask) {
+        try {
+          loadingTask.destroy();
+        } catch (destroyError) {
+          console.warn('🏭 Error destroying failed loading task:', destroyError);
+        }
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Properly destroy a PDF document and clean up resources
+   */
+  destroyDocument(pdf: any): void {
+    if (this.activeDocuments.has(pdf)) {
+      try {
+        pdf.destroy();
+        this.activeDocuments.delete(pdf);
+        this.workerCount = Math.max(0, this.workerCount - 1);
+        
+        console.log(`🏭 PDF document destroyed (active: ${this.activeDocuments.size}/${this.maxWorkers})`);
+      } catch (error) {
+        console.warn('🏭 Error destroying PDF document:', error);
+        // Still remove from tracking even if destroy failed
+        this.activeDocuments.delete(pdf);
+        this.workerCount = Math.max(0, this.workerCount - 1);
+      }
+    }
+  }
+
+  /**
+   * Destroy all active PDF documents
+   */
+  destroyAllDocuments(): void {
+    console.log(`🏭 Destroying all PDF documents (${this.activeDocuments.size} active)`);
+    
+    const documentsToDestroy = Array.from(this.activeDocuments);
+    documentsToDestroy.forEach(pdf => {
+      this.destroyDocument(pdf);
+    });
+    
+    this.activeDocuments.clear();
+    this.workerCount = 0;
+    
+    console.log('🏭 All PDF documents destroyed');
+  }
+
+  /**
+   * Wait for a worker to become available
+   */
+  private async waitForAvailableWorker(): Promise<void> {
+    return new Promise((resolve) => {
+      const checkAvailability = () => {
+        if (this.activeDocuments.size < this.maxWorkers) {
+          resolve();
+        } else {
+          setTimeout(checkAvailability, 100);
+        }
+      };
+      checkAvailability();
+    });
+  }
+
+  /**
+   * Get current worker statistics
+   */
+  getWorkerStats() {
+    return {
+      active: this.activeDocuments.size,
+      max: this.maxWorkers,
+      total: this.workerCount
+    };
+  }
+
+  /**
+   * Force cleanup of all workers (emergency cleanup)
+   */
+  emergencyCleanup(): void {
+    console.warn('🏭 Emergency PDF worker cleanup initiated');
+    
+    // Force destroy all documents
+    this.activeDocuments.forEach(pdf => {
+      try {
+        pdf.destroy();
+      } catch (error) {
+        console.warn('🏭 Emergency cleanup - error destroying document:', error);
+      }
+    });
+    
+    this.activeDocuments.clear();
+    this.workerCount = 0;
+    
+    console.warn('🏭 Emergency cleanup completed');
+  }
+
+  /**
+   * Set maximum concurrent workers
+   */
+  setMaxWorkers(max: number): void {
+    this.maxWorkers = Math.max(1, Math.min(max, 10)); // Between 1-10 workers
+    console.log(`🏭 Max workers set to ${this.maxWorkers}`);
+  }
+}
+
+// Export singleton instance
+export const pdfWorkerManager = PDFWorkerManager.getInstance();
\ No newline at end of file
diff --git a/frontend/src/services/thumbnailGenerationService.ts b/frontend/src/services/thumbnailGenerationService.ts
index 3f16a23ea..a1c221269 100644
--- a/frontend/src/services/thumbnailGenerationService.ts
+++ b/frontend/src/services/thumbnailGenerationService.ts
@@ -1,7 +1,9 @@
 /**
- * High-performance thumbnail generation service using Web Workers
+ * High-performance thumbnail generation service using main thread processing
  */
 
+import { pdfWorkerManager } from './pdfWorkerManager';
+
 interface ThumbnailResult {
   pageNumber: number;
   thumbnail: string;
@@ -22,245 +24,136 @@ interface CachedThumbnail {
   sizeBytes: number;
 }
 
+interface CachedPDFDocument {
+  pdf: any; // PDFDocumentProxy from pdfjs-dist
+  lastUsed: number;
+  refCount: number;
+}
+
 export class ThumbnailGenerationService {
-  private workers: Worker[] = [];
-  private activeJobs = new Map<string, { resolve: Function; reject: Function; onProgress?: Function }>();
-  private jobCounter = 0;
-  private isGenerating = false;
-  
   // Session-based thumbnail cache
   private thumbnailCache = new Map<string, CachedThumbnail>();
   private maxCacheSizeBytes = 1024 * 1024 * 1024; // 1GB cache limit
   private currentCacheSize = 0;
 
-  constructor(private maxWorkers: number = 3) {
-    this.initializeWorkers();
-  }
+  // PDF document cache to reuse PDF instances and avoid creating multiple workers
+  private pdfDocumentCache = new Map<string, CachedPDFDocument>();
+  private maxPdfCacheSize = 10; // Keep up to 10 PDF documents cached
 
-  private initializeWorkers(): void {
-    const workerPromises: Promise<Worker | null>[] = [];
-    
-    for (let i = 0; i < this.maxWorkers; i++) {
-      const workerPromise = new Promise<Worker | null>((resolve) => {
-        try {
-          console.log(`Attempting to create worker ${i}...`);
-          const worker = new Worker('/thumbnailWorker.js');
-          let workerReady = false;
-          let pingTimeout: NodeJS.Timeout;
-          
-          worker.onmessage = (e) => {
-            const { type, data, jobId } = e.data;
-            
-            // Handle PONG response to confirm worker is ready
-            if (type === 'PONG') {
-              workerReady = true;
-              clearTimeout(pingTimeout);
-              console.log(`✓ Worker ${i} is ready and responsive`);
-              resolve(worker);
-              return;
-            }
-            
-            const job = this.activeJobs.get(jobId);
-            if (!job) return;
-            
-            switch (type) {
-              case 'PROGRESS':
-                if (job.onProgress) {
-                  job.onProgress(data);
-                }
-                break;
-                
-              case 'COMPLETE':
-                job.resolve(data.thumbnails);
-                this.activeJobs.delete(jobId);
-                break;
-                
-              case 'ERROR':
-                job.reject(new Error(data.error));
-                this.activeJobs.delete(jobId);
-                break;
-            }
-          };
-          
-          worker.onerror = (error) => {
-            console.error(`✗ Worker ${i} failed with error:`, error);
-            clearTimeout(pingTimeout);
-            worker.terminate();
-            resolve(null);
-          };
-          
-          // Test worker with timeout
-          pingTimeout = setTimeout(() => {
-            if (!workerReady) {
-              console.warn(`✗ Worker ${i} timed out (no PONG response)`);
-              worker.terminate();
-              resolve(null);
-            }
-          }, 3000); // Reduced timeout for faster feedback
-          
-          // Send PING to test worker
-          try {
-            worker.postMessage({ type: 'PING' });
-          } catch (pingError) {
-            console.error(`✗ Failed to send PING to worker ${i}:`, pingError);
-            clearTimeout(pingTimeout);
-            worker.terminate();
-            resolve(null);
-          }
-          
-        } catch (error) {
-          console.error(`✗ Failed to create worker ${i}:`, error);
-          resolve(null);
-        }
-      });
-      
-      workerPromises.push(workerPromise);
-    }
-    
-    // Wait for all workers to initialize or fail
-    Promise.all(workerPromises).then((workers) => {
-      this.workers = workers.filter((w): w is Worker => w !== null);
-      const successCount = this.workers.length;
-      const failCount = this.maxWorkers - successCount;
-      
-      console.log(`🔧 Worker initialization complete: ${successCount}/${this.maxWorkers} workers ready`);
-      
-      if (failCount > 0) {
-        console.warn(`⚠️  ${failCount} workers failed to initialize - will use main thread fallback`);
-      }
-      
-      if (successCount === 0) {
-        console.warn('🚨 No Web Workers available - all thumbnail generation will use main thread');
-      }
-    });
+  constructor(private maxWorkers: number = 3) {
+    // PDF rendering requires DOM access, so we use optimized main thread processing
   }
 
   /**
-   * Generate thumbnails for multiple pages using Web Workers
+   * Get or create a cached PDF document
+   */
+  private async getCachedPDFDocument(fileId: string, pdfArrayBuffer: ArrayBuffer): Promise<any> {
+    const cached = this.pdfDocumentCache.get(fileId);
+    if (cached) {
+      cached.lastUsed = Date.now();
+      cached.refCount++;
+      return cached.pdf;
+    }
+
+    // Evict old PDFs if cache is full
+    while (this.pdfDocumentCache.size >= this.maxPdfCacheSize) {
+      this.evictLeastRecentlyUsedPDF();
+    }
+
+    // Use centralized worker manager instead of direct getDocument
+    const pdf = await pdfWorkerManager.createDocument(pdfArrayBuffer, {
+      disableAutoFetch: true,
+      disableStream: true,
+      stopAtErrors: false
+    });
+
+    this.pdfDocumentCache.set(fileId, {
+      pdf,
+      lastUsed: Date.now(),
+      refCount: 1
+    });
+
+    return pdf;
+  }
+
+  /**
+   * Release a reference to a cached PDF document
+   */
+  private releasePDFDocument(fileId: string): void {
+    const cached = this.pdfDocumentCache.get(fileId);
+    if (cached) {
+      cached.refCount--;
+      // Don't destroy immediately - keep in cache for potential reuse
+    }
+  }
+
+  /**
+   * Evict the least recently used PDF document
+   */
+  private evictLeastRecentlyUsedPDF(): void {
+    let oldestEntry: [string, CachedPDFDocument] | null = null;
+    let oldestTime = Date.now();
+
+    for (const [key, value] of this.pdfDocumentCache.entries()) {
+      if (value.lastUsed < oldestTime && value.refCount === 0) {
+        oldestTime = value.lastUsed;
+        oldestEntry = [key, value];
+      }
+    }
+
+    if (oldestEntry) {
+      pdfWorkerManager.destroyDocument(oldestEntry[1].pdf); // Use worker manager for cleanup
+      this.pdfDocumentCache.delete(oldestEntry[0]);
+    }
+  }
+
+  /**
+   * Generate thumbnails for multiple pages using main thread processing
    */
   async generateThumbnails(
+    fileId: string,
     pdfArrayBuffer: ArrayBuffer,
     pageNumbers: number[],
     options: ThumbnailGenerationOptions = {},
     onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
   ): Promise<ThumbnailResult[]> {
-    if (this.isGenerating) {
-      console.warn('🚨 ThumbnailService: Thumbnail generation already in progress, rejecting new request');
-      throw new Error('Thumbnail generation already in progress');
+    // Input validation
+    if (!fileId || typeof fileId !== 'string' || fileId.trim() === '') {
+      throw new Error('generateThumbnails: fileId must be a non-empty string');
+    }
+    
+    if (!pdfArrayBuffer || pdfArrayBuffer.byteLength === 0) {
+      throw new Error('generateThumbnails: pdfArrayBuffer must not be empty');
+    }
+    
+    if (!pageNumbers || pageNumbers.length === 0) {
+      throw new Error('generateThumbnails: pageNumbers must not be empty');
     }
 
-    console.log(`🎬 ThumbnailService: Starting thumbnail generation for ${pageNumbers.length} pages`);
-    this.isGenerating = true;
-    
     const {
       scale = 0.2,
-      quality = 0.8,
-      batchSize = 20, // Pages per worker
-      parallelBatches = this.maxWorkers
+      quality = 0.8
     } = options;
 
-    try {
-      // Check if workers are available, fallback to main thread if not
-      if (this.workers.length === 0) {
-        console.warn('No Web Workers available, falling back to main thread processing');
-        return await this.generateThumbnailsMainThread(pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
-      }
-
-      // Split pages across workers
-      const workerBatches = this.distributeWork(pageNumbers, this.workers.length);
-      console.log(`🔧 ThumbnailService: Distributing ${pageNumbers.length} pages across ${this.workers.length} workers:`, workerBatches.map(batch => batch.length));
-      const jobPromises: Promise<ThumbnailResult[]>[] = [];
-
-      for (let i = 0; i < workerBatches.length; i++) {
-        const batch = workerBatches[i];
-        if (batch.length === 0) continue;
-
-        const worker = this.workers[i % this.workers.length];
-        const jobId = `job-${++this.jobCounter}`;
-        console.log(`🔧 ThumbnailService: Sending job ${jobId} with ${batch.length} pages to worker ${i}:`, batch);
-
-        const promise = new Promise<ThumbnailResult[]>((resolve, reject) => {
-          // Add timeout for worker jobs
-          const timeout = setTimeout(() => {
-            console.error(`⏰ ThumbnailService: Worker job ${jobId} timed out`);
-            this.activeJobs.delete(jobId);
-            reject(new Error(`Worker job ${jobId} timed out`));
-          }, 60000); // 1 minute timeout
-          
-          // Create job with timeout handling
-          this.activeJobs.set(jobId, { 
-            resolve: (result: any) => { 
-              console.log(`✅ ThumbnailService: Job ${jobId} completed with ${result.length} thumbnails`);
-              clearTimeout(timeout); 
-              resolve(result); 
-            },
-            reject: (error: any) => { 
-              console.error(`❌ ThumbnailService: Job ${jobId} failed:`, error);
-              clearTimeout(timeout); 
-              reject(error); 
-            },
-            onProgress: onProgress ? (progressData: any) => {
-              console.log(`📊 ThumbnailService: Job ${jobId} progress - ${progressData.completed}/${progressData.total} (${progressData.thumbnails.length} new)`);
-              onProgress(progressData);
-            } : undefined
-          });
-          
-          worker.postMessage({
-            type: 'GENERATE_THUMBNAILS',
-            jobId,
-            data: {
-              pdfArrayBuffer,
-              pageNumbers: batch,
-              scale,
-              quality
-            }
-          });
-        });
-
-        jobPromises.push(promise);
-      }
-
-      // Wait for all workers to complete
-      const results = await Promise.all(jobPromises);
-      
-      // Flatten and sort results by page number
-      const allThumbnails = results.flat().sort((a, b) => a.pageNumber - b.pageNumber);
-      console.log(`🎯 ThumbnailService: All workers completed, returning ${allThumbnails.length} thumbnails`);
-      
-      return allThumbnails;
-      
-    } catch (error) {
-      console.error('Web Worker thumbnail generation failed, falling back to main thread:', error);
-      return await this.generateThumbnailsMainThread(pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
-    } finally {
-      console.log('🔄 ThumbnailService: Resetting isGenerating flag');
-      this.isGenerating = false;
-    }
+    return await this.generateThumbnailsMainThread(fileId, pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
   }
 
   /**
-   * Fallback thumbnail generation on main thread
+   * Main thread thumbnail generation with batching for UI responsiveness
    */
   private async generateThumbnailsMainThread(
+    fileId: string,
     pdfArrayBuffer: ArrayBuffer,
     pageNumbers: number[],
     scale: number,
     quality: number,
     onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
   ): Promise<ThumbnailResult[]> {
-    console.log(`🔧 ThumbnailService: Fallback to main thread for ${pageNumbers.length} pages`);
-    
-    // Import PDF.js dynamically for main thread
-    const { getDocument } = await import('pdfjs-dist');
-    
-    // Load PDF once
-    const pdf = await getDocument({ data: pdfArrayBuffer }).promise;
-    console.log(`✓ ThumbnailService: PDF loaded on main thread`);
-    
+    const pdf = await this.getCachedPDFDocument(fileId, pdfArrayBuffer);
     
     const allResults: ThumbnailResult[] = [];
     let completed = 0;
-    const batchSize = 5; // Small batches for UI responsiveness
+    const batchSize = 3; // Smaller batches for better UI responsiveness
     
     // Process pages in small batches
     for (let i = 0; i < pageNumbers.length; i += batchSize) {
@@ -308,143 +201,99 @@ export class ThumbnailGenerationService {
         });
       }
       
-      // Small delay to keep UI responsive
-      if (i + batchSize < pageNumbers.length) {
-        await new Promise(resolve => setTimeout(resolve, 10));
-      }
+      // Yield control to prevent UI blocking
+      await new Promise(resolve => setTimeout(resolve, 1));
     }
     
-    // Clean up
-    pdf.destroy();
-    
-    return allResults.filter(r => r.success);
+    // Release reference to PDF document (don't destroy - keep in cache)
+    this.releasePDFDocument(fileId);
+    return allResults;
   }
 
   /**
-   * Distribute work evenly across workers
-   */
-  private distributeWork(pageNumbers: number[], numWorkers: number): number[][] {
-    const batches: number[][] = Array(numWorkers).fill(null).map(() => []);
-    
-    pageNumbers.forEach((pageNum, index) => {
-      const workerIndex = index % numWorkers;
-      batches[workerIndex].push(pageNum);
-    });
-    
-    return batches;
-  }
-
-  /**
-   * Generate a single thumbnail (fallback for individual pages)
-   */
-  async generateSingleThumbnail(
-    pdfArrayBuffer: ArrayBuffer,
-    pageNumber: number,
-    options: ThumbnailGenerationOptions = {}
-  ): Promise<string> {
-    const results = await this.generateThumbnails(pdfArrayBuffer, [pageNumber], options);
-    
-    if (results.length === 0 || !results[0].success) {
-      throw new Error(`Failed to generate thumbnail for page ${pageNumber}`);
-    }
-    
-    return results[0].thumbnail;
-  }
-
-  /**
-   * Add thumbnail to cache with size management
-   */
-  addThumbnailToCache(pageId: string, thumbnail: string): void {
-    const thumbnailSizeBytes = thumbnail.length * 0.75; // Rough base64 size estimate
-    const now = Date.now();
-    
-    // Add new thumbnail
-    this.thumbnailCache.set(pageId, {
-      thumbnail,
-      lastUsed: now,
-      sizeBytes: thumbnailSizeBytes
-    });
-    
-    this.currentCacheSize += thumbnailSizeBytes;
-    
-    // If we exceed 1GB, trigger cleanup
-    if (this.currentCacheSize > this.maxCacheSizeBytes) {
-      this.cleanupThumbnailCache();
-    }
-  }
-
-  /**
-   * Get thumbnail from cache and update last used timestamp
+   * Cache management
    */
   getThumbnailFromCache(pageId: string): string | null {
     const cached = this.thumbnailCache.get(pageId);
-    if (!cached) return null;
-    
-    // Update last used timestamp
-    cached.lastUsed = Date.now();
-    
-    return cached.thumbnail;
+    if (cached) {
+      cached.lastUsed = Date.now();
+      return cached.thumbnail;
+    }
+    return null;
   }
 
-  /**
-   * Clean up cache using LRU eviction
-   */
-  private cleanupThumbnailCache(): void {
-    const entries = Array.from(this.thumbnailCache.entries());
+  addThumbnailToCache(pageId: string, thumbnail: string): void {
+    const sizeBytes = thumbnail.length * 2; // Rough estimate for base64 string
     
-    // Sort by last used (oldest first)
-    entries.sort(([, a], [, b]) => a.lastUsed - b.lastUsed);
+    // Enforce cache size limits
+    while (this.currentCacheSize + sizeBytes > this.maxCacheSizeBytes && this.thumbnailCache.size > 0) {
+      this.evictLeastRecentlyUsed();
+    }
+
+    this.thumbnailCache.set(pageId, {
+      thumbnail,
+      lastUsed: Date.now(),
+      sizeBytes
+    });
     
-    this.thumbnailCache.clear();
-    this.currentCacheSize = 0;
-    const targetSize = this.maxCacheSizeBytes * 0.8; // Clean to 80% of limit
-    
-    // Keep most recently used entries until we hit target size
-    for (let i = entries.length - 1; i >= 0 && this.currentCacheSize < targetSize; i--) {
-      const [key, value] = entries[i];
-      this.thumbnailCache.set(key, value);
-      this.currentCacheSize += value.sizeBytes;
+    this.currentCacheSize += sizeBytes;
+  }
+
+  private evictLeastRecentlyUsed(): void {
+    let oldestEntry: [string, CachedThumbnail] | null = null;
+    let oldestTime = Date.now();
+
+    for (const [key, value] of this.thumbnailCache.entries()) {
+      if (value.lastUsed < oldestTime) {
+        oldestTime = value.lastUsed;
+        oldestEntry = [key, value];
+      }
+    }
+
+    if (oldestEntry) {
+      this.thumbnailCache.delete(oldestEntry[0]);
+      this.currentCacheSize -= oldestEntry[1].sizeBytes;
     }
   }
 
-  /**
-   * Clear all cached thumbnails
-   */
-  clearThumbnailCache(): void {
-    this.thumbnailCache.clear();
-    this.currentCacheSize = 0;
-  }
-
-  /**
-   * Get cache statistics
-   */
   getCacheStats() {
     return {
-      entries: this.thumbnailCache.size,
-      totalSizeBytes: this.currentCacheSize,
+      size: this.thumbnailCache.size,
+      sizeBytes: this.currentCacheSize,
       maxSizeBytes: this.maxCacheSizeBytes
     };
   }
 
-  /**
-   * Stop generation but keep cache and workers alive
-   */
   stopGeneration(): void {
-    this.activeJobs.clear();
-    this.isGenerating = false;
+    // No-op since we removed workers
+  }
+
+  clearCache(): void {
+    this.thumbnailCache.clear();
+    this.currentCacheSize = 0;
+  }
+
+  clearPDFCache(): void {
+    // Destroy all cached PDF documents using worker manager
+    for (const [, cached] of this.pdfDocumentCache) {
+      pdfWorkerManager.destroyDocument(cached.pdf);
+    }
+    this.pdfDocumentCache.clear();
+  }
+
+  clearPDFCacheForFile(fileId: string): void {
+    const cached = this.pdfDocumentCache.get(fileId);
+    if (cached) {
+      pdfWorkerManager.destroyDocument(cached.pdf);
+      this.pdfDocumentCache.delete(fileId);
+    }
   }
 
-  /**
-   * Terminate all workers and clear cache (only on explicit cleanup)
-   */
   destroy(): void {
-    this.workers.forEach(worker => worker.terminate());
-    this.workers = [];
-    this.activeJobs.clear();
-    this.isGenerating = false;
-    this.clearThumbnailCache();
+    this.clearCache();
+    this.clearPDFCache();
   }
 }
 
-// Export singleton instance
+// Global singleton instance
 export const thumbnailGenerationService = new ThumbnailGenerationService();
\ No newline at end of file
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index a8552b2bb..561e456f7 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/frontend/src/theme/mantineTheme.ts
@@ -283,7 +283,7 @@ export const mantineTheme = createTheme({
         },
         control: {
           color: 'var(--text-secondary)',
-          '[dataActive]': {
+          '[data-active]': {
             backgroundColor: 'var(--bg-surface)',
             color: 'var(--text-primary)',
             boxShadow: 'var(--shadow-sm)',
diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx
index 20b603044..5b8b33adc 100644
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -17,8 +17,8 @@ import { BaseToolProps } from "../types/tool";
 
 const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const [collapsedPermissions, setCollapsedPermissions] = useState(true);
 
@@ -30,6 +30,8 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
 
+
+
   useEffect(() => {
     addPasswordOperation.resetResults();
     onPreviewFile?.(null);
@@ -51,13 +53,11 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "addPassword");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     addPasswordOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("addPassword");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx
index 01306e6f0..1e36a3820 100644
--- a/frontend/src/tools/AddWatermark.tsx
+++ b/frontend/src/tools/AddWatermark.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -25,8 +25,8 @@ import { BaseToolProps } from "../types/tool";
 
 const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const [collapsedType, setCollapsedType] = useState(false);
   const [collapsedStyle, setCollapsedStyle] = useState(true);
@@ -43,6 +43,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("add-watermark");
 
+
   useEffect(() => {
     watermarkOperation.resetResults();
     onPreviewFile?.(null);
@@ -71,13 +72,11 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "watermark");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     watermarkOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("watermark");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx
index 928422059..254dd4d2f 100644
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -15,8 +15,8 @@ import { BaseToolProps } from "../types/tool";
 
 const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const changePermissionsParams = useChangePermissionsParameters();
   const changePermissionsOperation = useChangePermissionsOperation();
@@ -48,13 +48,11 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "changePermissions");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     changePermissionsOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("changePermissions");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx
index d7e0ebc2c..ea3fdf977 100644
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -15,8 +15,8 @@ import { useCompressTips } from "../components/tooltips/useCompressTips";
 
 const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const compressParams = useCompressParameters();
   const compressOperation = useCompressOperation();
@@ -46,13 +46,12 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "compress");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     compressOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("compress");
+    actions.setMode("compress");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx
index e2616f4a4..e2220f9ce 100644
--- a/frontend/src/tools/Convert.tsx
+++ b/frontend/src/tools/Convert.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileState, useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -14,8 +14,10 @@ import { BaseToolProps } from "../types/tool";
 
 const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode, activeFiles } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { selectors } = useFileState();
+  const { actions } = useNavigationActions();
+  const activeFiles = selectors.getFiles();
+  const { selectedFiles } = useFileSelection();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const convertParams = useConvertParameters();
@@ -46,7 +48,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
         convertParams.resetParameters();
       }
     }
-  }, [selectedFiles, activeFiles]);
+  }, [selectedFiles, activeFiles, convertParams.analyzeFileTypes, convertParams.resetParameters]);
 
   useEffect(() => {
     // Only clear results if we're not currently processing and parameters changed
@@ -84,13 +86,11 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "convert");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     convertOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("convert");
   };
 
   return createToolFlow({
diff --git a/frontend/src/tools/Merge.tsx b/frontend/src/tools/Merge.tsx
deleted file mode 100644
index c28b2287c..000000000
--- a/frontend/src/tools/Merge.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Paper, Button, Checkbox, Stack, Text, Group, Loader, Alert } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
-import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-
-export interface MergePdfPanelProps {
-  files: FileWithUrl[];
-  setDownloadUrl: (url: string) => void;
-  params: {
-    order: string;
-    removeDuplicates: boolean;
-  };
-  updateParams: (newParams: Partial<MergePdfPanelProps["params"]>) => void;
-}
-
-const MergePdfPanel: React.FC<MergePdfPanelProps> = ({ files, setDownloadUrl, params, updateParams }) => {
-  const { t } = useTranslation();
-  const [selectedFiles, setSelectedFiles] = useState<boolean[]>([]);
-  const [downloadUrl, setLocalDownloadUrl] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("merge-pdfs");
-
-  useEffect(() => {
-    setSelectedFiles(files.map(() => true));
-  }, [files]);
-
-  const handleMerge = async () => {
-    const filesToMerge = files.filter((_, index) => selectedFiles[index]);
-    if (filesToMerge.length < 2) {
-      setErrorMessage(t("multiPdfPrompt")); // "Select PDFs (2+)"
-      return;
-    }
-
-    const formData = new FormData();
-
-    // Handle IndexedDB files
-    for (const file of filesToMerge) {
-      if (!file.id) {
-        continue; // Skip files without an id
-      }
-      const storedFile = await fileStorage.getFile(file?.id);
-      if (storedFile) {
-        const blob = new Blob([storedFile.data], { type: storedFile.type });
-        const actualFile = new File([blob], storedFile.name, {
-          type: storedFile.type,
-          lastModified: storedFile.lastModified,
-        });
-        formData.append("fileInput", actualFile);
-      }
-    }
-
-    setIsLoading(true);
-    setErrorMessage(null);
-
-    try {
-      const response = await fetch("/api/v1/general/merge-pdfs", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Failed to merge PDFs: ${errorText}`);
-      }
-
-      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      setDownloadUrl(url);
-      setLocalDownloadUrl(url);
-    } catch (error: any) {
-      setErrorMessage(error.message || "Unknown error occurred.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCheckboxChange = (index: number) => {
-    setSelectedFiles((prev) => prev.map((selected, i) => (i === index ? !selected : selected)));
-  };
-
-  const selectedCount = selectedFiles.filter(Boolean).length;
-
-  const { order, removeDuplicates } = params;
-
-  if (endpointLoading) {
-    return (
-      <Stack align="center" justify="center" h={200}>
-        <Loader size="md" />
-        <Text size="sm" c="dimmed">
-          {t("loading", "Loading...")}
-        </Text>
-      </Stack>
-    );
-  }
-
-  if (endpointEnabled === false) {
-    return (
-      <Stack align="center" justify="center" h={200}>
-        <Alert color="red" title={t("error._value", "Error")} variant="light">
-          {t("endpointDisabled", "This feature is currently disabled.")}
-        </Alert>
-      </Stack>
-    );
-  }
-
-  return (
-    <Stack>
-      <Text fw={500} size="lg">
-        {t("merge.header")}
-      </Text>
-      <Stack gap={4}>
-        {files.map((file, index) => (
-          <Group key={index} gap="xs">
-            <Checkbox checked={selectedFiles[index] || false} onChange={() => handleCheckboxChange(index)} />
-            <Text size="sm">{file.name}</Text>
-          </Group>
-        ))}
-      </Stack>
-      {selectedCount < 2 && (
-        <Text size="sm" c="red">
-          {t("multiPdfPrompt")}
-        </Text>
-      )}
-      <Button onClick={handleMerge} loading={isLoading} disabled={selectedCount < 2 || isLoading} mt="md">
-        {t("merge.submit")}
-      </Button>
-      {errorMessage && (
-        <Alert color="red" mt="sm">
-          {errorMessage}
-        </Alert>
-      )}
-      {downloadUrl && (
-        <Button component="a" href={downloadUrl} download="merged.pdf" color="green" variant="light" mt="md">
-          {t("downloadPdf")}
-        </Button>
-      )}
-      <Checkbox
-        label={t("merge.removeCertSign")}
-        checked={removeDuplicates}
-        onChange={() => updateParams({ removeDuplicates: !removeDuplicates })}
-      />
-    </Stack>
-  );
-};
-
-export default MergePdfPanel;
diff --git a/frontend/src/tools/OCR.tsx b/frontend/src/tools/OCR.tsx
index 72fac0b37..7f918759e 100644
--- a/frontend/src/tools/OCR.tsx
+++ b/frontend/src/tools/OCR.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -16,8 +16,8 @@ import { useOCRTips } from "../components/tooltips/useOCRTips";
 
 const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const ocrParams = useOCRParameters();
   const ocrOperation = useOCROperation();
@@ -66,13 +66,11 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "ocr");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     ocrOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("ocr");
   };
 
   const settingsCollapsed = expandedStep !== "settings";
diff --git a/frontend/src/tools/RemoveCertificateSign.tsx b/frontend/src/tools/RemoveCertificateSign.tsx
index e33675625..0e08e117c 100644
--- a/frontend/src/tools/RemoveCertificateSign.tsx
+++ b/frontend/src/tools/RemoveCertificateSign.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
+import { useFileSelection } from "../contexts/file/fileHooks";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -12,8 +13,8 @@ import { BaseToolProps } from "../types/tool";
 
 const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const removeCertificateSignParams = useRemoveCertificateSignParameters();
   const removeCertificateSignOperation = useRemoveCertificateSignOperation();
@@ -42,13 +43,12 @@ const RemoveCertificateSign = ({ onPreviewFile, onComplete, onError }: BaseToolP
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "removeCertificateSign");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     removeCertificateSignOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("removeCertificateSign");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/RemovePassword.tsx b/frontend/src/tools/RemovePassword.tsx
index 31744186b..4b4d1f8d6 100644
--- a/frontend/src/tools/RemovePassword.tsx
+++ b/frontend/src/tools/RemovePassword.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -15,8 +15,8 @@ import { BaseToolProps } from "../types/tool";
 
 const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const removePasswordParams = useRemovePasswordParameters();
   const removePasswordOperation = useRemovePasswordOperation();
@@ -25,6 +25,7 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(removePasswordParams.getEndpointName());
 
+
   useEffect(() => {
     removePasswordOperation.resetResults();
     onPreviewFile?.(null);
@@ -46,13 +47,11 @@ const RemovePassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "removePassword");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     removePasswordOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("removePassword");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Repair.tsx b/frontend/src/tools/Repair.tsx
index fc30b9b95..8cb061085 100644
--- a/frontend/src/tools/Repair.tsx
+++ b/frontend/src/tools/Repair.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
+import { useFileSelection } from "../contexts/file/fileHooks";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -12,8 +13,8 @@ import { BaseToolProps } from "../types/tool";
 
 const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const repairParams = useRepairParameters();
   const repairOperation = useRepairOperation();
@@ -42,13 +43,12 @@ const Repair = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "repair");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     repairOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("repair");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Sanitize.tsx b/frontend/src/tools/Sanitize.tsx
index 258f0f930..1d12d1bee 100644
--- a/frontend/src/tools/Sanitize.tsx
+++ b/frontend/src/tools/Sanitize.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
@@ -9,13 +10,12 @@ import SanitizeSettings from "../components/tools/sanitize/SanitizeSettings";
 import { useSanitizeParameters } from "../hooks/tools/sanitize/useSanitizeParameters";
 import { useSanitizeOperation } from "../hooks/tools/sanitize/useSanitizeOperation";
 import { BaseToolProps } from "../types/tool";
-import { useFileContext } from "../contexts/FileContext";
 
 const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const { selectedFiles } = useToolFileSelection();
-  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useFileSelection();
+  const { actions } = useNavigationActions();
 
   const sanitizeParams = useSanitizeParameters();
   const sanitizeOperation = useSanitizeOperation();
@@ -44,13 +44,11 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleSettingsReset = () => {
     sanitizeOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("sanitize");
   };
 
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "sanitize");
-    setCurrentMode("viewer");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/SingleLargePage.tsx b/frontend/src/tools/SingleLargePage.tsx
index 0c4fb96db..7d268d11c 100644
--- a/frontend/src/tools/SingleLargePage.tsx
+++ b/frontend/src/tools/SingleLargePage.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
+import { useFileSelection } from "../contexts/file/fileHooks";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -12,8 +13,8 @@ import { BaseToolProps } from "../types/tool";
 
 const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const singleLargePageParams = useSingleLargePageParameters();
   const singleLargePageOperation = useSingleLargePageOperation();
@@ -42,13 +43,12 @@ const SingleLargePage = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "single-large-page");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     singleLargePageOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("single-large-page");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index ea68404f0..18997e6a6 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import SplitSettings from "../components/tools/split/SplitSettings";
@@ -13,8 +13,8 @@ import { BaseToolProps } from "../types/tool";
 
 const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const splitParams = useSplitParameters();
   const splitOperation = useSplitOperation();
@@ -25,8 +25,7 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   useEffect(() => {
     splitOperation.resetResults();
     onPreviewFile?.(null);
-  }, [splitParams.parameters]);
-
+  }, [splitParams.parameters, selectedFiles]); 
   const handleSplit = async () => {
     try {
       await splitOperation.executeOperation(splitParams.parameters, selectedFiles);
@@ -43,13 +42,12 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "split");
-    setCurrentMode("viewer");
   };
 
   const handleSettingsReset = () => {
     splitOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("split");
+    actions.setMode("split");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/UnlockPdfForms.tsx b/frontend/src/tools/UnlockPdfForms.tsx
index b8aee7894..a169c8e58 100644
--- a/frontend/src/tools/UnlockPdfForms.tsx
+++ b/frontend/src/tools/UnlockPdfForms.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
+import { useFileSelection } from "../contexts/file/fileHooks";
 
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 
@@ -12,8 +13,8 @@ import { BaseToolProps } from "../types/tool";
 
 const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
-  const { setCurrentMode } = useFileContext();
-  const { selectedFiles } = useToolFileSelection();
+  const { actions } = useNavigationActions();
+  const { selectedFiles } = useFileSelection();
 
   const unlockPdfFormsParams = useUnlockPdfFormsParameters();
   const unlockPdfFormsOperation = useUnlockPdfFormsOperation();
@@ -42,13 +43,12 @@ const UnlockPdfForms = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   const handleThumbnailClick = (file: File) => {
     onPreviewFile?.(file);
     sessionStorage.setItem("previousMode", "unlockPdfForms");
-    setCurrentMode("viewer");
+    actions.setMode("viewer");
   };
 
   const handleSettingsReset = () => {
     unlockPdfFormsOperation.resetResults();
     onPreviewFile?.(null);
-    setCurrentMode("unlockPdfForms");
   };
 
   const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/types/file.ts b/frontend/src/types/file.ts
index c887c093b..96e507523 100644
--- a/frontend/src/types/file.ts
+++ b/frontend/src/types/file.ts
@@ -1,12 +1,21 @@
 /**
- * Enhanced file types for IndexedDB storage
+ * File types for the new architecture
+ * FileContext uses pure File objects with separate ID tracking
  */
 
-export interface FileWithUrl extends File {
-  id?: string;
-  url?: string;
+
+/**
+ * File metadata for efficient operations without loading full file data
+ * Used by IndexedDBContext and FileContext for lazy file loading
+ */
+export interface FileMetadata {
+  id: string;
+  name: string;
+  type: string;
+  size: number;
+  lastModified: number;
   thumbnail?: string;
-  storedInIndexedDB?: boolean;
+  isDraft?: boolean; // Marks files as draft versions
 }
 
 export interface StorageConfig {
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
index d9dde75b7..0425031c5 100644
--- a/frontend/src/types/fileContext.ts
+++ b/frontend/src/types/fileContext.ts
@@ -4,6 +4,7 @@
 
 import { ProcessedFile } from './processing';
 import { PDFDocument, PDFPage, PageOperation } from './pageEditor';
+import { FileMetadata } from './file';
 
 export type ModeType =
   | 'viewer'
@@ -17,16 +18,116 @@ export type ModeType =
   | 'sanitize'
   | 'addPassword'
   | 'changePermissions'
-  | 'watermark'
+  | 'addWatermark'
   | 'removePassword'
   | 'single-large-page'
   | 'repair'
   | 'unlockPdfForms'
   | 'removeCertificateSign';
 
-export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
+// Normalized state types
+export type FileId = string;
 
-export type ToolType = 'merge' | 'split' | 'compress' | 'ocr' | 'convert' | 'sanitize';
+export interface ProcessedFilePage {
+  thumbnail?: string;
+  pageNumber?: number;
+  rotation?: number;
+  splitBefore?: boolean;
+  [key: string]: any;
+}
+
+export interface ProcessedFileMetadata {
+  pages: ProcessedFilePage[];
+  totalPages?: number;
+  thumbnailUrl?: string;
+  lastProcessed?: number;
+  [key: string]: any;
+}
+
+export interface FileRecord {
+  id: FileId;
+  name: string;
+  size: number;
+  type: string;
+  lastModified: number;
+  quickKey?: string; // Fast deduplication key: name|size|lastModified
+  thumbnailUrl?: string;
+  blobUrl?: string;
+  createdAt?: number;
+  processedFile?: ProcessedFileMetadata;
+  isPinned?: boolean;
+  // Note: File object stored in provider ref, not in state
+}
+
+export interface FileContextNormalizedFiles {
+  ids: FileId[];
+  byId: Record<FileId, FileRecord>;
+}
+
+// Helper functions - UUID-based primary keys (zero collisions, synchronous)
+export function createFileId(): FileId {
+  // Use crypto.randomUUID for authoritative primary key
+  if (typeof window !== 'undefined' && window.crypto?.randomUUID) {
+    return window.crypto.randomUUID();
+  }
+  // Fallback for environments without randomUUID
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+// Generate quick deduplication key from file metadata
+export function createQuickKey(file: File): string {
+  // Format: name|size|lastModified for fast duplicate detection
+  return `${file.name}|${file.size}|${file.lastModified}`;
+}
+
+
+
+export function toFileRecord(file: File, id?: FileId): FileRecord {
+  const fileId = id || createFileId();
+  return {
+    id: fileId,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    quickKey: createQuickKey(file),
+    createdAt: Date.now()
+  };
+}
+
+export function revokeFileResources(record: FileRecord): void {
+  // Only revoke blob: URLs to prevent errors on other schemes
+  if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
+    try {
+      URL.revokeObjectURL(record.thumbnailUrl);
+    } catch (error) {
+      console.warn('Failed to revoke thumbnail URL:', error);
+    }
+  }
+  if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
+    try {
+      URL.revokeObjectURL(record.blobUrl);
+    } catch (error) {
+      console.warn('Failed to revoke blob URL:', error);
+    }
+  }
+  // Clean up processed file thumbnails
+  if (record.processedFile?.pages) {
+    record.processedFile.pages.forEach(page => {
+      if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
+        try {
+          URL.revokeObjectURL(page.thumbnail);
+        } catch (error) {
+          console.warn('Failed to revoke page thumbnail URL:', error);
+        }
+      }
+    });
+  }
+}
 
 export type OperationType = 'merge' | 'split' | 'compress' | 'add' | 'remove' | 'replace' | 'convert' | 'upload' | 'ocr' | 'sanitize';
 
@@ -69,114 +170,110 @@ export interface FileEditHistory {
 }
 
 export interface FileContextState {
-  // Core file management
-  activeFiles: File[];
-  processedFiles: Map<File, ProcessedFile>;
-  pinnedFiles: Set<File>; // Files that are pinned and won't be consumed
-
-  // Current navigation state
-  currentMode: ModeType;
-  currentView: ViewType;
-  currentTool: ToolType | null;
-
-  // Edit history and state
-  fileEditHistory: Map<string, FileEditHistory>;
-  globalFileOperations: FileOperation[];
-  // New comprehensive operation history
-  fileOperationHistory: Map<string, FileOperationHistory>;
-
-  // UI state that persists across views
-  selectedFileIds: string[];
-  selectedPageNumbers: number[];
-  viewerConfig: ViewerConfig;
-
-  // Processing state
-  isProcessing: boolean;
-  processingProgress: number;
-
-  // Export state
-  lastExportConfig?: {
-    filename: string;
-    selectedOnly: boolean;
-    splitDocuments: boolean;
+  // Core file management - lightweight file IDs only
+  files: {
+    ids: FileId[];
+    byId: Record<FileId, FileRecord>;
+  };
+  
+  // Pinned files - files that won't be consumed by tools  
+  pinnedFiles: Set<FileId>;
+  
+  // UI state - file-related UI state only
+  ui: {
+    selectedFileIds: FileId[];
+    selectedPageNumbers: number[];
+    isProcessing: boolean;
+    processingProgress: number;
+    hasUnsavedChanges: boolean;
   };
-
-  // Navigation guard system
-  hasUnsavedChanges: boolean;
-  pendingNavigation: (() => void) | null;
-  showNavigationWarning: boolean;
 }
 
+// Action types for reducer pattern
+export type FileContextAction = 
+  // File management actions
+  | { type: 'ADD_FILES'; payload: { fileRecords: FileRecord[] } }
+  | { type: 'REMOVE_FILES'; payload: { fileIds: FileId[] } }
+  | { type: 'UPDATE_FILE_RECORD'; payload: { id: FileId; updates: Partial<FileRecord> } }
+  | { type: 'REORDER_FILES'; payload: { orderedFileIds: FileId[] } }
+  
+  // Pinned files actions
+  | { type: 'PIN_FILE'; payload: { fileId: FileId } }
+  | { type: 'UNPIN_FILE'; payload: { fileId: FileId } }
+  | { type: 'CONSUME_FILES'; payload: { inputFileIds: FileId[]; outputFileRecords: FileRecord[] } }
+  
+  // UI actions  
+  | { type: 'SET_SELECTED_FILES'; payload: { fileIds: FileId[] } }
+  | { type: 'SET_SELECTED_PAGES'; payload: { pageNumbers: number[] } }
+  | { type: 'CLEAR_SELECTIONS' }
+  | { type: 'SET_PROCESSING'; payload: { isProcessing: boolean; progress: number } }
+  
+  // Navigation guard actions (minimal for file-related unsaved changes only)
+  | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
+  
+  // Context management
+  | { type: 'RESET_CONTEXT' };
+
 export interface FileContextActions {
-  // File management
+  // File management - lightweight actions only
   addFiles: (files: File[]) => Promise<File[]>;
-  removeFiles: (fileIds: string[], deleteFromStorage?: boolean) => void;
-  replaceFile: (oldFileId: string, newFile: File) => Promise<void>;
-  clearAllFiles: () => void;
+  addProcessedFiles: (filesWithThumbnails: Array<{ file: File; thumbnail?: string; pageCount?: number }>) => Promise<File[]>;
+  addStoredFiles: (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: FileMetadata }>) => Promise<File[]>;
+  removeFiles: (fileIds: FileId[], deleteFromStorage?: boolean) => Promise<void>;
+  updateFileRecord: (id: FileId, updates: Partial<FileRecord>) => void;
+  reorderFiles: (orderedFileIds: FileId[]) => void;
+  clearAllFiles: () => Promise<void>;
 
   // File pinning
   pinFile: (file: File) => void;
   unpinFile: (file: File) => void;
-  isFilePinned: (file: File) => boolean;
 
   // File consumption (replace unpinned files with outputs)
-  consumeFiles: (inputFiles: File[], outputFiles: File[]) => Promise<void>;
-
-  // Navigation
-  setCurrentMode: (mode: ModeType) => void;
-  setCurrentView: (view: ViewType) => void;
-  setCurrentTool: (tool: ToolType) => void;
+  consumeFiles: (inputFileIds: FileId[], outputFiles: File[]) => Promise<void>;
   // Selection management
-  setSelectedFiles: (fileIds: string[]) => void;
+  setSelectedFiles: (fileIds: FileId[]) => void;
   setSelectedPages: (pageNumbers: number[]) => void;
-  updateProcessedFile: (file: File, processedFile: ProcessedFile) => void;
   clearSelections: () => void;
-
-  // Edit operations
-  applyPageOperations: (fileId: string, operations: PageOperation[]) => void;
-  applyFileOperation: (operation: FileOperation) => void;
-  undoLastOperation: (fileId?: string) => void;
-
-  // Operation history management
-  recordOperation: (fileId: string, operation: FileOperation | PageOperation) => void;
-  markOperationApplied: (fileId: string, operationId: string) => void;
-  markOperationFailed: (fileId: string, operationId: string, error: string) => void;
-  getFileHistory: (fileId: string) => FileOperationHistory | undefined;
-  getAppliedOperations: (fileId: string) => (FileOperation | PageOperation)[];
-  clearFileHistory: (fileId: string) => void;
-
-  // Viewer state
-  updateViewerConfig: (config: Partial<ViewerConfig>) => void;
-
-  // Export configuration
-  setExportConfig: (config: FileContextState['lastExportConfig']) => void;
-
-
-  // Utility
-  getFileById: (fileId: string) => File | undefined;
-  getProcessedFileById: (fileId: string) => ProcessedFile | undefined;
-  getCurrentFile: () => File | undefined;
-  getCurrentProcessedFile: () => ProcessedFile | undefined;
-
-  // Context persistence
-  saveContext: () => Promise<void>;
-  loadContext: () => Promise<void>;
-  resetContext: () => void;
-
-  // Navigation guard system
+  
+  // Processing state - simple flags only
+  setProcessing: (isProcessing: boolean, progress?: number) => void;
+  
+  // File-related unsaved changes (minimal navigation guard support)
   setHasUnsavedChanges: (hasChanges: boolean) => void;
-  requestNavigation: (navigationFn: () => void) => boolean;
-  confirmNavigation: () => void;
-  cancelNavigation: () => void;
-
-  // Memory management
+  
+  // Context management
+  resetContext: () => void;
+  
+  // Resource management
   trackBlobUrl: (url: string) => void;
-  trackPdfDocument: (fileId: string, pdfDoc: any) => void;
-  cleanupFile: (fileId: string) => Promise<void>;
   scheduleCleanup: (fileId: string, delay?: number) => void;
+  cleanupFile: (fileId: string) => void;
 }
 
-export interface FileContextValue extends FileContextState, FileContextActions {}
+// File selectors (separate from actions to avoid re-renders)
+export interface FileContextSelectors {
+  // File access - no state dependency, uses ref
+  getFile: (id: FileId) => File | undefined;
+  getFiles: (ids?: FileId[]) => File[];
+  
+  // Record access - uses normalized state
+  getFileRecord: (id: FileId) => FileRecord | undefined;
+  getFileRecords: (ids?: FileId[]) => FileRecord[];
+  
+  // Derived selectors
+  getAllFileIds: () => FileId[];
+  getSelectedFiles: () => File[];
+  getSelectedFileRecords: () => FileRecord[];
+  
+  // Pinned files selectors
+  getPinnedFileIds: () => FileId[];
+  getPinnedFiles: () => File[];
+  getPinnedFileRecords: () => FileRecord[];
+  isFilePinned: (file: File) => boolean;
+  
+  // Stable signature for effect dependencies
+  getFilesSignature: () => string;
+}
 
 export interface FileContextProviderProps {
   children: React.ReactNode;
@@ -185,16 +282,16 @@ export interface FileContextProviderProps {
   maxCacheSize?: number;
 }
 
-// Helper types for component props
-export interface WithFileContext {
-  fileContext: FileContextValue;
+// Split context values to minimize re-renders
+export interface FileContextStateValue {
+  state: FileContextState;
+  selectors: FileContextSelectors;
 }
 
-// URL parameter types for deep linking
-export interface FileContextUrlParams {
-  mode?: ModeType;
-  fileIds?: string[];
-  pageIds?: string[];
-  zoom?: number;
-  page?: number;
+export interface FileContextActionsValue {
+  actions: FileContextActions;
+  dispatch: (action: FileContextAction) => void;
 }
+
+// TODO: URL parameter types will be redesigned for new routing system
+
diff --git a/frontend/src/types/tool.ts b/frontend/src/types/tool.ts
index e5e8c24e2..463b6a63e 100644
--- a/frontend/src/types/tool.ts
+++ b/frontend/src/types/tool.ts
@@ -54,24 +54,3 @@ export interface Tool {
 
 export type ToolRegistry = Record<string, Tool>;
 
-export interface FileSelectionState {
-  selectedFiles: File[];
-  maxFiles: MaxFiles;
-  isToolMode: boolean;
-}
-
-export interface FileSelectionActions {
-  setSelectedFiles: (files: File[]) => void;
-  setMaxFiles: (maxFiles: MaxFiles) => void;
-  setIsToolMode: (isToolMode: boolean) => void;
-  clearSelection: () => void;
-}
-
-export interface FileSelectionComputed {
-  canSelectMore: boolean;
-  isAtLimit: boolean;
-  selectionCount: number;
-  isMultiFileMode: boolean;
-}
-
-export interface FileSelectionContextValue extends FileSelectionState, FileSelectionActions, FileSelectionComputed {}
diff --git a/frontend/src/utils/downloadUtils.ts b/frontend/src/utils/downloadUtils.ts
index 1c411c87d..404e10925 100644
--- a/frontend/src/utils/downloadUtils.ts
+++ b/frontend/src/utils/downloadUtils.ts
@@ -1,4 +1,4 @@
-import { FileWithUrl } from '../types/file';
+import { FileMetadata } from '../types/file';
 import { fileStorage } from '../services/fileStorage';
 import { zipFileService } from '../services/zipFileService';
 
@@ -26,8 +26,8 @@ export function downloadBlob(blob: Blob, filename: string): void {
  * @param file - The file object with storage information
  * @throws Error if file cannot be retrieved from storage
  */
-export async function downloadFileFromStorage(file: FileWithUrl): Promise<void> {
-  const lookupKey = file.id || file.name;
+export async function downloadFileFromStorage(file: FileMetadata): Promise<void> {
+  const lookupKey = file.id;
   const storedFile = await fileStorage.getFile(lookupKey);
   
   if (!storedFile) {
@@ -42,7 +42,7 @@ export async function downloadFileFromStorage(file: FileWithUrl): Promise<void>
  * Downloads multiple files as individual downloads
  * @param files - Array of files to download
  */
-export async function downloadMultipleFiles(files: FileWithUrl[]): Promise<void> {
+export async function downloadMultipleFiles(files: FileMetadata[]): Promise<void> {
   for (const file of files) {
     await downloadFileFromStorage(file);
   }
@@ -53,7 +53,7 @@ export async function downloadMultipleFiles(files: FileWithUrl[]): Promise<void>
  * @param files - Array of files to include in ZIP
  * @param zipFilename - Optional custom ZIP filename (defaults to timestamped name)
  */
-export async function downloadFilesAsZip(files: FileWithUrl[], zipFilename?: string): Promise<void> {
+export async function downloadFilesAsZip(files: FileMetadata[], zipFilename?: string): Promise<void> {
   if (files.length === 0) {
     throw new Error('No files provided for ZIP download');
   }
@@ -61,7 +61,7 @@ export async function downloadFilesAsZip(files: FileWithUrl[], zipFilename?: str
   // Convert stored files to File objects
   const fileObjects: File[] = [];
   for (const fileWithUrl of files) {
-    const lookupKey = fileWithUrl.id || fileWithUrl.name;
+    const lookupKey = fileWithUrl.id;
     const storedFile = await fileStorage.getFile(lookupKey);
     
     if (storedFile) {
@@ -94,7 +94,7 @@ export async function downloadFilesAsZip(files: FileWithUrl[], zipFilename?: str
  * @param options - Download options
  */
 export async function downloadFiles(
-  files: FileWithUrl[], 
+  files: FileMetadata[], 
   options: {
     forceZip?: boolean;
     zipFilename?: string;
diff --git a/frontend/src/utils/fileUtils.ts b/frontend/src/utils/fileUtils.ts
index 040fc14c7..b7e3a429c 100644
--- a/frontend/src/utils/fileUtils.ts
+++ b/frontend/src/utils/fileUtils.ts
@@ -1,9 +1,4 @@
-import { FileWithUrl } from "../types/file";
-import { StoredFile, fileStorage } from "../services/fileStorage";
-
-export function getFileId(file: File): string | null {
-  return (file as File & { id?: string }).id || null;
-}
+// Pure utility functions for file operations
 
 /**
  * Consolidated file size formatting utility
@@ -19,7 +14,7 @@ export function formatFileSize(bytes: number): string {
 /**
  * Get file date as string
  */
-export function getFileDate(file: File): string {
+export function getFileDate(file: File | { lastModified: number }): string {
   if (file.lastModified) {
     return new Date(file.lastModified).toLocaleString();
   }
@@ -29,107 +24,12 @@ export function getFileDate(file: File): string {
 /**
  * Get file size as string (legacy method for backward compatibility)
  */
-export function getFileSize(file: File): string {
+export function getFileSize(file: File | { size: number }): string {
   if (!file.size) return "Unknown";
   return formatFileSize(file.size);
 }
 
-/**
- * Create enhanced file object from stored file metadata
- * This eliminates the repeated pattern in FileManager
- */
-export function createEnhancedFileFromStored(storedFile: StoredFile, thumbnail?: string): FileWithUrl {
-  const enhancedFile: FileWithUrl = {
-    id: storedFile.id,
-    storedInIndexedDB: true,
-    url: undefined, // Don't create blob URL immediately to save memory
-    thumbnail: thumbnail || storedFile.thumbnail,
-    // File metadata
-    name: storedFile.name,
-    size: storedFile.size,
-    type: storedFile.type,
-    lastModified: storedFile.lastModified,
-    webkitRelativePath: '',
-    // Lazy-loading File interface methods
-    arrayBuffer: async () => {
-      const data = await fileStorage.getFileData(storedFile.id);
-      if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
-      return data;
-    },
-    bytes: async () => {
-      return new Uint8Array();
-    },
-    slice: (start?: number, end?: number, contentType?: string) => {
-      // Return a promise-based slice that loads from IndexedDB
-      return new Blob([], { type: contentType || storedFile.type });
-    },
-    stream: () => {
-      throw new Error('Stream not implemented for IndexedDB files');
-    },
-    text: async () => {
-      const data = await fileStorage.getFileData(storedFile.id);
-      if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
-      return new TextDecoder().decode(data);
-    },
-  } as FileWithUrl;
 
-  return enhancedFile;
-}
-
-/**
- * Load files from IndexedDB and convert to enhanced file objects
- */
-export async function loadFilesFromIndexedDB(): Promise<FileWithUrl[]> {
-  try {
-    await fileStorage.init();
-    const storedFiles = await fileStorage.getAllFileMetadata();
-
-    if (storedFiles.length === 0) {
-      return [];
-    }
-
-    const restoredFiles: FileWithUrl[] = storedFiles
-      .filter(storedFile => {
-        // Filter out corrupted entries
-        return storedFile &&
-               storedFile.name &&
-               typeof storedFile.size === 'number';
-      })
-      .map(storedFile => {
-        try {
-          return createEnhancedFileFromStored(storedFile as any);
-        } catch (error) {
-          console.error('Failed to restore file:', storedFile?.name || 'unknown', error);
-          return null;
-        }
-      })
-      .filter((file): file is FileWithUrl => file !== null);
-
-    return restoredFiles;
-  } catch (error) {
-    console.error('Failed to load files from IndexedDB:', error);
-    return [];
-  }
-}
-
-/**
- * Clean up blob URLs from file objects
- */
-export function cleanupFileUrls(files: FileWithUrl[]): void {
-  files.forEach(file => {
-    if (file.url && !file.url.startsWith('indexeddb:')) {
-      URL.revokeObjectURL(file.url);
-    }
-  });
-}
-
-/**
- * Check if file should use blob URL or IndexedDB direct access
- */
-export function shouldUseDirectIndexedDBAccess(file: FileWithUrl): boolean {
-  const FILE_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
-  return file.size > FILE_SIZE_LIMIT;
-}
 
 /**
  * Detects and normalizes file extension from filename
@@ -151,29 +51,3 @@ export function detectFileExtension(filename: string): string {
 
   return extension;
 }
-
-/**
- * Gets the filename without extension
- * @param filename - The filename to process
- * @returns Filename without extension
- */
-export function getFilenameWithoutExtension(filename: string): string {
-  if (!filename || typeof filename !== 'string') return '';
-
-  const parts = filename.split('.');
-  if (parts.length <= 1) return filename;
-
-  // Return all parts except the last one (extension)
-  return parts.slice(0, -1).join('.');
-}
-
-/**
- * Creates a new filename with a different extension
- * @param filename - Original filename
- * @param newExtension - New extension (without dot)
- * @returns New filename with the specified extension
- */
-export function changeFileExtension(filename: string, newExtension: string): string {
-  const nameWithoutExt = getFilenameWithoutExtension(filename);
-  return `${nameWithoutExt}.${newExtension}`;
-}
diff --git a/frontend/src/utils/storageUtils.ts b/frontend/src/utils/storageUtils.ts
index def05b96d..14ae78fee 100644
--- a/frontend/src/utils/storageUtils.ts
+++ b/frontend/src/utils/storageUtils.ts
@@ -1,5 +1,4 @@
 import { StorageStats } from "../services/fileStorage";
-import { FileWithUrl } from "../types/file";
 
 /**
  * Storage operation types for incremental updates
@@ -12,7 +11,7 @@ export type StorageOperation = 'add' | 'remove' | 'clear';
 export function updateStorageStatsIncremental(
   currentStats: StorageStats,
   operation: StorageOperation,
-  files: FileWithUrl[] = []
+  files: File[] = []
 ): StorageStats {
   const filesSizeTotal = files.reduce((total, file) => total + file.size, 0);
   
diff --git a/frontend/src/utils/thumbnailUtils.ts b/frontend/src/utils/thumbnailUtils.ts
index 72e1bc392..e4a48f9fd 100644
--- a/frontend/src/utils/thumbnailUtils.ts
+++ b/frontend/src/utils/thumbnailUtils.ts
@@ -1,4 +1,9 @@
-import { getDocument } from "pdfjs-dist";
+import { pdfWorkerManager } from '../services/pdfWorkerManager';
+
+export interface ThumbnailWithMetadata {
+  thumbnail: string; // Always returns a thumbnail (placeholder if needed)
+  pageCount: number;
+}
 
 interface ColorScheme {
   bgTop: string;
@@ -11,19 +16,18 @@ interface ColorScheme {
 }
 
 /**
- * Calculate thumbnail scale based on file size
- * Smaller files get higher quality, larger files get lower quality
+ * Calculate thumbnail scale based on file size (modern 2024 scaling)
  */
 export function calculateScaleFromFileSize(fileSize: number): number {
   const MB = 1024 * 1024;
-
-  if (fileSize < 1 * MB) return 0.6;      // < 1MB: High quality
-  if (fileSize < 5 * MB) return 0.4;      // 1-5MB: Medium-high quality
-  if (fileSize < 15 * MB) return 0.3;     // 5-15MB: Medium quality
-  if (fileSize < 30 * MB) return 0.2;     // 15-30MB: Low-medium quality
-  return 0.15;                            // 30MB+: Low quality
+  if (fileSize < 10 * MB) return 1.0;   // Full quality for small files
+  if (fileSize < 50 * MB) return 0.8;   // High quality for common file sizes
+  if (fileSize < 200 * MB) return 0.6;  // Good quality for typical large files
+  if (fileSize < 500 * MB) return 0.4;  // Readable quality for large but manageable files
+  return 0.3;  // Still usable quality, not tiny
 }
 
+
 /**
  * Generate encrypted PDF thumbnail with lock icon
  */
@@ -125,16 +129,40 @@ function getFileTypeColorScheme(extension: string): ColorScheme {
     'PDF': { bgTop: '#FF6B6B20', bgBottom: '#FF6B6B10', border: '#FF6B6B40', icon: '#FF6B6B', badge: '#FF6B6B', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'DOC': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'DOCX': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'ODT': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'TXT': { bgTop: '#95A5A620', bgBottom: '#95A5A610', border: '#95A5A640', icon: '#95A5A6', badge: '#95A5A6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'RTF': { bgTop: '#95A5A620', bgBottom: '#95A5A610', border: '#95A5A640', icon: '#95A5A6', badge: '#95A5A6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
 
     // Spreadsheets
     'XLS': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'XLSX': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'ODS': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'CSV': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
 
     // Presentations
     'PPT': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
     'PPTX': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'ODP': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+
+    // Images
+    'JPG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'JPEG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'PNG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'GIF': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'BMP': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'TIFF': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'WEBP': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'SVG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+
+    // Web
+    'HTML': { bgTop: '#FD79A820', bgBottom: '#FD79A810', border: '#FD79A840', icon: '#FD79A8', badge: '#FD79A8', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    'XML': { bgTop: '#FD79A820', bgBottom: '#FD79A810', border: '#FD79A840', icon: '#FD79A8', badge: '#FD79A8', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+
+    // Text/Markup
+    'MD': { bgTop: '#6C5CE720', bgBottom: '#6C5CE710', border: '#6C5CE740', icon: '#6C5CE7', badge: '#6C5CE7', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+
+    // Email
+    'EML': { bgTop: '#A29BFE20', bgBottom: '#A29BFE10', border: '#A29BFE40', icon: '#A29BFE', badge: '#A29BFE', textPrimary: '#FFFFFF', textSecondary: '#666666' },
 
     // Archives
     'ZIP': { bgTop: '#9B59B620', bgBottom: '#9B59B610', border: '#9B59B640', icon: '#9B59B6', badge: '#9B59B6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
@@ -275,16 +303,15 @@ function formatFileSize(bytes: number): string {
 
 async function generatePDFThumbnail(arrayBuffer: ArrayBuffer, file: File, scale: number): Promise<string> {
   try {
-    const pdf = await getDocument({
-      data: arrayBuffer,
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
       disableAutoFetch: true,
       disableStream: true
-    }).promise;
+    });
 
     const thumbnail = await generateStandardPDFThumbnail(pdf, scale);
 
-    // Immediately clean up memory after thumbnail generation
-    pdf.destroy();
+    // Immediately clean up memory after thumbnail generation using worker manager
+    pdfWorkerManager.destroyDocument(pdf);
     return thumbnail;
   } catch (error) {
     if (error instanceof Error) {
@@ -298,52 +325,105 @@ async function generatePDFThumbnail(arrayBuffer: ArrayBuffer, file: File, scale:
 }
 
 /**
- * Generate thumbnail for any file type
- * Returns base64 data URL or undefined if generation fails
+ * Generate thumbnail for any file type - always returns a thumbnail (placeholder if needed)
  */
-export async function generateThumbnailForFile(file: File): Promise<string | undefined> {
-  // Skip thumbnail generation for very large files to avoid memory issues
-  if (file.size >= 100 * 1024 * 1024) { // 100MB limit
-    console.log('Skipping thumbnail generation for large file:', file.name);
+export async function generateThumbnailForFile(file: File): Promise<string> {
+  // Skip very large files
+  if (file.size >= 100 * 1024 * 1024) {
     return generatePlaceholderThumbnail(file);
   }
 
-  // Handle image files - use original file directly
+  // Handle image files - convert to data URL for persistence
   if (file.type.startsWith('image/')) {
-    return URL.createObjectURL(file);
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
   }
 
   // Handle PDF files
-  if (!file.type.startsWith('application/pdf')) {
-    console.log('File is not a PDF or image, generating placeholder:', file.name);
-    return generatePlaceholderThumbnail(file);
-  }
-
-  // Calculate quality scale based on file size
-  console.log('Generating thumbnail for', file.name);
-  const scale = calculateScaleFromFileSize(file.size);
-  console.log(`Using scale ${scale} for ${file.name} (${(file.size / 1024 / 1024).toFixed(1)}MB)`);
-
-  // Only read first 2MB for thumbnail generation to save memory
-  const chunkSize = 2 * 1024 * 1024; // 2MB
-  const chunk = file.slice(0, Math.min(chunkSize, file.size));
-  const arrayBuffer = await chunk.arrayBuffer();
-
-  try {
-    return await generatePDFThumbnail(arrayBuffer, file, scale);
-  } catch (error) {
-    if (error instanceof Error) {
-      if (error.name === 'InvalidPDFException') {
-        console.warn(`PDF structure issue for ${file.name} - using fallback thumbnail`);
-        // Return a placeholder or try with full file instead of chunk
-        const fullArrayBuffer = await file.arrayBuffer();
-        return await generatePDFThumbnail(fullArrayBuffer, file, scale);
-      } else {
-        console.warn('Unknown error thrown. Failed to generate thumbnail for', file.name, error);
-        return undefined;
+  if (file.type.startsWith('application/pdf')) {
+    const scale = calculateScaleFromFileSize(file.size);
+    
+    // Only read first 2MB for thumbnail generation to save memory
+    const chunkSize = 2 * 1024 * 1024; // 2MB
+    const chunk = file.slice(0, Math.min(chunkSize, file.size));
+    const arrayBuffer = await chunk.arrayBuffer();
+    
+    try {
+      return await generatePDFThumbnail(arrayBuffer, file, scale);
+    } catch (error) {
+      if (error instanceof Error && error.name === 'InvalidPDFException') {
+        console.warn(`PDF structure issue for ${file.name} - trying with full file`);
+        try {
+          // Try with full file instead of chunk
+          const fullArrayBuffer = await file.arrayBuffer();
+          return await generatePDFThumbnail(fullArrayBuffer, file, scale);
+        } catch (fullFileError) {
+          console.warn(`Full file PDF processing also failed for ${file.name} - using placeholder`);
+          return generatePlaceholderThumbnail(file);
+        }
       }
-    } else {
-      throw error; // Re-throw non-Error exceptions
+      console.warn(`PDF processing failed for ${file.name} - using placeholder:`, error);
+      return generatePlaceholderThumbnail(file);
     }
   }
+
+  // All other files get placeholder
+  return generatePlaceholderThumbnail(file);
 }
+
+/**
+ * Generate thumbnail and extract page count for a PDF file - always returns a valid thumbnail
+ */
+export async function generateThumbnailWithMetadata(file: File): Promise<ThumbnailWithMetadata> {
+  // Non-PDF files have no page count
+  if (!file.type.startsWith('application/pdf')) {
+    const thumbnail = await generateThumbnailForFile(file);
+    return { thumbnail, pageCount: 0 };
+  }
+
+  // Skip very large files
+  if (file.size >= 100 * 1024 * 1024) {
+    const thumbnail = generatePlaceholderThumbnail(file);
+    return { thumbnail, pageCount: 1 };
+  }
+
+  const scale = calculateScaleFromFileSize(file.size);
+  
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+    
+    const pageCount = pdf.numPages;
+    const page = await pdf.getPage(1);
+    const viewport = page.getViewport({ scale });
+    const canvas = document.createElement("canvas");
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    const context = canvas.getContext("2d");
+
+    if (!context) {
+      pdfWorkerManager.destroyDocument(pdf);
+      throw new Error('Could not get canvas context');
+    }
+
+    await page.render({ canvasContext: context, viewport }).promise;
+    const thumbnail = canvas.toDataURL();
+    
+    pdfWorkerManager.destroyDocument(pdf);
+    return { thumbnail, pageCount };
+
+  } catch (error) {
+    if (error instanceof Error && error.name === "PasswordException") {
+      // Handle encrypted PDFs
+      const thumbnail = generateEncryptedPDFThumbnail(file);
+      return { thumbnail, pageCount: 1 };
+    }
+    
+    const thumbnail = generatePlaceholderThumbnail(file);
+    return { thumbnail, pageCount: 1 };
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/urlRouting.ts b/frontend/src/utils/urlRouting.ts
new file mode 100644
index 000000000..fbf6c1c3c
--- /dev/null
+++ b/frontend/src/utils/urlRouting.ts
@@ -0,0 +1,180 @@
+/**
+ * URL routing utilities for tool navigation
+ * Provides clean URL routing for the V2 tool system
+ */
+
+import { ModeType } from '../contexts/NavigationContext';
+
+export interface ToolRoute {
+  mode: ModeType;
+  toolKey?: string;
+}
+
+/**
+ * Parse the current URL to extract tool routing information
+ */
+export function parseToolRoute(): ToolRoute {
+  const path = window.location.pathname;
+  const searchParams = new URLSearchParams(window.location.search);
+  
+  // Extract tool from URL path (e.g., /split-pdf -> split)
+  const toolMatch = path.match(/\/([a-zA-Z-]+)(?:-pdf)?$/);
+  if (toolMatch) {
+    const toolKey = toolMatch[1].toLowerCase();
+    
+    // Map URL paths to tool keys and modes (excluding internal UI modes)
+    const toolMappings: Record<string, { mode: ModeType; toolKey: string }> = {
+      'split': { mode: 'split', toolKey: 'split' },
+      'merge': { mode: 'merge', toolKey: 'merge' },
+      'compress': { mode: 'compress', toolKey: 'compress' },
+      'convert': { mode: 'convert', toolKey: 'convert' },
+      'add-password': { mode: 'addPassword', toolKey: 'addPassword' },
+      'change-permissions': { mode: 'changePermissions', toolKey: 'changePermissions' },
+      'sanitize': { mode: 'sanitize', toolKey: 'sanitize' },
+      'ocr': { mode: 'ocr', toolKey: 'ocr' }
+    };
+    
+    const mapping = toolMappings[toolKey];
+    if (mapping) {
+      return {
+        mode: mapping.mode,
+        toolKey: mapping.toolKey
+      };
+    }
+  }
+  
+  // Check for query parameter fallback (e.g., ?tool=split)
+  const toolParam = searchParams.get('tool');
+  if (toolParam && isValidMode(toolParam)) {
+    return {
+      mode: toolParam as ModeType,
+      toolKey: toolParam
+    };
+  }
+  
+  // Default to page editor for home page
+  return {
+    mode: 'pageEditor'
+  };
+}
+
+/**
+ * Update the URL to reflect the current tool selection
+ * Internal UI modes (viewer, fileEditor, pageEditor) don't get URLs
+ */
+export function updateToolRoute(mode: ModeType, toolKey?: string): void {
+  const currentPath = window.location.pathname;
+  const searchParams = new URLSearchParams(window.location.search);
+  
+  // Don't create URLs for internal UI modes
+  if (mode === 'viewer' || mode === 'fileEditor' || mode === 'pageEditor') {
+    // If we're switching to an internal mode, clear any existing tool URL
+    if (currentPath !== '/') {
+      clearToolRoute();
+    }
+    return;
+  }
+  
+  let newPath = '/';
+  
+  // Map modes to URL paths (only for actual tools)
+  if (toolKey) {
+    const pathMappings: Record<string, string> = {
+      'split': '/split-pdf',
+      'merge': '/merge-pdf', 
+      'compress': '/compress-pdf',
+      'convert': '/convert-pdf',
+      'addPassword': '/add-password-pdf',
+      'changePermissions': '/change-permissions-pdf',
+      'sanitize': '/sanitize-pdf',
+      'ocr': '/ocr-pdf'
+    };
+    
+    newPath = pathMappings[toolKey] || `/${toolKey}`;
+  }
+  
+  // Remove tool query parameter since we're using path-based routing
+  searchParams.delete('tool');
+  
+  // Construct final URL
+  const queryString = searchParams.toString();
+  const fullUrl = newPath + (queryString ? `?${queryString}` : '');
+  
+  // Update URL without triggering page reload
+  if (currentPath !== newPath || window.location.search !== (queryString ? `?${queryString}` : '')) {
+    window.history.replaceState(null, '', fullUrl);
+  }
+}
+
+/**
+ * Clear tool routing and return to home page
+ */
+export function clearToolRoute(): void {
+  const searchParams = new URLSearchParams(window.location.search);
+  searchParams.delete('tool');
+  
+  const queryString = searchParams.toString();
+  const url = '/' + (queryString ? `?${queryString}` : '');
+  
+  window.history.replaceState(null, '', url);
+}
+
+/**
+ * Get clean tool name for display purposes
+ */
+export function getToolDisplayName(toolKey: string): string {
+  const displayNames: Record<string, string> = {
+    'split': 'Split PDF',
+    'merge': 'Merge PDF',
+    'compress': 'Compress PDF', 
+    'convert': 'Convert PDF',
+    'addPassword': 'Add Password',
+    'changePermissions': 'Change Permissions',
+    'sanitize': 'Sanitize PDF',
+    'ocr': 'OCR PDF'
+  };
+  
+  return displayNames[toolKey] || toolKey;
+}
+
+/**
+ * Check if a mode is valid
+ */
+function isValidMode(mode: string): mode is ModeType {
+  const validModes: ModeType[] = [
+    'viewer', 'pageEditor', 'fileEditor', 'merge', 'split', 
+    'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 'sanitize'
+  ];
+  return validModes.includes(mode as ModeType);
+}
+
+/**
+ * Generate shareable URL for current tool state
+ * Only generates URLs for actual tools, not internal UI modes
+ */
+export function generateShareableUrl(mode: ModeType, toolKey?: string): string {
+  const baseUrl = window.location.origin;
+  
+  // Don't generate URLs for internal UI modes
+  if (mode === 'viewer' || mode === 'fileEditor' || mode === 'pageEditor') {
+    return baseUrl;
+  }
+  
+  if (toolKey) {
+    const pathMappings: Record<string, string> = {
+      'split': '/split-pdf',
+      'merge': '/merge-pdf',
+      'compress': '/compress-pdf', 
+      'convert': '/convert-pdf',
+      'addPassword': '/add-password-pdf',
+      'changePermissions': '/change-permissions-pdf',
+      'sanitize': '/sanitize-pdf',
+      'ocr': '/ocr-pdf'
+    };
+    
+    const path = pathMappings[toolKey] || `/${toolKey}`;
+    return `${baseUrl}${path}`;
+  }
+  
+  return baseUrl;
+}
\ No newline at end of file

From 7d9c0b0298c831cb9be93dda31a315f58e0b9071 Mon Sep 17 00:00:00 2001
From: James Brunton <jbrunton96@gmail.com>
Date: Fri, 22 Aug 2025 13:53:06 +0100
Subject: [PATCH 11/11] V2 Fix subcategory names in All Tools (and search) pane
 (#4252)

# Description of Changes
Because we used string typing for IDs and names, it was really easy to
make mistakes where variables named like `subcategory` would be stored
as an ID in one file, but then read assuming it's a name in another
file. This PR changes the code to consistently use enum cases when
referring to IDs of categories, subcategories, and tools (at least in as
many places as I can find them, ~I had to add a `ToolId` enum for this
work~ I originally added a `ToolId` type for this work, but it caused
too many issues when merging with #4222 so I've pulled it back out for
now).

Making that change made it obvious where we were inconsistently passing
IDs and reading them as names etc. allowing me to fix rendering issues
in the All Tools pane, where the subcategory IDs were being rendered
directly (instead of being translated) or where IDs were being
translated into names, but were then being re-translated, causing
warnings in the log.
---
 .../public/locales/en-GB/translation.json     |  27 ++-
 .../src/components/shared/QuickAccessBar.tsx  |  10 +-
 .../src/components/tools/SearchResults.tsx    |   6 +-
 frontend/src/components/tools/ToolPicker.tsx  |  26 +-
 .../tools/shared/SuggestedToolsSection.tsx    |   2 +-
 .../tools/toolPicker/ToolButton.tsx           |   6 +-
 frontend/src/contexts/ToolWorkflowContext.tsx |   4 +-
 frontend/src/data/toolsTaxonomy.ts            | 142 +++++------
 .../src/data/useTranslatedToolRegistry.tsx    | 223 +++++++++---------
 frontend/src/hooks/useSuggestedTools.ts       |  20 +-
 frontend/src/hooks/useToolManagement.tsx      |   2 +-
 frontend/src/hooks/useToolSections.ts         | 101 +++++---
 12 files changed, 299 insertions(+), 270 deletions(-)

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e09f874ac..0a03fd01a 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1925,18 +1925,23 @@
     "noToolsFound": "No tools found",
     "allTools": "ALL TOOLS",
     "quickAccess": "QUICK ACCESS",
+    "categories": {
+      "standardTools": "Standard Tools",
+      "advancedTools": "Advanced Tools",
+      "recommendedTools": "Recommended Tools"
+    },
     "subcategories": {
-      "Signing": "Signing",
-      "Document Security": "Document Security",
-      "Verification": "Verification",
-      "Document Review": "Document Review",
-      "Page Formatting": "Page Formatting",
-      "Extraction": "Extraction",
-      "Removal": "Removal",
-      "Automation": "Automation",
-      "General": "General",
-      "Advanced Formatting": "Advanced Formatting",
-      "Developer Tools": "Developer Tools"
+      "signing": "Signing",
+      "documentSecurity": "Document Security",
+      "verification": "Verification",
+      "documentReview": "Document Review",
+      "pageFormatting": "Page Formatting",
+      "extraction": "Extraction",
+      "removal": "Removal",
+      "automation": "Automation",
+      "general": "General",
+      "advancedFormatting": "Advanced Formatting",
+      "developerTools": "Developer Tools"
     }
   },
   "quickAccess": {
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index bc041a923..80ef86c83 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -13,9 +13,9 @@ import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
 import ActiveToolButton from "./quickAccessBar/ActiveToolButton";
-import { 
-  isNavButtonActive, 
-  getNavButtonStyle, 
+import {
+  isNavButtonActive,
+  getNavButtonStyle,
   getActiveNavButton,
 } from './quickAccessBar/QuickAccessBar';
 
@@ -39,7 +39,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     openFilesModal();
   };
 
-  
+
   const buttonConfigs: ButtonConfig[] = [
     {
       id: 'read',
@@ -226,4 +226,4 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
   );
 });
 
-export default QuickAccessBar;
\ No newline at end of file
+export default QuickAccessBar;
diff --git a/frontend/src/components/tools/SearchResults.tsx b/frontend/src/components/tools/SearchResults.tsx
index 949bd2f64..6ecb64b7e 100644
--- a/frontend/src/components/tools/SearchResults.tsx
+++ b/frontend/src/components/tools/SearchResults.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Stack, Text } from '@mantine/core';
-import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { getSubcategoryLabel, ToolRegistryEntry } from '../../data/toolsTaxonomy';
 import ToolButton from './toolPicker/ToolButton';
 import { useTranslation } from 'react-i18next';
 import { useToolSections } from '../../hooks/useToolSections';
@@ -23,8 +23,8 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
   return (
     <Stack p="sm" gap="xs">
       {searchGroups.map(group => (
-        <Box key={group.subcategory} w="100%">
-          <SubcategoryHeader label={t(`toolPicker.subcategories.${group.subcategory}`, group.subcategory)} />
+        <Box key={group.subcategoryId} w="100%">
+          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
           <Stack gap="xs">
             {group.tools.map(({ id, tool }) => (
               <ToolButton
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index 9dec8f45a..411ecdb7a 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
 import { Box, Text, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
+import { getSubcategoryLabel, ToolRegistryEntry } from "../../data/toolsTaxonomy";
 import ToolButton from "./toolPicker/ToolButton";
 import "./toolPicker/ToolPicker.css";
-import { useToolSections } from "../../hooks/useToolSections";
+import { SubcategoryGroup, useToolSections } from "../../hooks/useToolSections";
 import SubcategoryHeader from "./shared/SubcategoryHeader";
 import NoToolsFound from "./shared/NoToolsFound";
+import { TFunction } from "i18next";
 
 interface ToolPickerProps {
   selectedToolKey: string | null;
@@ -17,14 +18,15 @@ interface ToolPickerProps {
 
 // Helper function to render tool buttons for a subcategory
 const renderToolButtons = (
-  subcategory: any,
+  t: TFunction,
+  subcategory: SubcategoryGroup,
   selectedToolKey: string | null,
   onSelect: (id: string) => void,
   showSubcategoryHeader: boolean = true
 ) => (
-  <Box key={subcategory.subcategory} w="100%">
+  <Box key={subcategory.subcategoryId} w="100%">
     {showSubcategoryHeader && (
-      <SubcategoryHeader label={subcategory.subcategory} />
+      <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
     )}
     <Stack gap="xs">
       {subcategory.tools.map(({ id, tool }: { id: string; tool: any }) => (
@@ -69,11 +71,11 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
   const { sections: visibleSections } = useToolSections(filteredTools);
 
   const quickSection = useMemo(
-    () => visibleSections.find(s => (s as any).key === 'quick'),
+    () => visibleSections.find(s => s.key === 'quick'),
     [visibleSections]
   );
   const allSection = useMemo(
-    () => visibleSections.find(s => (s as any).key === 'all'),
+    () => visibleSections.find(s => s.key === 'all'),
     [visibleSections]
   );
 
@@ -120,7 +122,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
             {searchGroups.length === 0 ? (
               <NoToolsFound />
             ) : (
-              searchGroups.map(group => renderToolButtons(group, selectedToolKey, onSelect))
+              searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect))
             )}
           </Stack>
         ) : (
@@ -164,8 +166,8 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
             <Box ref={quickAccessRef} w="100%">
               <Stack p="sm" gap="xs">
-                {quickSection?.subcategories.map(sc => 
-                  renderToolButtons(sc, selectedToolKey, onSelect, false)
+                {quickSection?.subcategories.map(sc =>
+                  renderToolButtons(t, sc, selectedToolKey, onSelect, false)
                 )}
               </Stack>
             </Box>
@@ -210,8 +212,8 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
             <Box ref={allToolsRef} w="100%">
               <Stack p="sm" gap="xs">
-                {allSection?.subcategories.map(sc => 
-                  renderToolButtons(sc, selectedToolKey, onSelect, true)
+                {allSection?.subcategories.map(sc =>
+                  renderToolButtons(t, sc, selectedToolKey, onSelect, true)
                 )}
               </Stack>
             </Box>
diff --git a/frontend/src/components/tools/shared/SuggestedToolsSection.tsx b/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
index b1f91fc39..da0418571 100644
--- a/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
+++ b/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
@@ -21,7 +21,7 @@ export function SuggestedToolsSection(): React.ReactElement {
           const IconComponent = tool.icon;
           return (
             <Card
-              key={tool.name}
+              key={tool.id}
               p="sm"
               withBorder
               style={{ cursor: 'pointer' }}
diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx
index af668a1fa..66bd9489e 100644
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -14,9 +14,9 @@ interface ToolButtonProps {
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
   const handleClick = (id: string) => {
     if (tool.link) {
-      // Open external link in new tab 
+      // Open external link in new tab
       window.open(tool.link, '_blank', 'noopener,noreferrer');
-      return; 
+      return;
     }
     // Normal tool selection
     onSelect(id);
@@ -47,4 +47,4 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
   );
 };
 
-export default ToolButton; 
\ No newline at end of file
+export default ToolButton;
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 4ca66e61c..1ee211312 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -72,7 +72,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   selectedToolKey: string | null;
   selectedTool: ToolRegistryEntry | null;
   toolRegistry: any; // From useToolManagement
-  
+
   // UI Actions
   setSidebarsVisible: (visible: boolean) => void;
   setLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
@@ -230,4 +230,4 @@ export function useToolWorkflow(): ToolWorkflowContextValue {
     throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
   }
   return context;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/data/toolsTaxonomy.ts b/frontend/src/data/toolsTaxonomy.ts
index a76752b87..2dff2b8e4 100644
--- a/frontend/src/data/toolsTaxonomy.ts
+++ b/frontend/src/data/toolsTaxonomy.ts
@@ -3,101 +3,101 @@ import React from 'react';
 import { BaseToolProps } from '../types/tool';
 
 export enum SubcategoryId {
-	SIGNING = 'signing',
-	DOCUMENT_SECURITY = 'documentSecurity',
-	VERIFICATION = 'verification',
-	DOCUMENT_REVIEW = 'documentReview',
-	PAGE_FORMATTING = 'pageFormatting',
-	EXTRACTION = 'extraction',
-	REMOVAL = 'removal',
-	AUTOMATION = 'automation',
-	GENERAL = 'general',
-	ADVANCED_FORMATTING = 'advancedFormatting',
-	DEVELOPER_TOOLS = 'developerTools'
+  SIGNING = 'signing',
+  DOCUMENT_SECURITY = 'documentSecurity',
+  VERIFICATION = 'verification',
+  DOCUMENT_REVIEW = 'documentReview',
+  PAGE_FORMATTING = 'pageFormatting',
+  EXTRACTION = 'extraction',
+  REMOVAL = 'removal',
+  AUTOMATION = 'automation',
+  GENERAL = 'general',
+  ADVANCED_FORMATTING = 'advancedFormatting',
+  DEVELOPER_TOOLS = 'developerTools'
 }
 
-export enum ToolCategory {
-	STANDARD_TOOLS = 'Standard Tools',
-	ADVANCED_TOOLS = 'Advanced Tools',
-	RECOMMENDED_TOOLS = 'Recommended Tools'
+export enum ToolCategoryId {
+  STANDARD_TOOLS = 'standardTools',
+  ADVANCED_TOOLS = 'advancedTools',
+  RECOMMENDED_TOOLS = 'recommendedTools'
 }
 
 export type ToolRegistryEntry = {
-	icon: React.ReactNode;
-	name: string;
-	component: React.ComponentType<BaseToolProps> | null;
-	view: 'sign' | 'security' | 'format' | 'extract' | 'view' | 'merge' | 'pageEditor' | 'convert' | 'redact' | 'split' | 'convert' | 'remove' | 'compress' | 'external';
-	description: string;
-	category: ToolCategory;
-	subcategory: SubcategoryId;
-	maxFiles?: number;
-	supportedFormats?: string[];
-	endpoints?: string[];
-	link?: string;
-	type?: string;
+  icon: React.ReactNode;
+  name: string;
+  component: React.ComponentType<BaseToolProps> | null;
+  view: 'sign' | 'security' | 'format' | 'extract' | 'view' | 'merge' | 'pageEditor' | 'convert' | 'redact' | 'split' | 'convert' | 'remove' | 'compress' | 'external';
+  description: string;
+  categoryId: ToolCategoryId;
+  subcategoryId: SubcategoryId;
+  maxFiles?: number;
+  supportedFormats?: string[];
+  endpoints?: string[];
+  link?: string;
+  type?: string;
 }
 
-export type ToolRegistry = Record<string, ToolRegistryEntry>;
+export type ToolRegistry = Record<string /* FIX ME: Should be ToolId */, ToolRegistryEntry>;
 
 export const SUBCATEGORY_ORDER: SubcategoryId[] = [
-	SubcategoryId.SIGNING,
-	SubcategoryId.DOCUMENT_SECURITY,
-	SubcategoryId.VERIFICATION,
-	SubcategoryId.DOCUMENT_REVIEW,
-	SubcategoryId.PAGE_FORMATTING,
-	SubcategoryId.EXTRACTION,
-	SubcategoryId.REMOVAL,
-	SubcategoryId.AUTOMATION,
-	SubcategoryId.GENERAL,
-	SubcategoryId.ADVANCED_FORMATTING,
-	SubcategoryId.DEVELOPER_TOOLS,
+  SubcategoryId.SIGNING,
+  SubcategoryId.DOCUMENT_SECURITY,
+  SubcategoryId.VERIFICATION,
+  SubcategoryId.DOCUMENT_REVIEW,
+  SubcategoryId.PAGE_FORMATTING,
+  SubcategoryId.EXTRACTION,
+  SubcategoryId.REMOVAL,
+  SubcategoryId.AUTOMATION,
+  SubcategoryId.GENERAL,
+  SubcategoryId.ADVANCED_FORMATTING,
+  SubcategoryId.DEVELOPER_TOOLS,
 ];
 
 export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
-	[SubcategoryId.SIGNING]: '#FF7892',
-	[SubcategoryId.DOCUMENT_SECURITY]: '#FF7892',
-	[SubcategoryId.VERIFICATION]: '#1BB1D4',
-	[SubcategoryId.DOCUMENT_REVIEW]: '#48BD54',
-	[SubcategoryId.PAGE_FORMATTING]: '#7882FF',
-	[SubcategoryId.EXTRACTION]: '#1BB1D4',
-	[SubcategoryId.REMOVAL]: '#7882FF',
-	[SubcategoryId.AUTOMATION]: '#69DC95',
-	[SubcategoryId.GENERAL]: '#69DC95',
-	[SubcategoryId.ADVANCED_FORMATTING]: '#F55454',
-	[SubcategoryId.DEVELOPER_TOOLS]: '#F55454',
+  [SubcategoryId.SIGNING]: '#FF7892',
+  [SubcategoryId.DOCUMENT_SECURITY]: '#FF7892',
+  [SubcategoryId.VERIFICATION]: '#1BB1D4',
+  [SubcategoryId.DOCUMENT_REVIEW]: '#48BD54',
+  [SubcategoryId.PAGE_FORMATTING]: '#7882FF',
+  [SubcategoryId.EXTRACTION]: '#1BB1D4',
+  [SubcategoryId.REMOVAL]: '#7882FF',
+  [SubcategoryId.AUTOMATION]: '#69DC95',
+  [SubcategoryId.GENERAL]: '#69DC95',
+  [SubcategoryId.ADVANCED_FORMATTING]: '#F55454',
+  [SubcategoryId.DEVELOPER_TOOLS]: '#F55454',
 };
 
-export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || '#7882FF';
-
+export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);
 export const getSubcategoryLabel = (t: TFunction, id: SubcategoryId): string => t(`toolPicker.subcategories.${id}`, id);
+export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || '#7882FF';
 
 
 
 export const getAllEndpoints = (registry: ToolRegistry): string[] => {
-	const lists: string[][] = [];
-	Object.values(registry).forEach(entry => {
-		if (entry.endpoints && entry.endpoints.length > 0) {
-			lists.push(entry.endpoints);
-		}
-	});
-	return Array.from(new Set(lists.flat()));
+  const lists: string[][] = [];
+  Object.values(registry).forEach(entry => {
+    if (entry.endpoints && entry.endpoints.length > 0) {
+      lists.push(entry.endpoints);
+    }
+  });
+  return Array.from(new Set(lists.flat()));
 };
 
 export const getConversionEndpoints = (extensionToEndpoint: Record<string, Record<string, string>>): string[] => {
-	const endpoints = new Set<string>();
-	Object.values(extensionToEndpoint).forEach(toEndpoints => {
-		Object.values(toEndpoints).forEach(endpoint => {
-			endpoints.add(endpoint);
-		});
-	});
-	return Array.from(endpoints);
+  const endpoints = new Set<string>();
+  Object.values(extensionToEndpoint).forEach(toEndpoints => {
+    Object.values(toEndpoints).forEach(endpoint => {
+      endpoints.add(endpoint);
+    });
+  });
+  return Array.from(endpoints);
 };
 
 export const getAllApplicationEndpoints = (
-	registry: ToolRegistry,
-	extensionToEndpoint?: Record<string, Record<string, string>>
+  registry: ToolRegistry,
+  extensionToEndpoint?: Record<string, Record<string, string>>
 ): string[] => {
-	const toolEp = getAllEndpoints(registry);
-	const convEp = extensionToEndpoint ? getConversionEndpoints(extensionToEndpoint) : [];
-	return Array.from(new Set([...toolEp, ...convEp]));
+  const toolEp = getAllEndpoints(registry);
+  const convEp = extensionToEndpoint ? getConversionEndpoints(extensionToEndpoint) : [];
+  return Array.from(new Set([...toolEp, ...convEp]));
 };
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index f27fbd5c7..0426a7bf6 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import SplitPdfPanel from "../tools/Split";
 import CompressPdfPanel from "../tools/Compress";
@@ -8,7 +7,7 @@ import Sanitize from '../tools/Sanitize';
 import AddPassword from '../tools/AddPassword';
 import ChangePermissions from '../tools/ChangePermissions';
 import RemovePassword from '../tools/RemovePassword';
-import { SubcategoryId, ToolCategory, ToolRegistry } from './toolsTaxonomy';
+import { SubcategoryId, ToolCategoryId, ToolRegistry } from './toolsTaxonomy';
 import AddWatermark from '../tools/AddWatermark';
 import Repair from '../tools/Repair';
 import SingleLargePage from '../tools/SingleLargePage';
@@ -30,8 +29,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "sign",
         description: t("home.certSign.desc", "Signs a PDF with a Certificate/Key (PEM/P12)"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.SIGNING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.SIGNING
     },
     "sign": {
         icon: <span className="material-symbols-rounded">signature</span>,
@@ -39,8 +38,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "sign",
         description: t("home.sign.desc", "Adds signature to PDF by drawing, text or image"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.SIGNING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.SIGNING
     },
 
 
@@ -52,8 +51,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: AddPassword,
         view: "security",
         description: t("home.addPassword.desc", "Add password protection and restrictions to PDF files"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
         endpoints: ["add-password"]
     },
@@ -64,8 +63,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         view: "format",
         maxFiles: -1,
         description: t("home.watermark.desc", "Add a custom watermark to your PDF document."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         endpoints: ["add-watermark"]
     },
     "add-stamp": {
@@ -74,8 +73,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.AddStampRequest.desc", "Add text or add image stamps at set locations"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "sanitize": {
         icon: <span className="material-symbols-rounded">cleaning_services</span>,
@@ -83,8 +82,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: Sanitize,
         view: "security",
         maxFiles: -1,
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         description: t("home.sanitize.desc", "Remove potentially harmful elements from PDF files"),
         endpoints: ["sanitize-pdf"]
     },
@@ -94,8 +93,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.flatten.desc", "Remove all interactive elements and forms from a PDF"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "unlock-pdf-forms": {
         icon: <span className="material-symbols-rounded">preview_off</span>,
@@ -103,8 +102,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: UnlockPdfForms,
         view: "security",
         description: t("home.unlockPDFForms.desc", "Remove read-only property of form fields in a PDF document."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
         endpoints: ["unlock-pdf-forms"]
     },
@@ -114,8 +113,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "security",
         description: t("home.manageCertificates.desc", "Import, export, or delete digital certificate files used for signing PDFs."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "change-permissions": {
         icon: <span className="material-symbols-rounded">lock</span>,
@@ -123,8 +122,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: ChangePermissions,
         view: "security",
         description: t("home.changePermissions.desc", "Change document restrictions and permissions"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_SECURITY,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
         maxFiles: -1,
         endpoints: ["add-password"]
     },
@@ -136,8 +135,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "extract",
         description: t("home.getPdfInfo.desc", "Grabs any and all information possible on PDFs"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.VERIFICATION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.VERIFICATION
     },
     "validate-pdf-signature": {
         icon: <span className="material-symbols-rounded">verified</span>,
@@ -145,8 +144,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "security",
         description: t("home.validateSignature.desc", "Verify digital signatures and certificates in PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.VERIFICATION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.VERIFICATION
     },
 
 
@@ -158,8 +157,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "view",
         description: t("home.read.desc", "View and annotate PDFs. Highlight text, draw, or insert comments for review and collaboration."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_REVIEW
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_REVIEW
     },
     "change-metadata": {
         icon: <span className="material-symbols-rounded">assignment</span>,
@@ -167,8 +166,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.changeMetadata.desc", "Change/Remove/Add metadata from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.DOCUMENT_REVIEW
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.DOCUMENT_REVIEW
     },
     // Page Formatting
 
@@ -178,8 +177,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.crop.desc", "Crop a PDF to reduce its size (maintains text!)"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "rotate": {
         icon: <span className="material-symbols-rounded">rotate_right</span>,
@@ -187,8 +186,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.rotate.desc", "Easily rotate your PDFs."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "splitPdf": {
         icon: <span className="material-symbols-rounded">content_cut</span>,
@@ -196,8 +195,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: SplitPdfPanel,
         view: "split",
         description: t("home.split.desc", "Split PDFs into multiple documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "reorganize-pages": {
         icon: <span className="material-symbols-rounded">move_down</span>,
@@ -205,8 +204,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "pageEditor",
         description: t("home.reorganizePages.desc", "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "adjust-page-size-scale": {
         icon: <span className="material-symbols-rounded">crop_free</span>,
@@ -214,8 +213,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.scalePages.desc", "Change the size/scale of a page and/or its contents."),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "addPageNumbers": {
         icon: <span className="material-symbols-rounded">123</span>,
@@ -223,8 +222,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.addPageNumbers.desc", "Add Page numbers throughout a document in a set location"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "multi-page-layout": {
         icon: <span className="material-symbols-rounded">dashboard</span>,
@@ -232,8 +231,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.pageLayout.desc", "Merge multiple pages of a PDF document into a single page"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "single-large-page": {
         icon: <span className="material-symbols-rounded">looks_one</span>,
@@ -241,8 +240,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: SingleLargePage,
         view: "format",
         description: t("home.pdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING,
         maxFiles: -1,
         endpoints: ["pdf-to-single-page"]
     },
@@ -252,8 +251,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.attachments.desc", "Add or remove embedded files (attachments) to/from a PDF"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.PAGE_FORMATTING,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.PAGE_FORMATTING,
     },
 
 
@@ -265,8 +264,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "extract",
         description: t("home.extractPages.desc", "Extract specific pages from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.EXTRACTION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.EXTRACTION
     },
     "extract-images": {
         icon: <span className="material-symbols-rounded">filter</span>,
@@ -274,8 +273,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "extract",
         description: t("home.extractImages.desc", "Extract images from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.EXTRACTION
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.EXTRACTION
     },
 
 
@@ -287,8 +286,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "remove",
         description: t("home.removePages.desc", "Remove specific pages from a PDF document"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-blank-pages": {
         icon: <span className="material-symbols-rounded">scan_delete</span>,
@@ -296,8 +295,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "remove",
         description: t("home.removeBlanks.desc", "Remove blank pages from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-annotations": {
         icon: <span className="material-symbols-rounded">thread_unread</span>,
@@ -305,8 +304,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "remove",
         description: t("home.removeAnnotations.desc", "Remove annotations and comments from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-image": {
         icon: <span className="material-symbols-rounded">remove_selection</span>,
@@ -314,8 +313,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.removeImagePdf.desc", "Remove images from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-password": {
         icon: <span className="material-symbols-rounded">lock_open_right</span>,
@@ -323,8 +322,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: RemovePassword,
         view: "security",
         description: t("home.removePassword.desc", "Remove password protection from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL,
         endpoints: ["remove-password"],
         maxFiles: -1,
 
@@ -335,8 +334,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: RemoveCertificateSign,
         view: "security",
         description: t("home.removeCertSign.desc", "Remove digital signature from PDF documents"),
-        category: ToolCategory.STANDARD_TOOLS,
-        subcategory: SubcategoryId.REMOVAL,
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.REMOVAL,
         maxFiles: -1,
         endpoints: ["remove-certificate-sign"]
     },
@@ -350,8 +349,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.automate.desc", "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-rename-pdf-file": {
         icon: <span className="material-symbols-rounded">match_word</span>,
@@ -359,8 +358,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.auto-rename.desc", "Automatically rename PDF files based on their content"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-pages": {
         icon: <span className="material-symbols-rounded">split_scene_right</span>,
@@ -368,8 +367,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.autoSplitPDF.desc", "Automatically split PDF pages based on content detection"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-by-size-count": {
         icon: <span className="material-symbols-rounded">content_cut</span>,
@@ -377,8 +376,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.autoSizeSplitPDF.desc", "Automatically split PDFs by file size or page count"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.AUTOMATION
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.AUTOMATION
     },
 
 
@@ -390,8 +389,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.adjustContrast.desc", "Adjust colors and contrast of PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "repair": {
         icon: <span className="material-symbols-rounded">build</span>,
@@ -399,8 +398,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: Repair,
         view: "format",
         description: t("home.repair.desc", "Repair corrupted or damaged PDF files"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
         maxFiles: -1,
         endpoints: ["repair"]
     },
@@ -410,8 +409,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.ScannerImageSplit.desc", "Detect and split scanned photos into separate pages"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "overlay-pdfs": {
         icon: <span className="material-symbols-rounded">layers</span>,
@@ -419,8 +418,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.overlay-pdfs.desc", "Overlay one PDF on top of another"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "replace-and-invert-color": {
         icon: <span className="material-symbols-rounded">format_color_fill</span>,
@@ -428,8 +427,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.replaceColorPdf.desc", "Replace or invert colors in PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "add-image": {
         icon: <span className="material-symbols-rounded">image</span>,
@@ -437,8 +436,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.addImage.desc", "Add images to PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "edit-table-of-contents": {
         icon: <span className="material-symbols-rounded">bookmark_add</span>,
@@ -446,8 +445,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.editTableOfContents.desc", "Add or edit bookmarks and table of contents in PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "scanner-effect": {
         icon: <span className="material-symbols-rounded">scanner</span>,
@@ -455,8 +454,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.fakeScan.desc", "Create a PDF that looks like it was scanned"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.ADVANCED_FORMATTING
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
 
 
@@ -468,8 +467,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "extract",
         description: t("home.showJS.desc", "Extract and display JavaScript code from PDF documents"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS
     },
     "dev-api": {
         icon: <span className="material-symbols-rounded" style={{ color: '#2F7BF6' }}>open_in_new</span>,
@@ -477,8 +476,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "external",
         description: t("home.devApi.desc", "Link to API documentation"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html"
     },
     "dev-folder-scanning": {
@@ -487,8 +486,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "external",
         description: t("home.devFolderScanning.desc", "Link to automated folder scanning guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Folder%20Scanning/"
     },
     "dev-sso-guide": {
@@ -497,8 +496,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "external",
         description: t("home.devSsoGuide.desc", "Link to SSO guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Single%20Sign-On%20Configuration",
     },
     "dev-airgapped": {
@@ -507,8 +506,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "external",
         description: t("home.devAirgapped.desc", "Link to air-gapped setup guide"),
-        category: ToolCategory.ADVANCED_TOOLS,
-        subcategory: SubcategoryId.DEVELOPER_TOOLS,
+        categoryId: ToolCategoryId.ADVANCED_TOOLS,
+        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
         link: "https://docs.stirlingpdf.com/Pro/#activation"
     },
 
@@ -520,8 +519,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "format",
         description: t("home.compare.desc", "Compare two PDF documents and highlight differences"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL
     },
     "compress": {
         icon: <span className="material-symbols-rounded">zoom_in_map</span>,
@@ -529,8 +528,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: CompressPdfPanel,
         view: "compress",
         description: t("home.compress.desc", "Compress PDFs to reduce their file size."),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "convert": {
@@ -539,8 +538,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: ConvertPanel,
         view: "convert",
         description: t("home.convert.desc", "Convert files to and from PDF format"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1,
         endpoints: [
             "pdf-to-img",
@@ -583,8 +582,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "merge",
         description: t("home.merge.desc", "Merge multiple PDFs into a single document"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "multi-tool": {
@@ -593,8 +592,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "pageEditor",
         description: t("home.multiTool.desc", "Use multiple tools on a single PDF document"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "ocr": {
@@ -603,8 +602,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: OCRPanel,
         view: "convert",
         description: t("home.ocr.desc", "Extract text from scanned PDFs using Optical Character Recognition"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL,
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
         maxFiles: -1
     },
     "redact": {
@@ -613,8 +612,8 @@ export function useFlatToolRegistry(): ToolRegistry {
         component: null,
         view: "redact",
         description: t("home.redact.desc", "Permanently remove sensitive information from PDF documents"),
-        category: ToolCategory.RECOMMENDED_TOOLS,
-        subcategory: SubcategoryId.GENERAL
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL
     },
   };
 
diff --git a/frontend/src/hooks/useSuggestedTools.ts b/frontend/src/hooks/useSuggestedTools.ts
index ae6d77035..effbe2397 100644
--- a/frontend/src/hooks/useSuggestedTools.ts
+++ b/frontend/src/hooks/useSuggestedTools.ts
@@ -9,7 +9,7 @@ import CropIcon from '@mui/icons-material/Crop';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 
 export interface SuggestedTool {
-  name: string;
+  id: string /* FIX ME: Should be ToolId */;
   title: string;
   icon: React.ComponentType<any>;
   navigate: () => void;
@@ -17,27 +17,27 @@ export interface SuggestedTool {
 
 const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
   {
-    name: 'compress',
+    id: 'compress',
     title: 'Compress',
     icon: CompressIcon
   },
   {
-    name: 'convert',
+    id: 'convert',
     title: 'Convert',
     icon: SwapHorizIcon
   },
   {
-    name: 'sanitize',
+    id: 'sanitize',
     title: 'Sanitize',
     icon: CleaningServicesIcon
   },
   {
-    name: 'split',
+    id: 'split',
     title: 'Split',
     icon: CropIcon
   },
   {
-    name: 'ocr',
+    id: 'ocr',
     title: 'OCR',
     icon: TextFieldsIcon
   }
@@ -48,12 +48,12 @@ export function useSuggestedTools(): SuggestedTool[] {
 
   return useMemo(() => {
     // Filter out the current tool
-    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.name !== selectedToolKey);
-    
+    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.id !== selectedToolKey);
+
     // Add navigation function to each tool
     return filteredTools.map(tool => ({
       ...tool,
-      navigate: () => handleToolSelect(tool.name)
+      navigate: () => handleToolSelect(tool.id)
     }));
   }, [selectedToolKey, handleToolSelect]);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/hooks/useToolManagement.tsx b/frontend/src/hooks/useToolManagement.tsx
index e991677a9..a4c481fcc 100644
--- a/frontend/src/hooks/useToolManagement.tsx
+++ b/frontend/src/hooks/useToolManagement.tsx
@@ -17,7 +17,7 @@ interface ToolManagementResult {
 export const useToolManagement = (): ToolManagementResult => {
   const { t } = useTranslation();
 
-  const [selectedToolKey, setSelectedToolKey] = useState<string | null>(null);
+  const [selectedToolKey, setSelectedToolKey] = useState<string /* FIX ME: Should be ToolId */ | null>(null);
   const [toolSelectedFileIds, setToolSelectedFileIds] = useState<string[]>([]);
 
   // Build endpoints list from registry entries with fallback to legacy mapping
diff --git a/frontend/src/hooks/useToolSections.ts b/frontend/src/hooks/useToolSections.ts
index 4c1a0c05d..41762a8e1 100644
--- a/frontend/src/hooks/useToolSections.ts
+++ b/frontend/src/hooks/useToolSections.ts
@@ -1,65 +1,87 @@
 import { useMemo } from 'react';
 
-import { SUBCATEGORY_ORDER, ToolCategory, ToolRegistryEntry } from '../data/toolsTaxonomy';
+import { SUBCATEGORY_ORDER, SubcategoryId, ToolCategoryId, ToolRegistryEntry } from '../data/toolsTaxonomy';
 import { useTranslation } from 'react-i18next';
 
+type SubcategoryIdMap = {
+  [subcategoryId in SubcategoryId]: Array<{ id: string /* FIX ME: Should be ToolId */; tool: ToolRegistryEntry }>;
+}
+
 type GroupedTools = {
-  [category: string]: {
-    [subcategory: string]: Array<{ id: string; tool: ToolRegistryEntry }>;
-  };
+  [categoryId in ToolCategoryId]: SubcategoryIdMap;
 };
 
-export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
+export interface SubcategoryGroup {
+  subcategoryId: SubcategoryId;
+  tools: {
+    id: string /* FIX ME: Should be ToolId */;
+    tool: ToolRegistryEntry;
+  }[];
+};
+
+export type ToolSectionKey = 'quick' | 'all';
+
+export interface ToolSection {
+  key: ToolSectionKey;
+  title: string;
+  subcategories: SubcategoryGroup[];
+};
+
+export function useToolSections(filteredTools: [string /* FIX ME: Should be ToolId */, ToolRegistryEntry][]) {
   const { t } = useTranslation();
 
   const groupedTools = useMemo(() => {
-    const grouped: GroupedTools = {};
+    const grouped = {} as GroupedTools;
     filteredTools.forEach(([id, tool]) => {
-      const category = tool.category;
-      const subcategory = tool.subcategory;
-      if (!grouped[category]) grouped[category] = {};
-      if (!grouped[category][subcategory]) grouped[category][subcategory] = [];
-      grouped[category][subcategory].push({ id, tool });
+      const categoryId = tool.categoryId;
+      const subcategoryId = tool.subcategoryId;
+      if (!grouped[categoryId]) grouped[categoryId] = {} as SubcategoryIdMap;
+      if (!grouped[categoryId][subcategoryId]) grouped[categoryId][subcategoryId] = [];
+      grouped[categoryId][subcategoryId].push({ id, tool });
     });
     return grouped;
   }, [filteredTools]);
 
-  const sections = useMemo(() => {
-    const getOrderIndex = (name: string) => {
-      const idx = SUBCATEGORY_ORDER.indexOf(name as any);
+  const sections: ToolSection[] = useMemo(() => {
+    const getOrderIndex = (id: SubcategoryId) => {
+      const idx = SUBCATEGORY_ORDER.indexOf(id);
       return idx === -1 ? Number.MAX_SAFE_INTEGER : idx;
     };
 
-    const quick: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
-    const all: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
+    const quick = {} as SubcategoryIdMap;
+    const all = {} as SubcategoryIdMap;
 
-    Object.entries(groupedTools).forEach(([origCat, subs]) => {
-      const upperCat = origCat.toUpperCase();
+    Object.entries(groupedTools).forEach(([c, subs]) => {
+      const categoryId = c as ToolCategoryId;
 
-      Object.entries(subs).forEach(([sub, tools]) => {
-        if (!all[sub]) all[sub] = [];
-        all[sub].push(...tools);
+      Object.entries(subs).forEach(([s, tools]) => {
+        const subcategoryId = s as SubcategoryId;
+        if (!all[subcategoryId]) all[subcategoryId] = [];
+        all[subcategoryId].push(...tools);
       });
 
-      if (upperCat === ToolCategory.RECOMMENDED_TOOLS.toUpperCase()) {
-        Object.entries(subs).forEach(([sub, tools]) => {
-          if (!quick[sub]) quick[sub] = [];
-          quick[sub].push(...tools);
+      if (categoryId === ToolCategoryId.RECOMMENDED_TOOLS) {
+        Object.entries(subs).forEach(([s, tools]) => {
+          const subcategoryId = s as SubcategoryId;
+          if (!quick[subcategoryId]) quick[subcategoryId] = [];
+          quick[subcategoryId].push(...tools);
         });
       }
     });
 
-    const sortSubs = (obj: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>>) =>
+    const sortSubs = (obj: SubcategoryIdMap) =>
       Object.entries(obj)
         .sort(([a], [b]) => {
-          const ai = getOrderIndex(a);
-          const bi = getOrderIndex(b);
+          const aId = a as SubcategoryId;
+          const bId = b as SubcategoryId;
+          const ai = getOrderIndex(aId);
+          const bi = getOrderIndex(bId);
           if (ai !== bi) return ai - bi;
-          return a.localeCompare(b);
+          return aId.localeCompare(bId);
         })
-        .map(([subcategory, tools]) => ({ subcategory, tools }));
+        .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
 
-    const built = [
+    const built: ToolSection[] = [
       { key: 'quick', title: t('toolPicker.quickAccess', 'QUICK ACCESS'), subcategories: sortSubs(quick) },
       { key: 'all', title: t('toolPicker.allTools', 'ALL TOOLS'), subcategories: sortSubs(all) }
     ];
@@ -67,19 +89,20 @@ export function useToolSections(filteredTools: [string, ToolRegistryEntry][]) {
     return built.filter(section => section.subcategories.some(sc => sc.tools.length > 0));
   }, [groupedTools]);
 
-  const searchGroups = useMemo(() => {
-    const subMap: Record<string, Array<{ id: string; tool: ToolRegistryEntry }>> = {};
-    const seen = new Set<string>();
+  const searchGroups: SubcategoryGroup[] = useMemo(() => {
+    const subMap = {} as SubcategoryIdMap;
+    const seen = new Set<string /* FIX ME: Should be ToolId */>();
     filteredTools.forEach(([id, tool]) => {
-      if (seen.has(id)) return;
-      seen.add(id);
-      const sub = tool.subcategory;
+      const toolId = id as string /* FIX ME: Should be ToolId */;
+      if (seen.has(toolId)) return;
+      seen.add(toolId);
+      const sub = tool.subcategoryId;
       if (!subMap[sub]) subMap[sub] = [];
-      subMap[sub].push({ id, tool });
+      subMap[sub].push({ id: toolId, tool });
     });
     return Object.entries(subMap)
       .sort(([a], [b]) => a.localeCompare(b))
-      .map(([subcategory, tools]) => ({ subcategory, tools }));
+      .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
   }, [filteredTools]);
 
   return { sections, searchGroups };