validate fixes

cleanups
init
2025-10-15 10:49:42 +01:00 · 2025-10-14 23:27:47 +01:00 · 2025-10-14 23:11:38 +01:00 · 2025-10-14 18:48:13 +01:00 · 2025-10-14 18:38:17 +01:00 · 2025-10-14 17:57:58 +01:00
242 changed files with 26825 additions and 5481 deletions
@@ -192,6 +192,11 @@ return useToolOperation({
 - **Preview System**: Tool results can be previewed without polluting file context (Split tool example)
 - **Performance**: Web Worker thumbnails, IndexedDB persistence, background processing

+## Translation Rules
+
+- **CRITICAL**: Always update translations in `en-GB` only, never `en-US`
+- Translation files are located in `frontend/public/locales/`
+
 ## Important Notes

 - **Java Version**: Minimum JDK 17, supports and recommends JDK 21
@@ -0,0 +1,104 @@
+# Frontend TODO: Revocation Status Migration
+
+## Background
+The backend has removed the deprecated `notRevoked` boolean field in favor of `revocationStatus` string field.
+
+**revocationStatus values**:
+- `"not-checked"` - revocation checking was disabled
+- `"good"` - certificate was checked and is not revoked
+- `"revoked"` - certificate is revoked
+- `"soft-fail"` - revocation status couldn't be determined (network error, etc.)
+- `"unknown"` - other failure scenarios
+
+## Files That Need Changes
+
+### 1. `/frontend/src/hooks/tools/validateSignature/utils/signatureUtils.ts`
+
+Add mappings for new backend fields in `normalizeBackendResult()`:
+```typescript
+export const normalizeBackendResult = (
+  item: SignatureValidationBackendResult,
+  stirlingFile: StirlingFile,
+  index: number
+): SignatureValidationSignature => ({
+  id: `${stirlingFile.fileId}-${index}`,
+  valid: Boolean(item.valid),
+  chainValid: Boolean(item.chainValid),
+  trustValid: Boolean(item.trustValid),
+  chainValidationError: item.chainValidationError ?? null,  // ADD THIS
+  certPathLength: item.certPathLength ?? null,              // ADD THIS
+  notExpired: Boolean(item.notExpired),
+  revocationChecked: item.revocationChecked ?? null,        // ADD THIS
+  revocationStatus: item.revocationStatus ?? null,          // ADD THIS
+  validationTimeSource: item.validationTimeSource ?? null,  // ADD THIS
+  signerName: coerceString(item.signerName),
+  // ... rest of fields
+})
+```
+
+### 2. `/frontend/src/hooks/tools/validateSignature/utils/signatureStatus.ts`
+
+**Current code** (lines 42-43):
+```typescript
+// Use new revocationStatus field if available, fallback to notRevoked for backward compatibility
+const revStatus = signature.revocationStatus || (signature.notRevoked ? 'good' : 'unknown');
+```
+
+**Change to**:
+```typescript
+const revStatus = signature.revocationStatus || 'unknown';
+```
+
+### 3. `/frontend/src/hooks/tools/validateSignature/utils/signatureCsv.ts`
+
+**Current code** (lines 12, 42):
+```typescript
+'notRevoked',  // line 12 in CSV header
+booleanToString(signature.notRevoked),  // line 42 in data row
+```
+
+**Recommended change** - replace with detailed status:
+```typescript
+// Header:
+'revocationStatus',
+
+// Data:
+signature.revocationStatus || 'unknown',
+```
+
+### 4. `/frontend/src/hooks/tools/validateSignature/utils/reportStatus.ts`
+
+**Current code** (line 24):
+```typescript
+(sig) => sig.valid && sig.chainValid && sig.trustValid && sig.notExpired && sig.notRevoked
+```
+
+**Change to**:
+```typescript
+(sig) => sig.valid && sig.chainValid && sig.trustValid && sig.notExpired && sig.revocationStatus === 'good'
+```
+
+### 5. `/frontend/src/components/tools/validateSignature/ValidateSignatureResults.tsx`
+
+**Current code** (line 33):
+```typescript
+signature.notRevoked;
+```
+
+**Change to**:
+```typescript
+signature.revocationStatus === 'good'
+```
+
+## Migration Pattern
+
+**For boolean contexts** (if statements, filters):
+```typescript
+// Old: signature.notRevoked
+// New: signature.revocationStatus === 'good'
+```
+
+**For display/logging**:
+```typescript
+signature.revocationStatus  // "good" | "revoked" | "soft-fail" | "not-checked" | "unknown"
+```
@@ -115,46 +115,46 @@ Stirling-PDF currently supports 40 languages!

 | Language                                     | Progress                               |
 | -------------------------------------------- | -------------------------------------- |
-| Arabic (العربية) (ar_AR)                        | ![37%](https://geps.dev/progress/37)   |
-| Azerbaijani (Azərbaycan Dili) (az_AZ)        | ![37%](https://geps.dev/progress/37)   |
-| Basque (Euskara) (eu_ES)                     | ![21%](https://geps.dev/progress/21)   |
-| Bulgarian (Български) (bg_BG)                | ![40%](https://geps.dev/progress/40)   |
-| Catalan (Català) (ca_CA)                     | ![39%](https://geps.dev/progress/39)   |
-| Croatian (Hrvatski) (hr_HR)                  | ![36%](https://geps.dev/progress/36)   |
-| Czech (Česky) (cs_CZ)                        | ![39%](https://geps.dev/progress/39)   |
-| Danish (Dansk) (da_DK)                       | ![35%](https://geps.dev/progress/35)   |
-| Dutch (Nederlands) (nl_NL)                   | ![35%](https://geps.dev/progress/35)   |
+| Arabic (العربية) (ar_AR)                        | ![95%](https://geps.dev/progress/95)   |
+| Azerbaijani (Azərbaycan Dili) (az_AZ)        | ![35%](https://geps.dev/progress/35)   |
+| Basque (Euskara) (eu_ES)                     | ![20%](https://geps.dev/progress/20)   |
+| Bulgarian (Български) (bg_BG)                | ![39%](https://geps.dev/progress/39)   |
+| Catalan (Català) (ca_CA)                     | ![37%](https://geps.dev/progress/37)   |
+| Croatian (Hrvatski) (hr_HR)                  | ![34%](https://geps.dev/progress/34)   |
+| Czech (Česky) (cs_CZ)                        | ![38%](https://geps.dev/progress/38)   |
+| Danish (Dansk) (da_DK)                       | ![34%](https://geps.dev/progress/34)   |
+| Dutch (Nederlands) (nl_NL)                   | ![34%](https://geps.dev/progress/34)   |
 | English (English) (en_GB)                    | ![100%](https://geps.dev/progress/100) |
 | English (US) (en_US)                         | ![100%](https://geps.dev/progress/100) |
-| French (Français) (fr_FR)                    | ![42%](https://geps.dev/progress/42)   |
-| German (Deutsch) (de_DE)                     | ![98%](https://geps.dev/progress/98)   |
-| Greek (Ελληνικά) (el_GR)                     | ![39%](https://geps.dev/progress/39)   |
-| Hindi (हिंदी) (hi_IN)                          | ![40%](https://geps.dev/progress/40)   |
-| Hungarian (Magyar) (hu_HU)                   | ![43%](https://geps.dev/progress/43)   |
-| Indonesian (Bahasa Indonesia) (id_ID)        | ![36%](https://geps.dev/progress/36)   |
-| Irish (Gaeilge) (ga_IE)                      | ![40%](https://geps.dev/progress/40)   |
-| Italian (Italiano) (it_IT)                   | ![98%](https://geps.dev/progress/98)   |
-| Japanese (日本語) (ja_JP)                    | ![41%](https://geps.dev/progress/41)   |
-| Korean (한국어) (ko_KR)                      | ![40%](https://geps.dev/progress/40)   |
-| Norwegian (Norsk) (no_NB)                    | ![37%](https://geps.dev/progress/37)   |
-| Persian (فارسی) (fa_IR)                      | ![39%](https://geps.dev/progress/39)   |
-| Polish (Polski) (pl_PL)                      | ![41%](https://geps.dev/progress/41)   |
-| Portuguese (Português) (pt_PT)               | ![40%](https://geps.dev/progress/40)   |
-| Portuguese Brazilian (Português) (pt_BR)     | ![42%](https://geps.dev/progress/42)   |
-| Romanian (Română) (ro_RO)                    | ![33%](https://geps.dev/progress/33)   |
-| Russian (Русский) (ru_RU)                    | ![43%](https://geps.dev/progress/43)   |
-| Serbian Latin alphabet (Srpski) (sr_LATN_RS) | ![43%](https://geps.dev/progress/43)   |
-| Simplified Chinese (简体中文) (zh_CN)         | ![99%](https://geps.dev/progress/99)   |
-| Slovakian (Slovensky) (sk_SK)                | ![30%](https://geps.dev/progress/30)   |
-| Slovenian (Slovenščina) (sl_SI)              | ![41%](https://geps.dev/progress/41)   |
-| Spanish (Español) (es_ES)                    | ![98%](https://geps.dev/progress/98)   |
-| Swedish (Svenska) (sv_SE)                    | ![38%](https://geps.dev/progress/38)   |
-| Thai (ไทย) (th_TH)                           | ![35%](https://geps.dev/progress/35)   |
+| French (Français) (fr_FR)                    | ![93%](https://geps.dev/progress/93)   |
+| German (Deutsch) (de_DE)                     | ![95%](https://geps.dev/progress/95)   |
+| Greek (Ελληνικά) (el_GR)                     | ![38%](https://geps.dev/progress/38)   |
+| Hindi (हिंदी) (hi_IN)                          | ![38%](https://geps.dev/progress/38)   |
+| Hungarian (Magyar) (hu_HU)                   | ![42%](https://geps.dev/progress/42)   |
+| Indonesian (Bahasa Indonesia) (id_ID)        | ![34%](https://geps.dev/progress/34)   |
+| Irish (Gaeilge) (ga_IE)                      | ![38%](https://geps.dev/progress/38)   |
+| Italian (Italiano) (it_IT)                   | ![95%](https://geps.dev/progress/95)   |
+| Japanese (日本語) (ja_JP)                    | ![70%](https://geps.dev/progress/70)   |
+| Korean (한국어) (ko_KR)                      | ![38%](https://geps.dev/progress/38)   |
+| Norwegian (Norsk) (no_NB)                    | ![36%](https://geps.dev/progress/36)   |
+| Persian (فارسی) (fa_IR)                      | ![38%](https://geps.dev/progress/38)   |
+| Polish (Polski) (pl_PL)                      | ![40%](https://geps.dev/progress/40)   |
+| Portuguese (Português) (pt_PT)               | ![38%](https://geps.dev/progress/38)   |
+| Portuguese Brazilian (Português) (pt_BR)     | ![95%](https://geps.dev/progress/95)   |
+| Romanian (Română) (ro_RO)                    | ![32%](https://geps.dev/progress/32)   |
+| Russian (Русский) (ru_RU)                    | ![94%](https://geps.dev/progress/94)   |
+| Serbian Latin alphabet (Srpski) (sr_LATN_RS) | ![42%](https://geps.dev/progress/42)   |
+| Simplified Chinese (简体中文) (zh_CN)         | ![96%](https://geps.dev/progress/96)   |
+| Slovakian (Slovensky) (sk_SK)                | ![28%](https://geps.dev/progress/28)   |
+| Slovenian (Slovenščina) (sl_SI)              | ![40%](https://geps.dev/progress/40)   |
+| Spanish (Español) (es_ES)                    | ![95%](https://geps.dev/progress/95)   |
+| Swedish (Svenska) (sv_SE)                    | ![37%](https://geps.dev/progress/37)   |
+| Thai (ไทย) (th_TH)                           | ![34%](https://geps.dev/progress/34)   |
 | Tibetan (བོད་ཡིག་) (bo_CN)                     | ![65%](https://geps.dev/progress/65) |
-| Traditional Chinese (繁體中文) (zh_TW)        | ![43%](https://geps.dev/progress/43)   |
-| Turkish (Türkçe) (tr_TR)                     | ![43%](https://geps.dev/progress/43)   |
-| Ukrainian (Українська) (uk_UA)               | ![42%](https://geps.dev/progress/42)   |
-| Vietnamese (Tiếng Việt) (vi_VN)              | ![32%](https://geps.dev/progress/32)   |
+| Traditional Chinese (繁體中文) (zh_TW)        | ![42%](https://geps.dev/progress/42)   |
+| Turkish (Türkçe) (tr_TR)                     | ![41%](https://geps.dev/progress/41)   |
+| Ukrainian (Українська) (uk_UA)               | ![40%](https://geps.dev/progress/40)   |
+| Vietnamese (Tiếng Việt) (vi_VN)              | ![31%](https://geps.dev/progress/31)   |
 | Malayalam (മലയാളം) (ml_IN)              | ![73%](https://geps.dev/progress/73)   |

 ## Stirling PDF Enterprise
@@ -258,12 +258,6 @@ public class AppConfig {
        return false;
    }

-    @Bean(name = "GoogleDriveEnabled")
-    @Profile("default")
-    public boolean googleDriveEnabled() {
-        return false;
-    }
-
    @Bean(name = "license")
    @Profile("default")
    public String licenseType() {
@@ -120,6 +120,7 @@ public class ApplicationProperties {
        private String loginMethod = "all";
        private String customGlobalAPIKey;
        private Jwt jwt = new Jwt();
+        private Validation validation = new Validation();

        public Boolean isAltLogin() {
            return saml2.getEnabled() || oauth2.getEnabled();
@@ -308,6 +309,41 @@ public class ApplicationProperties {
            private int keyRetentionDays = 7;
            private boolean secureCookie;
        }
+
+        @Data
+        public static class Validation {
+            private Trust trust = new Trust();
+            private boolean allowAIA = false;
+            private Aatl aatl = new Aatl();
+            private Eutl eutl = new Eutl();
+            private Revocation revocation = new Revocation();
+
+            @Data
+            public static class Trust {
+                private boolean serverAsAnchor = true;
+                private boolean useSystemTrust = false;
+                private boolean useMozillaBundle = false;
+                private boolean useAATL = false;
+                private boolean useEUTL = false;
+            }
+
+            @Data
+            public static class Aatl {
+                private String url = "https://trustlist.adobe.com/tl.pdf";
+            }
+
+            @Data
+            public static class Eutl {
+                private String lotlUrl = "https://ec.europa.eu/tools/lotl/eu-lotl.xml";
+                private boolean acceptTransitional = false;
+            }
+
+            @Data
+            public static class Revocation {
+                private String mode = "none";
+                private boolean hardFail = false;
+            }
+        }
    }

    @Data
@@ -530,7 +566,6 @@ public class ApplicationProperties {
            private boolean ssoAutoLogin;
            private boolean database;
            private CustomMetadata customMetadata = new CustomMetadata();
-            private GoogleDrive googleDrive = new GoogleDrive();

            @Data
            public static class CustomMetadata {
@@ -549,26 +584,6 @@ public class ApplicationProperties {
                            : producer;
                }
            }
-
-            @Data
-            public static class GoogleDrive {
-                private boolean enabled;
-                private String clientId;
-                private String apiKey;
-                private String appId;
-
-                public String getClientId() {
-                    return clientId == null || clientId.trim().isEmpty() ? "" : clientId;
-                }
-
-                public String getApiKey() {
-                    return apiKey == null || apiKey.trim().isEmpty() ? "" : apiKey;
-                }
-
-                public String getAppId() {
-                    return appId == null || appId.trim().isEmpty() ? "" : appId;
-                }
-            }
        }

        @Data
@@ -109,22 +109,6 @@ class ApplicationPropertiesLogicTest {
        assertTrue(ex.getMessage().toLowerCase().contains("not supported"));
    }

-    @Test
-    void premium_google_drive_getters_return_empty_string_on_null_or_blank() {
-        Premium.ProFeatures.GoogleDrive gd = new Premium.ProFeatures.GoogleDrive();
-
-        assertEquals("", gd.getClientId());
-        assertEquals("", gd.getApiKey());
-        assertEquals("", gd.getAppId());
-
-        gd.setClientId(" id ");
-        gd.setApiKey(" key ");
-        gd.setAppId(" app ");
-        assertEquals(" id ", gd.getClientId());
-        assertEquals(" key ", gd.getApiKey());
-        assertEquals(" app ", gd.getAppId());
-    }
-
    @Test
    void ui_getters_return_null_for_blank() {
        ApplicationProperties.Ui ui = new ApplicationProperties.Ui();
@@ -98,11 +98,6 @@ public class ConfigController {
                if (applicationContext.containsBean("license")) {
                    configData.put("license", applicationContext.getBean("license", String.class));
                }
-                if (applicationContext.containsBean("GoogleDriveEnabled")) {
-                    configData.put(
-                            "GoogleDriveEnabled",
-                            applicationContext.getBean("GoogleDriveEnabled", Boolean.class));
-                }
                if (applicationContext.containsBean("SSOAutoLogin")) {
                    configData.put(
                            "SSOAutoLogin",
@@ -5,9 +5,11 @@ import java.io.ByteArrayInputStream;
 import java.io.IOException;
 import java.security.cert.CertificateException;
 import java.security.cert.CertificateFactory;
+import java.security.cert.PKIXCertPathBuilderResult;
 import java.security.cert.X509Certificate;
 import java.security.interfaces.RSAPublicKey;
 import java.util.ArrayList;
+import java.util.Collection;
 import java.util.Date;
 import java.util.List;

@@ -32,6 +34,7 @@ import org.springframework.web.multipart.MultipartFile;
 import io.swagger.v3.oas.annotations.Operation;

 import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;

 import stirling.software.SPDF.config.swagger.JsonDataResponse;
 import stirling.software.SPDF.model.api.security.SignatureValidationRequest;
@@ -42,6 +45,7 @@ import stirling.software.common.annotations.api.SecurityApi;
 import stirling.software.common.service.CustomPDFDocumentFactory;
 import stirling.software.common.util.ExceptionUtils;

+@Slf4j
@SecurityApi
@RequiredArgsConstructor
 public class ValidateSignatureController {
@@ -65,8 +69,9 @@ public class ValidateSignatureController {
    @Operation(
            summary = "Validate PDF Digital Signature",
            description =
-                    "Validates the digital signatures in a PDF file against default or custom"
-                            + " certificates. Input:PDF Output:JSON Type:SISO")
+                    "Validates the digital signatures in a PDF file using PKIX path building"
+                            + " and time-of-signing semantics. Supports custom trust anchors."
+                            + " Input:PDF Output:JSON Type:SISO")
    @AutoJobPostMapping(
            value = "/validate-signature",
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@@ -74,12 +79,12 @@ public class ValidateSignatureController {
            @ModelAttribute SignatureValidationRequest request) throws IOException {
        List<SignatureValidationResult> results = new ArrayList<>();
        MultipartFile file = request.getFileInput();
-        MultipartFile certFile = request.getCertFile();

        // Load custom certificate if provided
        X509Certificate customCert = null;
-        if (certFile != null && !certFile.isEmpty()) {
-            try (ByteArrayInputStream certStream = new ByteArrayInputStream(certFile.getBytes())) {
+        if (request.getCertFile() != null && !request.getCertFile().isEmpty()) {
+            try (ByteArrayInputStream certStream =
+                    new ByteArrayInputStream(request.getCertFile().getBytes())) {
                CertificateFactory cf = CertificateFactory.getInstance("X.509");
                customCert = (X509Certificate) cf.generateCertificate(certStream);
            } catch (CertificateException e) {
@@ -108,67 +113,150 @@ public class ValidateSignatureController {
                    Store<X509CertificateHolder> certStore = signedData.getCertificates();
                    SignerInformationStore signerStore = signedData.getSignerInfos();

-                    for (SignerInformation signer : signerStore.getSigners()) {
+                    for (SignerInformation signerInfo : signerStore.getSigners()) {
                        X509CertificateHolder certHolder =
                                (X509CertificateHolder)
-                                        certStore.getMatches(signer.getSID()).iterator().next();
-                        X509Certificate cert =
+                                        certStore.getMatches(signerInfo.getSID()).iterator().next();
+                        X509Certificate signerCert =
                                new JcaX509CertificateConverter().getCertificate(certHolder);

-                        boolean isValid =
-                                signer.verify(new JcaSimpleSignerInfoVerifierBuilder().build(cert));
-                        result.setValid(isValid);
+                        // Extract intermediate certificates from CMS
+                        Collection<X509Certificate> intermediates =
+                                certValidationService.extractIntermediateCertificates(
+                                        certStore, signerCert);

-                        // Additional validations
-                        result.setChainValid(
-                                customCert != null
-                                        ? certValidationService
-                                                .validateCertificateChainWithCustomCert(
-                                                        cert, customCert)
-                                        : certValidationService.validateCertificateChain(cert));
+                        // Log what we found
+                        log.debug(
+                                "Found {} intermediate certificates in CMS signature",
+                                intermediates.size());
+                        for (X509Certificate inter : intermediates) {
+                            log.debug(
+                                    "  → Intermediate: {}",
+                                    inter.getSubjectX500Principal().getName());
+                            log.debug(
+                                    "    Issuer DN: {}", inter.getIssuerX500Principal().getName());
+                        }

-                        result.setTrustValid(
-                                customCert != null
-                                        ? certValidationService.validateTrustWithCustomCert(
-                                                cert, customCert)
-                                        : certValidationService.validateTrustStore(cert));
+                        // Determine validation time (TSA timestamp or signingTime, or current)
+                        CertificateValidationService.ValidationTime validationTimeResult =
+                                certValidationService.extractValidationTime(signerInfo);
+                        Date validationTime;
+                        if (validationTimeResult == null) {
+                            validationTime = new Date();
+                            result.setValidationTimeSource("current");
+                        } else {
+                            validationTime = validationTimeResult.date;
+                            result.setValidationTimeSource(validationTimeResult.source);
+                        }

-                        result.setNotRevoked(!certValidationService.isRevoked(cert));
-                        result.setNotExpired(!cert.getNotAfter().before(new Date()));
+                        // Verify cryptographic signature
+                        boolean cmsValid =
+                                signerInfo.verify(
+                                        new JcaSimpleSignerInfoVerifierBuilder().build(signerCert));
+                        result.setValid(cmsValid);
+
+                        // Build and validate certificate path
+                        boolean chainValid = false;
+                        boolean trustValid = false;
+                        try {
+                            PKIXCertPathBuilderResult pathResult =
+                                    certValidationService.buildAndValidatePath(
+                                            signerCert, intermediates, customCert, validationTime);
+                            chainValid = true;
+                            trustValid = true; // Path ends at trust anchor
+                            result.setCertPathLength(
+                                    pathResult.getCertPath().getCertificates().size());
+                        } catch (Exception e) {
+                            String errorMsg = e.getMessage();
+                            result.setChainValidationError(errorMsg);
+                            chainValid = false;
+                            trustValid = false;
+                            // Log the full error for debugging
+                            log.warn(
+                                    "Certificate path validation failed for {}: {}",
+                                    signerCert.getSubjectX500Principal().getName(),
+                                    errorMsg);
+                            log.debug("Full stack trace:", e);
+                        }
+                        result.setChainValid(chainValid);
+                        result.setTrustValid(trustValid);
+
+                        // Check validity at validation time
+                        boolean outside =
+                                certValidationService.isOutsideValidityPeriod(
+                                        signerCert, validationTime);
+                        result.setNotExpired(!outside);
+
+                        // Revocation status determination
+                        boolean revocationEnabled = certValidationService.isRevocationEnabled();
+                        result.setRevocationChecked(revocationEnabled);
+
+                        if (!revocationEnabled) {
+                            result.setRevocationStatus("not-checked");
+                        } else if (chainValid && trustValid) {
+                            // Path building succeeded with revocation enabled = no revocation found
+                            result.setRevocationStatus("good");
+                        } else if (result.getChainValidationError() != null
+                                && result.getChainValidationError()
+                                        .toLowerCase()
+                                        .contains("revocation")) {
+                            // Check if failure was revocation-related
+                            if (result.getChainValidationError()
+                                    .toLowerCase()
+                                    .contains("unable to check")) {
+                                result.setRevocationStatus("soft-fail");
+                            } else {
+                                result.setRevocationStatus("revoked");
+                            }
+                        } else {
+                            result.setRevocationStatus("unknown");
+                        }

                        // Set basic signature info
                        result.setSignerName(sig.getName());
-                        result.setSignatureDate(sig.getSignDate().getTime().toString());
+                        result.setSignatureDate(
+                                sig.getSignDate() != null
+                                        ? sig.getSignDate().getTime().toString()
+                                        : null);
                        result.setReason(sig.getReason());
                        result.setLocation(sig.getLocation());

-                        // Set new certificate details
-                        result.setIssuerDN(cert.getIssuerX500Principal().getName());
-                        result.setSubjectDN(cert.getSubjectX500Principal().getName());
-                        result.setSerialNumber(cert.getSerialNumber().toString(16)); // Hex format
-                        result.setValidFrom(cert.getNotBefore().toString());
-                        result.setValidUntil(cert.getNotAfter().toString());
-                        result.setSignatureAlgorithm(cert.getSigAlgName());
+                        // Set certificate details (from signer cert)
+                        result.setIssuerDN(signerCert.getIssuerX500Principal().getName());
+                        result.setSubjectDN(signerCert.getSubjectX500Principal().getName());
+                        result.setSerialNumber(
+                                signerCert.getSerialNumber().toString(16)); // Hex format
+                        result.setValidFrom(signerCert.getNotBefore().toString());
+                        result.setValidUntil(signerCert.getNotAfter().toString());
+                        result.setSignatureAlgorithm(signerCert.getSigAlgName());

                        // Get key size (if possible)
                        try {
                            result.setKeySize(
-                                    ((RSAPublicKey) cert.getPublicKey()).getModulus().bitLength());
+                                    ((RSAPublicKey) signerCert.getPublicKey())
+                                            .getModulus()
+                                            .bitLength());
                        } catch (Exception e) {
                            // If not RSA or error, set to 0
                            result.setKeySize(0);
                        }

-                        result.setVersion(String.valueOf(cert.getVersion()));
+                        result.setVersion(String.valueOf(signerCert.getVersion()));

                        // Set key usage
                        List<String> keyUsages = new ArrayList<>();
-                        boolean[] keyUsageFlags = cert.getKeyUsage();
+                        boolean[] keyUsageFlags = signerCert.getKeyUsage();
                        if (keyUsageFlags != null) {
                            String[] keyUsageLabels = {
-                                "Digital Signature", "Non-Repudiation", "Key Encipherment",
-                                "Data Encipherment", "Key Agreement", "Certificate Signing",
-                                "CRL Signing", "Encipher Only", "Decipher Only"
+                                "Digital Signature",
+                                "Non-Repudiation",
+                                "Key Encipherment",
+                                "Data Encipherment",
+                                "Key Agreement",
+                                "Certificate Signing",
+                                "CRL Signing",
+                                "Encipher Only",
+                                "Decipher Only"
                            };
                            for (int i = 0; i < keyUsageFlags.length; i++) {
                                if (keyUsageFlags[i]) {
@@ -178,10 +266,8 @@ public class ValidateSignatureController {
                        }
                        result.setKeyUsages(keyUsages);

-                        // Check if self-signed
-                        result.setSelfSigned(
-                                cert.getSubjectX500Principal()
-                                        .equals(cert.getIssuerX500Principal()));
+                        // Check if self-signed (properly)
+                        result.setSelfSigned(certValidationService.isSelfSigned(signerCert));
                    }
                } catch (Exception e) {
                    result.setValid(false);
@@ -6,17 +6,32 @@ import lombok.Data;

@Data
 public class SignatureValidationResult {
+    // Cryptographic signature validation
    private boolean valid;
+
+    // Certificate chain validation
+    private boolean chainValid;
+    private boolean trustValid;
+    private String chainValidationError;
+    private int certPathLength;
+
+    // Time validation
+    private boolean notExpired;
+
+    // Revocation validation
+    private boolean revocationChecked; // true if PKIX revocation was enabled
+    private String revocationStatus; // "not-checked" | "good" | "revoked" | "soft-fail" | "unknown"
+
+    private String validationTimeSource; // "current", "signing-time", or "timestamp"
+
+    // Signature metadata
    private String signerName;
    private String signatureDate;
    private String reason;
    private String location;
    private String errorMessage;
-    private boolean chainValid;
-    private boolean trustValid;
-    private boolean notExpired;
-    private boolean notRevoked;

+    // Certificate details
    private String issuerDN; // Certificate issuer's Distinguished Name
    private String subjectDN; // Certificate subject's Distinguished Name
    private String serialNumber; // Certificate serial number
@@ -1,143 +1,863 @@
 package stirling.software.SPDF.service;

 import java.io.*;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.security.GeneralSecurityException;
 import java.security.KeyStore;
-import java.security.KeyStoreException;
+import java.security.MessageDigest;
 import java.security.cert.*;
 import java.util.*;

-import org.springframework.stereotype.Service;
+import javax.net.ssl.TrustManager;
+import javax.net.ssl.TrustManagerFactory;
+import javax.net.ssl.X509TrustManager;
+import javax.xml.parsers.DocumentBuilder;
+import javax.xml.parsers.DocumentBuilderFactory;

-import io.github.pixee.security.BoundedLineReader;
+import org.apache.pdfbox.Loader;
+import org.apache.pdfbox.pdmodel.PDDocument;
+import org.apache.pdfbox.pdmodel.PDDocumentNameDictionary;
+import org.apache.pdfbox.pdmodel.PDEmbeddedFilesNameTreeNode;
+import org.apache.pdfbox.pdmodel.common.filespecification.PDComplexFileSpecification;
+import org.apache.pdfbox.pdmodel.common.filespecification.PDEmbeddedFile;
+import org.bouncycastle.asn1.ASN1Encodable;
+import org.bouncycastle.asn1.ASN1GeneralizedTime;
+import org.bouncycastle.asn1.ASN1ObjectIdentifier;
+import org.bouncycastle.asn1.ASN1UTCTime;
+import org.bouncycastle.asn1.cms.CMSAttributes;
+import org.bouncycastle.cert.X509CertificateHolder;
+import org.bouncycastle.cert.jcajce.JcaX509CertificateConverter;
+import org.bouncycastle.cms.CMSSignedData;
+import org.bouncycastle.cms.SignerInformation;
+import org.bouncycastle.jce.provider.BouncyCastleProvider;
+import org.bouncycastle.tsp.TimeStampToken;
+import org.bouncycastle.util.Store;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.w3c.dom.Document;
+import org.w3c.dom.NodeList;

 import jakarta.annotation.PostConstruct;

+import lombok.extern.slf4j.Slf4j;
+
+import stirling.software.common.model.ApplicationProperties;
+import stirling.software.common.service.ServerCertificateServiceInterface;
+
@Service
+@Slf4j
 public class CertificateValidationService {
-    private KeyStore trustStore;
+    /**
+     * Result container for validation time extraction Contains both the date and the source of the
+     * time
+     */
+    public static class ValidationTime {
+        public final Date date;
+        public final String source; // "timestamp" | "signing-time" | "current"
+
+        public ValidationTime(Date date, String source) {
+            this.date = date;
+            this.source = source;
+        }
+    }
+
+    // Separate trust stores: signing vs TLS
+    private KeyStore signingTrustAnchors; // AATL/EUTL + server cert for PDF signing
+    private final ServerCertificateServiceInterface serverCertificateService;
+    private final ApplicationProperties applicationProperties;
+
+    // EUTL (EU Trusted List) constants
+    private static final String NS_TSL = "http://uri.etsi.org/02231/v2#";
+
+    // Qualified CA service types to import as trust anchors (per ETSI TS 119 612)
+    private static final Set<String> EUTL_SERVICE_TYPES =
+            new HashSet<>(
+                    Arrays.asList(
+                            "http://uri.etsi.org/TrstSvc/Svctype/CA/QC",
+                            "http://uri.etsi.org/TrstSvc/Svctype/NationalRootCA-QC"));
+
+    // Active statuses to accept (per ETSI TS 119 612)
+    private static final String STATUS_UNDER_SUPERVISION =
+            "http://uri.etsi.org/TrstSvc/TrustedList/Svcstatus/undersupervision";
+    private static final String STATUS_ACCREDITED =
+            "http://uri.etsi.org/TrstSvc/TrustedList/Svcstatus/accredited";
+    private static final String STATUS_SUPERVISION_IN_CESSATION =
+            "http://uri.etsi.org/TrstSvc/TrustedList/Svcstatus/supervisionincessation";
+
+    static {
+        if (java.security.Security.getProvider("BC") == null) {
+            java.security.Security.addProvider(new BouncyCastleProvider());
+        }
+    }
+
+    public CertificateValidationService(
+            @Autowired(required = false) ServerCertificateServiceInterface serverCertificateService,
+            ApplicationProperties applicationProperties) {
+        this.serverCertificateService = serverCertificateService;
+        this.applicationProperties = applicationProperties;
+    }

    @PostConstruct
    private void initializeTrustStore() throws Exception {
-        trustStore = KeyStore.getInstance(KeyStore.getDefaultType());
-        trustStore.load(null, null);
-        loadMozillaCertificates();
+        signingTrustAnchors = KeyStore.getInstance(KeyStore.getDefaultType());
+        signingTrustAnchors.load(null, null);
+
+        ApplicationProperties.Security.Validation validation =
+                applicationProperties.getSecurity().getValidation();
+
+        // Enable JDK fetching of OCSP/CRLDP if allowed
+        if (validation.isAllowAIA()) {
+            java.security.Security.setProperty("ocsp.enable", "true");
+            System.setProperty("com.sun.security.enableCRLDP", "true");
+            System.setProperty("com.sun.security.enableAIAcaIssuers", "true");
+            log.info("Enabled AIA certificate fetching and revocation checking");
+        }
+
+        // Trust only what we explicitly opt into:
+        if (validation.getTrust().isServerAsAnchor()) loadServerCertAsAnchor();
+        if (validation.getTrust().isUseSystemTrust()) loadJavaSystemTrustStore();
+        if (validation.getTrust().isUseMozillaBundle()) loadBundledMozillaCACerts();
+        if (validation.getTrust().isUseAATL()) loadAATLCertificates();
+        if (validation.getTrust().isUseEUTL()) loadEUTLCertificates();
    }

-    private void loadMozillaCertificates() throws Exception {
-        try (InputStream is = getClass().getResourceAsStream("/certdata.txt")) {
-            BufferedReader reader = new BufferedReader(new InputStreamReader(is));
-            String line;
-            StringBuilder certData = new StringBuilder();
-            boolean inCert = false;
-            int certCount = 0;
+    /**
+     * Core entry-point: build a valid PKIX path from signerCert using provided intermediates
+     *
+     * @param signerCert The signer certificate
+     * @param intermediates Collection of intermediate certificates from CMS
+     * @param customTrustAnchor Optional custom root/intermediate certificate
+     * @param validationTime Time to validate at (signing time or current)
+     * @return PKIXCertPathBuilderResult containing validated path
+     * @throws GeneralSecurityException if path building/validation fails
+     */
+    public PKIXCertPathBuilderResult buildAndValidatePath(
+            X509Certificate signerCert,
+            Collection<X509Certificate> intermediates,
+            X509Certificate customTrustAnchor,
+            Date validationTime)
+            throws GeneralSecurityException {

-            while ((line = BoundedLineReader.readLine(reader, 5_000_000)) != null) {
-                if (line.startsWith("CKA_VALUE MULTILINE_OCTAL")) {
-                    inCert = true;
-                    certData = new StringBuilder();
-                    continue;
+        // Build trust anchors
+        Set<TrustAnchor> anchors = new HashSet<>();
+        if (customTrustAnchor != null) {
+            anchors.add(new TrustAnchor(customTrustAnchor, null));
+        } else {
+            Enumeration<String> aliases = signingTrustAnchors.aliases();
+            while (aliases.hasMoreElements()) {
+                Certificate c = signingTrustAnchors.getCertificate(aliases.nextElement());
+                if (c instanceof X509Certificate x) {
+                    anchors.add(new TrustAnchor(x, null));
                }
-                if (inCert) {
-                    if ("END".equals(line)) {
-                        inCert = false;
-                        byte[] certBytes = parseOctalData(certData.toString());
-                        if (certBytes != null) {
-                            CertificateFactory cf = CertificateFactory.getInstance("X.509");
-                            X509Certificate cert =
-                                    (X509Certificate)
-                                            cf.generateCertificate(
-                                                    new ByteArrayInputStream(certBytes));
-                            trustStore.setCertificateEntry("mozilla-cert-" + certCount++, cert);
-                        }
-                    } else {
-                        certData.append(line).append("\n");
+            }
+        }
+        if (anchors.isEmpty()) {
+            throw new CertPathBuilderException("No trust anchors available");
+        }
+
+        // Target certificate selector
+        X509CertSelector target = new X509CertSelector();
+        target.setCertificate(signerCert);
+
+        // Intermediate certificate store
+        List<Certificate> allCerts = new ArrayList<>(intermediates);
+        CertStore intermediateStore =
+                CertStore.getInstance("Collection", new CollectionCertStoreParameters(allCerts));
+
+        // PKIX parameters
+        PKIXBuilderParameters params = new PKIXBuilderParameters(anchors, target);
+        params.addCertStore(intermediateStore);
+        String revocationMode =
+                applicationProperties.getSecurity().getValidation().getRevocation().getMode();
+        params.setRevocationEnabled(!"none".equalsIgnoreCase(revocationMode));
+        if (validationTime != null) {
+            params.setDate(validationTime);
+        }
+
+        // Revocation checking
+        if (!"none".equalsIgnoreCase(revocationMode)) {
+            try {
+                PKIXRevocationChecker rc =
+                        (PKIXRevocationChecker)
+                                CertPathValidator.getInstance("PKIX").getRevocationChecker();
+
+                Set<PKIXRevocationChecker.Option> options =
+                        EnumSet.noneOf(PKIXRevocationChecker.Option.class);
+
+                // Soft-fail: allow validation to succeed if revocation status unavailable
+                boolean revocationHardFail =
+                        applicationProperties
+                                .getSecurity()
+                                .getValidation()
+                                .getRevocation()
+                                .isHardFail();
+                if (!revocationHardFail) {
+                    options.add(PKIXRevocationChecker.Option.SOFT_FAIL);
+                }
+
+                // Revocation mode configuration
+                if ("ocsp".equalsIgnoreCase(revocationMode)) {
+                    // OCSP-only: prefer OCSP (default), disable fallback to CRL
+                    options.add(PKIXRevocationChecker.Option.NO_FALLBACK);
+                } else if ("crl".equalsIgnoreCase(revocationMode)) {
+                    // CRL-only: prefer CRLs, disable fallback to OCSP
+                    options.add(PKIXRevocationChecker.Option.PREFER_CRLS);
+                    options.add(PKIXRevocationChecker.Option.NO_FALLBACK);
+                }
+                // "ocsp+crl" or other: use defaults (try OCSP first, fallback to CRL)
+
+                rc.setOptions(options);
+                params.addCertPathChecker(rc);
+            } catch (Exception e) {
+                log.warn("Failed to configure revocation checker: {}", e.getMessage());
+            }
+        }
+
+        // Build path
+        CertPathBuilder builder = CertPathBuilder.getInstance("PKIX");
+        return (PKIXCertPathBuilderResult) builder.build(params);
+    }
+
+    /**
+     * Extract validation time from signature (TSA timestamp or signingTime)
+     *
+     * @param signerInfo The CMS signer information
+     * @return ValidationTime containing date and source, or null if not found
+     */
+    public ValidationTime extractValidationTime(SignerInformation signerInfo) {
+        try {
+            // 1) Check for timestamp token (RFC 3161) - highest priority
+            var unsignedAttrs = signerInfo.getUnsignedAttributes();
+            if (unsignedAttrs != null) {
+                var attr =
+                        unsignedAttrs.get(new ASN1ObjectIdentifier("1.2.840.113549.1.9.16.2.14"));
+                if (attr != null) {
+                    try {
+                        TimeStampToken tst =
+                                new TimeStampToken(
+                                        new CMSSignedData(
+                                                attr.getAttributeValues()[0]
+                                                        .toASN1Primitive()
+                                                        .getEncoded()));
+                        Date tstTime = tst.getTimeStampInfo().getGenTime();
+                        log.debug("Using timestamp token time: {}", tstTime);
+                        return new ValidationTime(tstTime, "timestamp");
+                    } catch (Exception e) {
+                        log.debug("Failed to parse timestamp token: {}", e.getMessage());
                    }
                }
            }
-        }
-    }

-    private byte[] parseOctalData(String data) {
-        try {
-            ByteArrayOutputStream baos = new ByteArrayOutputStream();
-            String[] tokens = data.split("\\\\");
-            for (String token : tokens) {
-                token = token.trim();
-                if (!token.isEmpty()) {
-                    baos.write(Integer.parseInt(token, 8));
+            // 2) Check for signingTime attribute - fallback
+            var signedAttrs = signerInfo.getSignedAttributes();
+            if (signedAttrs != null) {
+                var st = signedAttrs.get(CMSAttributes.signingTime);
+                if (st != null) {
+                    ASN1Encodable val = st.getAttributeValues()[0];
+                    Date signingTime = null;
+                    if (val instanceof ASN1UTCTime ut) {
+                        signingTime = ut.getDate();
+                    } else if (val instanceof ASN1GeneralizedTime gt) {
+                        signingTime = gt.getDate();
+                    }
+                    if (signingTime != null) {
+                        log.debug("Using signingTime attribute: {}", signingTime);
+                        return new ValidationTime(signingTime, "signing-time");
+                    }
                }
            }
-            return baos.toByteArray();
        } catch (Exception e) {
-            return null;
+            log.debug("Error extracting validation time: {}", e.getMessage());
        }
+        return null;
    }

-    public boolean validateCertificateChain(X509Certificate cert) {
+    /**
+     * Check if certificate is outside validity period at given time
+     *
+     * @param cert Certificate to check
+     * @param at Time to check validity
+     * @return true if certificate is expired or not yet valid
+     */
+    public boolean isOutsideValidityPeriod(X509Certificate cert, Date at) {
        try {
-            CertPathValidator validator = CertPathValidator.getInstance("PKIX");
-            CertificateFactory cf = CertificateFactory.getInstance("X.509");
-            List<X509Certificate> certList = Arrays.asList(cert);
-            CertPath certPath = cf.generateCertPath(certList);
-
-            Set<TrustAnchor> anchors = new HashSet<>();
-            Enumeration<String> aliases = trustStore.aliases();
-            while (aliases.hasMoreElements()) {
-                Object trustCert = trustStore.getCertificate(aliases.nextElement());
-                if (trustCert instanceof X509Certificate x509Cert) {
-                    anchors.add(new TrustAnchor(x509Cert, null));
-                }
-            }
-
-            PKIXParameters params = new PKIXParameters(anchors);
-            params.setRevocationEnabled(false);
-            validator.validate(certPath, params);
-            return true;
-        } catch (Exception e) {
-            return false;
-        }
-    }
-
-    public boolean validateTrustStore(X509Certificate cert) {
-        try {
-            Enumeration<String> aliases = trustStore.aliases();
-            while (aliases.hasMoreElements()) {
-                Object trustCert = trustStore.getCertificate(aliases.nextElement());
-                if (trustCert instanceof X509Certificate && cert.equals(trustCert)) {
-                    return true;
-                }
-            }
-            return false;
-        } catch (KeyStoreException e) {
-            return false;
-        }
-    }
-
-    public boolean isRevoked(X509Certificate cert) {
-        try {
-            cert.checkValidity();
+            cert.checkValidity(at);
            return false;
        } catch (CertificateExpiredException | CertificateNotYetValidException e) {
            return true;
        }
    }

-    public boolean validateCertificateChainWithCustomCert(
-            X509Certificate cert, X509Certificate customCert) {
+    /**
+     * Check if revocation checking is enabled
+     *
+     * @return true if revocation mode is not "none"
+     */
+    public boolean isRevocationEnabled() {
+        String revocationMode =
+                applicationProperties.getSecurity().getValidation().getRevocation().getMode();
+        return !"none".equalsIgnoreCase(revocationMode);
+    }
+
+    /**
+     * Check if certificate is a CA certificate
+     *
+     * @param cert Certificate to check
+     * @return true if certificate has basicConstraints with CA=true
+     */
+    public boolean isCA(X509Certificate cert) {
+        return cert.getBasicConstraints() >= 0;
+    }
+
+    /**
+     * Verify if certificate is self-signed by checking signature
+     *
+     * @param cert Certificate to check
+     * @return true if certificate is self-signed and signature is valid
+     */
+    public boolean isSelfSigned(X509Certificate cert) {
        try {
-            cert.verify(customCert.getPublicKey());
+            if (!cert.getSubjectX500Principal().equals(cert.getIssuerX500Principal())) {
+                return false;
+            }
+            cert.verify(cert.getPublicKey());
            return true;
        } catch (Exception e) {
            return false;
        }
    }

-    public boolean validateTrustWithCustomCert(X509Certificate cert, X509Certificate customCert) {
+    /**
+     * Calculate SHA-256 fingerprint of certificate
+     *
+     * @param cert Certificate
+     * @return Hex string of SHA-256 hash
+     */
+    public String sha256Fingerprint(X509Certificate cert) {
        try {
-            // Compare the issuer of the signature certificate with the custom certificate
-            return cert.getIssuerX500Principal().equals(customCert.getSubjectX500Principal());
+            MessageDigest md = MessageDigest.getInstance("SHA-256");
+            byte[] hash = md.digest(cert.getEncoded());
+            return bytesToHex(hash);
        } catch (Exception e) {
-            return false;
+            return "";
        }
    }
+
+    private String bytesToHex(byte[] bytes) {
+        StringBuilder sb = new StringBuilder(bytes.length * 2);
+        for (byte b : bytes) {
+            sb.append(String.format("%02X", b));
+        }
+        return sb.toString();
+    }
+
+    /**
+     * Extract all certificates from CMS signature store
+     *
+     * @param certStore BouncyCastle certificate store
+     * @param signerCert The signer certificate
+     * @return Collection of all certificates except signer
+     */
+    public Collection<X509Certificate> extractIntermediateCertificates(
+            Store<X509CertificateHolder> certStore, X509Certificate signerCert) {
+        List<X509Certificate> intermediates = new ArrayList<>();
+        try {
+            JcaX509CertificateConverter converter = new JcaX509CertificateConverter();
+            Collection<X509CertificateHolder> holders = certStore.getMatches(null);
+
+            for (X509CertificateHolder holder : holders) {
+                X509Certificate cert = converter.getCertificate(holder);
+                if (!cert.equals(signerCert)) {
+                    intermediates.add(cert);
+                }
+            }
+        } catch (Exception e) {
+            log.debug("Error extracting intermediate certificates: {}", e.getMessage());
+        }
+        return intermediates;
+    }
+
+    // ==================== Trust Store Loading ====================
+
+    /**
+     * Load certificates from Java's system trust store (cacerts). On Windows, this includes
+     * certificates from the Windows trust store. This provides maximum compatibility with what
+     * browsers and OS trust.
+     */
+    private void loadJavaSystemTrustStore() {
+        try {
+            log.info("Loading certificates from Java system trust store");
+
+            // Get default trust manager factory
+            TrustManagerFactory tmf =
+                    TrustManagerFactory.getInstance(TrustManagerFactory.getDefaultAlgorithm());
+            tmf.init((KeyStore) null); // null = use system default
+
+            // Extract certificates from trust managers
+            int loadedCount = 0;
+            for (TrustManager tm : tmf.getTrustManagers()) {
+                if (tm instanceof X509TrustManager x509tm) {
+                    for (X509Certificate cert : x509tm.getAcceptedIssuers()) {
+                        if (isCA(cert)) {
+                            String fingerprint = sha256Fingerprint(cert);
+                            String alias = "system-" + fingerprint;
+                            signingTrustAnchors.setCertificateEntry(alias, cert);
+                            loadedCount++;
+                        }
+                    }
+                }
+            }
+
+            log.info("Loaded {} CA certificates from Java system trust store", loadedCount);
+        } catch (Exception e) {
+            log.error("Failed to load Java system trust store: {}", e.getMessage(), e);
+        }
+    }
+
+    /**
+     * Load bundled Mozilla CA certificate bundle from resources. This bundle contains ~140 trusted
+     * root CAs from Mozilla's CA Certificate Program, suitable for validating most commercial PDF
+     * signatures.
+     */
+    private void loadBundledMozillaCACerts() {
+        try {
+            log.info("Loading bundled Mozilla CA certificates from resources");
+            InputStream certStream =
+                    getClass().getClassLoader().getResourceAsStream("certs/cacert.pem");
+            if (certStream == null) {
+                log.warn("Bundled Mozilla CA certificate file not found in resources");
+                return;
+            }
+
+            CertificateFactory cf = CertificateFactory.getInstance("X.509");
+            Collection<? extends Certificate> certs = cf.generateCertificates(certStream);
+            certStream.close();
+
+            int loadedCount = 0;
+            int skippedCount = 0;
+
+            for (Certificate cert : certs) {
+                if (cert instanceof X509Certificate x509) {
+                    // Only add CA certificates to trust anchors
+                    if (isCA(x509)) {
+                        String fingerprint = sha256Fingerprint(x509);
+                        String alias = "mozilla-" + fingerprint;
+                        signingTrustAnchors.setCertificateEntry(alias, x509);
+                        loadedCount++;
+                    } else {
+                        skippedCount++;
+                    }
+                }
+            }
+
+            log.info(
+                    "Loaded {} Mozilla CA certificates as trust anchors (skipped {} non-CA certs)",
+                    loadedCount,
+                    skippedCount);
+        } catch (Exception e) {
+            log.error("Failed to load bundled Mozilla CA certificates: {}", e.getMessage(), e);
+        }
+    }
+
+    private void loadServerCertAsAnchor() {
+        try {
+            if (serverCertificateService != null
+                    && serverCertificateService.isEnabled()
+                    && serverCertificateService.hasServerCertificate()) {
+                X509Certificate serverCert = serverCertificateService.getServerCertificate();
+
+                // Self-signed certificates can be trust anchors regardless of CA flag
+                // Non-self-signed certificates should only be trust anchors if they're CAs
+                boolean selfSigned = isSelfSigned(serverCert);
+                boolean ca = isCA(serverCert);
+
+                if (selfSigned || ca) {
+                    signingTrustAnchors.setCertificateEntry("server-anchor", serverCert);
+                    log.info(
+                            "Loaded server certificate as trust anchor (self-signed: {}, CA: {})",
+                            selfSigned,
+                            ca);
+                } else {
+                    log.warn(
+                            "Server certificate is neither self-signed nor a CA; not adding as trust anchor");
+                }
+            }
+        } catch (Exception e) {
+            log.warn("Failed loading server certificate as anchor: {}", e.getMessage());
+        }
+    }
+
+    /** Download and parse Adobe Approved Trust List (AATL) and add CA certs as trust anchors. */
+    private void loadAATLCertificates() {
+        try {
+            String aatlUrl = applicationProperties.getSecurity().getValidation().getAatl().getUrl();
+            log.info("Loading Adobe Approved Trust List (AATL) from: {}", aatlUrl);
+            byte[] pdfBytes = downloadTrustList(aatlUrl);
+            if (pdfBytes == null) {
+                log.warn("AATL download returned no data");
+                return;
+            }
+            int added = parseAATLPdf(pdfBytes);
+            log.info("Loaded {} AATL CA certificates into signing trust", added);
+        } catch (Exception e) {
+            log.warn("Failed to load AATL: {}", e.getMessage());
+            log.debug("AATL loading error", e);
+        }
+    }
+
+    /** Simple HTTP(S) fetch with sane timeouts. */
+    private byte[] downloadTrustList(String urlStr) {
+        HttpURLConnection conn = null;
+        try {
+            URL url = new URL(urlStr);
+            conn = (HttpURLConnection) url.openConnection();
+            conn.setRequestMethod("GET");
+            conn.setConnectTimeout(10_000);
+            conn.setReadTimeout(30_000);
+            conn.setInstanceFollowRedirects(true);
+
+            int code = conn.getResponseCode();
+            if (code == HttpURLConnection.HTTP_OK) {
+                try (InputStream in = conn.getInputStream();
+                        ByteArrayOutputStream out = new ByteArrayOutputStream()) {
+                    byte[] buf = new byte[8192];
+                    int r;
+                    while ((r = in.read(buf)) != -1) out.write(buf, 0, r);
+                    return out.toByteArray();
+                }
+            } else {
+                log.warn("AATL download failed: HTTP {}", code);
+                return null;
+            }
+        } catch (Exception e) {
+            log.warn("AATL download error: {}", e.getMessage());
+            return null;
+        } finally {
+            if (conn != null) conn.disconnect();
+        }
+    }
+
+    /**
+     * Parse AATL PDF, extract the embedded "SecuritySettings.xml", and import CA certs. Returns the
+     * number of newly-added CA certificates.
+     */
+    private int parseAATLPdf(byte[] pdfBytes) throws Exception {
+        try (PDDocument doc = Loader.loadPDF(pdfBytes)) {
+            PDDocumentNameDictionary names = doc.getDocumentCatalog().getNames();
+            if (names == null) {
+                log.warn("AATL PDF has no name dictionary");
+                return 0;
+            }
+
+            PDEmbeddedFilesNameTreeNode efRoot = names.getEmbeddedFiles();
+            if (efRoot == null) {
+                log.warn("AATL PDF has no embedded files");
+                return 0;
+            }
+
+            // 1) Try names at root level
+            Map<String, PDComplexFileSpecification> top = efRoot.getNames();
+            if (top != null) {
+                Integer count = tryParseSecuritySettingsXML(top);
+                if (count != null) return count;
+            }
+
+            // 2) Traverse kids (name-tree)
+            @SuppressWarnings("unchecked")
+            List<?> kids = efRoot.getKids();
+            if (kids != null) {
+                for (Object kidObj : kids) {
+                    if (kidObj instanceof PDEmbeddedFilesNameTreeNode) {
+                        PDEmbeddedFilesNameTreeNode kid = (PDEmbeddedFilesNameTreeNode) kidObj;
+                        Map<String, PDComplexFileSpecification> map = kid.getNames();
+                        if (map != null) {
+                            Integer count = tryParseSecuritySettingsXML(map);
+                            if (count != null) return count;
+                        }
+                    }
+                }
+            }
+
+            log.warn("AATL PDF did not contain SecuritySettings.xml");
+            return 0;
+        }
+    }
+
+    /**
+     * Try to locate "SecuritySettings.xml" in the given name map. If found and parsed, returns the
+     * number of certs added; otherwise returns null.
+     */
+    private Integer tryParseSecuritySettingsXML(Map<String, PDComplexFileSpecification> nameMap) {
+        PDComplexFileSpecification fileSpec = nameMap.get("SecuritySettings.xml");
+        if (fileSpec == null) return null;
+
+        PDEmbeddedFile ef = fileSpec.getEmbeddedFile();
+        if (ef == null) return null;
+
+        try (InputStream xmlStream = ef.createInputStream()) {
+            return parseSecuritySettingsXML(xmlStream);
+        } catch (Exception e) {
+            log.warn("Failed parsing SecuritySettings.xml: {}", e.getMessage());
+            log.debug("SecuritySettings.xml parse error", e);
+            return null;
+        }
+    }
+
+    /**
+     * Parse the SecuritySettings.xml and load only CA certificates (basicConstraints >= 0). Returns
+     * the number of newly-added CA certificates.
+     */
+    private int parseSecuritySettingsXML(InputStream xmlStream) throws Exception {
+        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
+        factory.setFeature("http://apache.org/xml/features/disallow-doctype-decl", true);
+        factory.setFeature("http://xml.org/sax/features/external-general-entities", false);
+        factory.setFeature("http://xml.org/sax/features/external-parameter-entities", false);
+        factory.setXIncludeAware(false);
+        factory.setExpandEntityReferences(false);
+
+        DocumentBuilder builder = factory.newDocumentBuilder();
+        Document doc = builder.parse(xmlStream);
+
+        NodeList certNodes = doc.getElementsByTagName("Certificate");
+        CertificateFactory cf = CertificateFactory.getInstance("X.509");
+
+        int added = 0;
+        for (int i = 0; i < certNodes.getLength(); i++) {
+            String base64 = certNodes.item(i).getTextContent().trim();
+            if (base64.isEmpty()) continue;
+
+            try {
+                byte[] certBytes = java.util.Base64.getMimeDecoder().decode(base64);
+                X509Certificate cert =
+                        (X509Certificate)
+                                cf.generateCertificate(new ByteArrayInputStream(certBytes));
+
+                // Only add CA certs as anchors
+                if (isCA(cert)) {
+                    String fingerprint = sha256Fingerprint(cert);
+                    String alias = "aatl-" + fingerprint;
+
+                    // avoid duplicates
+                    if (signingTrustAnchors.getCertificate(alias) == null) {
+                        signingTrustAnchors.setCertificateEntry(alias, cert);
+                        added++;
+                    }
+                } else {
+                    log.debug(
+                            "Skipping non-CA certificate from AATL: {}",
+                            cert.getSubjectX500Principal().getName());
+                }
+            } catch (Exception e) {
+                log.debug("Failed to parse an AATL certificate node: {}", e.getMessage());
+            }
+        }
+        return added;
+    }
+
+    /**
+     * Download LOTL (List Of Trusted Lists), resolve national TSLs, and import qualified CA
+     * certificates.
+     */
+    private void loadEUTLCertificates() {
+        try {
+            String lotlUrl =
+                    applicationProperties.getSecurity().getValidation().getEutl().getLotlUrl();
+            log.info("Loading EU Trusted List (LOTL) from: {}", lotlUrl);
+            byte[] lotlBytes = downloadXml(lotlUrl);
+            if (lotlBytes == null) {
+                log.warn("LOTL download returned no data");
+                return;
+            }
+
+            List<String> tslUrls = parseLotlForTslLocations(lotlBytes);
+            log.info("Found {} national TSL locations in LOTL", tslUrls.size());
+
+            int totalAdded = 0;
+            for (String tslUrl : tslUrls) {
+                try {
+                    byte[] tslBytes = downloadXml(tslUrl);
+                    if (tslBytes == null) {
+                        log.warn("TSL download failed: {}", tslUrl);
+                        continue;
+                    }
+                    int added = parseTslAndAddCas(tslBytes, tslUrl);
+                    totalAdded += added;
+                } catch (Exception e) {
+                    log.warn("Failed to parse TSL {}: {}", tslUrl, e.getMessage());
+                    log.debug("TSL parse error", e);
+                }
+            }
+
+            log.info("Imported {} qualified CA certificates from EUTL", totalAdded);
+        } catch (Exception e) {
+            log.warn("EUTL load failed: {}", e.getMessage());
+            log.debug("EUTL load error", e);
+        }
+    }
+
+    /** HTTP(S) GET for XML with sane timeouts. */
+    private byte[] downloadXml(String urlStr) {
+        HttpURLConnection conn = null;
+        try {
+            URL url = new URL(urlStr);
+            conn = (HttpURLConnection) url.openConnection();
+            conn.setRequestMethod("GET");
+            conn.setConnectTimeout(10_000);
+            conn.setReadTimeout(30_000);
+            conn.setInstanceFollowRedirects(true);
+
+            int code = conn.getResponseCode();
+            if (code == HttpURLConnection.HTTP_OK) {
+                try (InputStream in = conn.getInputStream();
+                        ByteArrayOutputStream out = new ByteArrayOutputStream()) {
+                    byte[] buf = new byte[8192];
+                    int r;
+                    while ((r = in.read(buf)) != -1) out.write(buf, 0, r);
+                    return out.toByteArray();
+                }
+            } else {
+                log.warn("XML download failed: HTTP {} for {}", code, urlStr);
+                return null;
+            }
+        } catch (Exception e) {
+            log.warn("XML download error for {}: {}", urlStr, e.getMessage());
+            return null;
+        } finally {
+            if (conn != null) conn.disconnect();
+        }
+    }
+
+    /** Parse LOTL and return all TSL URLs from PointersToOtherTSL. */
+    private List<String> parseLotlForTslLocations(byte[] lotlBytes) throws Exception {
+        DocumentBuilderFactory dbf = secureDbfWithNamespaces();
+        DocumentBuilder db = dbf.newDocumentBuilder();
+        Document doc = db.parse(new ByteArrayInputStream(lotlBytes));
+
+        List<String> out = new ArrayList<>();
+        NodeList ptrs = doc.getElementsByTagNameNS(NS_TSL, "PointersToOtherTSL");
+        if (ptrs.getLength() == 0) return out;
+
+        org.w3c.dom.Element ptrRoot = (org.w3c.dom.Element) ptrs.item(0);
+        NodeList locations = ptrRoot.getElementsByTagNameNS(NS_TSL, "TSLLocation");
+        for (int i = 0; i < locations.getLength(); i++) {
+            String url = locations.item(i).getTextContent().trim();
+            if (!url.isEmpty()) out.add(url);
+        }
+        return out;
+    }
+
+    /**
+     * Parse a single national TSL, import CA certificates for qualified services in an active
+     * status. Returns count of newly added CA certs.
+     */
+    private int parseTslAndAddCas(byte[] tslBytes, String sourceUrl) throws Exception {
+        DocumentBuilderFactory dbf = secureDbfWithNamespaces();
+        DocumentBuilder db = dbf.newDocumentBuilder();
+        Document doc = db.parse(new ByteArrayInputStream(tslBytes));
+
+        int added = 0;
+
+        NodeList services = doc.getElementsByTagNameNS(NS_TSL, "TSPService");
+        for (int i = 0; i < services.getLength(); i++) {
+            org.w3c.dom.Element svc = (org.w3c.dom.Element) services.item(i);
+            org.w3c.dom.Element info = firstChildNS(svc, "ServiceInformation");
+            if (info == null) continue;
+
+            String type = textOf(info, "ServiceTypeIdentifier");
+            if (!EUTL_SERVICE_TYPES.contains(type)) continue;
+
+            String status = textOf(info, "ServiceStatus");
+            if (!isActiveStatus(status)) continue;
+
+            org.w3c.dom.Element sdi = firstChildNS(info, "ServiceDigitalIdentity");
+            if (sdi == null) continue;
+
+            NodeList digitalIds = sdi.getElementsByTagNameNS(NS_TSL, "DigitalId");
+            for (int d = 0; d < digitalIds.getLength(); d++) {
+                org.w3c.dom.Element did = (org.w3c.dom.Element) digitalIds.item(d);
+                NodeList certNodes = did.getElementsByTagNameNS(NS_TSL, "X509Certificate");
+                for (int c = 0; c < certNodes.getLength(); c++) {
+                    String base64 = certNodes.item(c).getTextContent().trim();
+                    if (base64.isEmpty()) continue;
+
+                    try {
+                        byte[] certBytes = java.util.Base64.getMimeDecoder().decode(base64);
+                        CertificateFactory cf = CertificateFactory.getInstance("X.509");
+                        X509Certificate cert =
+                                (X509Certificate)
+                                        cf.generateCertificate(new ByteArrayInputStream(certBytes));
+
+                        if (!isCA(cert)) {
+                            log.debug(
+                                    "Skipping non-CA in TSL {}: {}",
+                                    sourceUrl,
+                                    cert.getSubjectX500Principal().getName());
+                            continue;
+                        }
+
+                        String fp = sha256Fingerprint(cert);
+                        String alias = "eutl-" + fp;
+
+                        if (signingTrustAnchors.getCertificate(alias) == null) {
+                            signingTrustAnchors.setCertificateEntry(alias, cert);
+                            added++;
+                        }
+                    } catch (Exception e) {
+                        log.debug(
+                                "Failed to import a certificate from {}: {}",
+                                sourceUrl,
+                                e.getMessage());
+                    }
+                }
+            }
+        }
+
+        log.debug("TSL {} → imported {} CA certificates", sourceUrl, added);
+        return added;
+    }
+
+    /** Check if service status is active (per ETSI TS 119 612). */
+    private boolean isActiveStatus(String statusUri) {
+        if (STATUS_UNDER_SUPERVISION.equals(statusUri)) return true;
+        if (STATUS_ACCREDITED.equals(statusUri)) return true;
+        boolean acceptTransitional =
+                applicationProperties
+                        .getSecurity()
+                        .getValidation()
+                        .getEutl()
+                        .isAcceptTransitional();
+        if (acceptTransitional && STATUS_SUPERVISION_IN_CESSATION.equals(statusUri)) return true;
+        return false;
+    }
+
+    /** Create secure DocumentBuilderFactory with namespace awareness. */
+    private DocumentBuilderFactory secureDbfWithNamespaces() throws Exception {
+        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
+        factory.setNamespaceAware(true);
+        // Secure processing hardening
+        factory.setFeature("http://apache.org/xml/features/disallow-doctype-decl", true);
+        factory.setFeature("http://xml.org/sax/features/external-general-entities", false);
+        factory.setFeature("http://xml.org/sax/features/external-parameter-entities", false);
+        factory.setXIncludeAware(false);
+        factory.setExpandEntityReferences(false);
+        return factory;
+    }
+
+    /** Get first child element with given local name in TSL namespace. */
+    private org.w3c.dom.Element firstChildNS(org.w3c.dom.Element parent, String localName) {
+        NodeList nl = parent.getElementsByTagNameNS(NS_TSL, localName);
+        return (nl.getLength() == 0) ? null : (org.w3c.dom.Element) nl.item(0);
+    }
+
+    /** Get text content of first child with given local name. */
+    private String textOf(org.w3c.dom.Element parent, String localName) {
+        org.w3c.dom.Element e = firstChildNS(parent, localName);
+        return (e == null) ? "" : e.getTextContent().trim();
+    }
+
+    /** Get signing trust store */
+    public KeyStore getSigningTrustStore() {
+        return signingTrustAnchors;
+    }
 }
@@ -1916,6 +1916,7 @@ fileManager.storageError=Storage error occurred
 fileManager.storageLow=Storage is running low. Consider removing old files.
 fileManager.uploadError=Failed to upload some files.
 fileManager.supportMessage=Powered by browser database storage for unlimited capacity
+fileManager.loadingFiles=Loading files...

 # Page Editor
 pageEditor.title=Page Editor
@@ -1945,6 +1946,25 @@ viewer.zoomIn=Zoom in
 # Tool Picker
 toolPicker.searchPlaceholder=Search tools...
 toolPicker.noToolsFound=No tools found
+toolPanel.toggle.legacy=Switch to legacy mode
+toolPanel.toggle.sidebar=Switch to sidebar mode
+toolPanel.placeholder=Choose a tool to get started
+toolPanel.legacy.heading=All tools (legacy view)
+toolPanel.legacy.tagline=Browse and launch tools while keeping the classic full-width gallery.
+toolPanel.legacy.descriptionsOn=Showing descriptions
+toolPanel.legacy.descriptionsOff=Descriptions hidden
+toolPanel.legacy.noResults=Try adjusting your search or toggle descriptions to find what you need.
+toolPanel.legacy.matchedSynonym=Matches "{{text}}"
+toolPanel.modePrompt.title=Choose how you browse tools
+toolPanel.modePrompt.description=Preview both layouts and decide how you want to explore Stirling PDF tools.
+toolPanel.modePrompt.sidebarTitle=Advanced sidebar
+toolPanel.modePrompt.sidebarDescription=Keep tools alongside your workspace for quick switching.
+toolPanel.modePrompt.recommended=Recommended
+toolPanel.modePrompt.chooseSidebar=Use advanced sidebar
+toolPanel.modePrompt.legacyTitle=Legacy fullscreen
+toolPanel.modePrompt.legacyDescription=Browse every tool in a catalogue that covers the workspace until you pick one.
+toolPanel.modePrompt.chooseLegacy=Use legacy fullscreen
+toolPanel.modePrompt.dismiss=Maybe later
 pageEditor.reset=Reset Changes
 pageEditor.zoomIn=Zoom In
 pageEditor.zoomOut=Zoom Out
@@ -1957,3 +1977,39 @@ viewer.nextPage=Next Page
 viewer.pageNavigation=Page Navigation
 viewer.currentPage=Current Page
 viewer.totalPages=Total Pages
+toolPanel.legacy.favorites=Favourites
+toolPanel.legacy.recent=Recently used
+toolPanel.legacy.favorite=Add to favourites
+toolPanel.legacy.unfavorite=Remove from favourites
+toolPanel.legacy.settings.title=Customise appearance
+toolPanel.legacy.settings.iconBackground.label=Tool icon background
+toolPanel.legacy.settings.iconBackground.description=When to show coloured backgrounds behind tool icons
+toolPanel.legacy.settings.iconBackground.none=None
+toolPanel.legacy.settings.iconBackground.hover=On hover
+toolPanel.legacy.settings.iconBackground.always=Always
+toolPanel.legacy.settings.iconColor.label=Tool icon colour
+toolPanel.legacy.settings.iconColor.description=Colour scheme for tool icons
+toolPanel.legacy.settings.iconColor.colored=Coloured
+toolPanel.legacy.settings.iconColor.vibrant=Vibrant
+toolPanel.legacy.settings.iconColor.monochrome=Monochrome
+toolPanel.legacy.settings.sectionTitle.label=Section titles
+toolPanel.legacy.settings.sectionTitle.description=Colour for category section titles
+toolPanel.legacy.settings.sectionTitle.colored=Coloured
+toolPanel.legacy.settings.sectionTitle.neutral=Neutral
+toolPanel.legacy.settings.headerIcon.label=Section header icons
+toolPanel.legacy.settings.headerIcon.description=Colour for Favourites/Recent icons
+toolPanel.legacy.settings.headerIcon.colored=Coloured
+toolPanel.legacy.settings.headerIcon.monochrome=Monochrome
+toolPanel.legacy.settings.headerBadge.label=Section header badges
+toolPanel.legacy.settings.headerBadge.description=Colour for count badges in section headers
+toolPanel.legacy.settings.headerBadge.colored=Coloured
+toolPanel.legacy.settings.headerBadge.neutral=Neutral
+toolPanel.legacy.settings.border.label=Tool item borders
+toolPanel.legacy.settings.border.description=Show borders around tool items
+toolPanel.legacy.settings.border.visible=Visible
+toolPanel.legacy.settings.border.hidden=Hidden
+toolPanel.legacy.settings.hover.label=Hover effect intensity
+toolPanel.legacy.settings.hover.description=How prominent the hover effect should be
+toolPanel.legacy.settings.hover.subtle=Subtle
+toolPanel.legacy.settings.hover.moderate=Moderate
+toolPanel.legacy.settings.hover.prominent=Prominent
@@ -65,6 +65,22 @@ security:
    enableKeyCleanup: true # Set to 'true' to enable key pair cleanup
    keyRetentionDays: 7 # Number of days to retain old keys. The default is 7 days.
    secureCookie: false # Set to 'true' to use secure cookies for JWTs
+  validation: # PDF signature validation settings
+    trust:
+      serverAsAnchor: true # Trust server certificate as anchor for PDF signatures (if configured and self-signed or CA)
+      useSystemTrust: true # Trust Java/OS system trust store for PDF signature validation
+      useMozillaBundle: true # Trust bundled Mozilla CA bundle (~140 CAs) for PDF signature validation
+      useAATL: false # Trust Adobe Approved Trust List (AATL) for PDF signature validation - downloads from Adobe on startup if enabled
+      useEUTL: false # Trust EU Trusted List (EUTL) for eIDAS qualified certificates - downloads LOTL and national TSLs on startup if enabled
+    allowAIA: false # Allow JDK to fetch issuer certificates and revocation information from network (OCSP/CRL/AIA)
+    aatl:
+      url: https://trustlist.adobe.com/tl.pdf # Adobe Approved Trust List download URL
+    eutl:
+      lotlUrl: https://ec.europa.eu/tools/lotl/eu-lotl.xml # EU List Of Trusted Lists (LOTL) URL
+      acceptTransitional: false # Accept certificates with 'supervisionincessation' status (transitional state)
+    revocation:
+      mode: none # Revocation checking mode: 'none' (disabled), 'ocsp' (OCSP only), 'crl' (CRL only), 'ocsp+crl' (OCSP with CRL fallback)
+      hardFail: false # Fail validation if revocation status cannot be determined (true=strict, false=soft-fail)

 premium:
  key: 00000000-0000-0000-0000-000000000000
@@ -76,11 +92,6 @@ premium:
      author: username
      creator: Stirling-PDF
      producer: Stirling-PDF
-    googleDrive:
-      enabled: false
-      clientId: ''
-      apiKey: ''
-      appId: ''
  enterpriseFeatures:
    audit:
      enabled: true # Enable audit logging
@@ -422,10 +422,6 @@
          <span th:text="#{fileChooser.or}" style="margin: 0 5px;"></span>
          <span th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></span>
        </div>
-        <hr th:if="${@GoogleDriveEnabled == true}" class="horizontal-divider" >
-      </div>
-      <div th:if="${@GoogleDriveEnabled == true}"  th:id="${name}+'-google-drive-button'" class="google-drive-button" th:attr="data-name=${name}, data-multiple=${!disableMultipleFiles}, data-accept=${accept}"  > 
-        <img th:src="@{'/images/google-drive.svg'}" alt="google drive">
      </div>
    </div>
    <div class="selected-files flex-wrap"></div>
@@ -443,16 +439,4 @@
    </div>
  </div>
  <script th:src="@{'/js/fileInput.js'}" type="module"></script>
-
-  <div th:if="${@GoogleDriveEnabled == true}" >
-    <script type="text/javascript" th:src="@{'/js/googleFilePicker.js'}"></script>
-    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
-    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
-  
-    <script th:inline="javascript">
-      window.stirlingPDF.GoogleDriveClientId = /*[[${@GoogleDriveConfig.getClientId()}]]*/ null;
-      window.stirlingPDF.GoogleDriveApiKey = /*[[${@GoogleDriveConfig.getApiKey()}]]*/ null;
-      window.stirlingPDF.GoogleDriveAppId = /*[[${@GoogleDriveConfig.getAppId()}]]*/ null;
-    </script>
-  </div>
 </th:block>
@@ -2,20 +2,20 @@ package stirling.software.SPDF.service;

 import static org.junit.jupiter.api.Assertions.assertFalse;
 import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.doNothing;
 import static org.mockito.Mockito.doThrow;
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.when;

-import java.security.PublicKey;
 import java.security.cert.CertificateExpiredException;
 import java.security.cert.X509Certificate;
-
-import javax.security.auth.x500.X500Principal;
+import java.util.Date;

 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
-import org.mockito.Mockito;
+
+import stirling.software.common.model.ApplicationProperties;

 /** Tests for the CertificateValidationService using mocked certificates. */
 class CertificateValidationServiceTest {
@@ -26,121 +26,82 @@ class CertificateValidationServiceTest {

    @BeforeEach
    void setUp() throws Exception {
-        validationService = new CertificateValidationService();
+        // Create mock ApplicationProperties with default validation settings
+        ApplicationProperties applicationProperties = mock(ApplicationProperties.class);
+        ApplicationProperties.Security security = mock(ApplicationProperties.Security.class);
+        ApplicationProperties.Security.Validation validation =
+                mock(ApplicationProperties.Security.Validation.class);
+        ApplicationProperties.Security.Validation.Trust trust =
+                mock(ApplicationProperties.Security.Validation.Trust.class);
+        ApplicationProperties.Security.Validation.Revocation revocation =
+                mock(ApplicationProperties.Security.Validation.Revocation.class);
+
+        when(applicationProperties.getSecurity()).thenReturn(security);
+        when(security.getValidation()).thenReturn(validation);
+        when(validation.getTrust()).thenReturn(trust);
+        when(validation.getRevocation()).thenReturn(revocation);
+        when(validation.isAllowAIA()).thenReturn(false);
+        when(validation.isEnableEUTL()).thenReturn(false);
+        when(trust.isServerAsAnchor()).thenReturn(false);
+        when(trust.isUseSystemTrust()).thenReturn(false);
+        when(trust.isUseMozillaBundle()).thenReturn(false);
+        when(revocation.getMode()).thenReturn("none");
+        when(revocation.isHardFail()).thenReturn(false);
+
+        validationService = new CertificateValidationService(null, applicationProperties);

        // Create mock certificates
        validCertificate = mock(X509Certificate.class);
        expiredCertificate = mock(X509Certificate.class);

-        // Set up behaviors for valid certificate
-        doNothing().when(validCertificate).checkValidity(); // No exception means valid
+        // Set up behaviors for valid certificate (both overloads)
+        doNothing().when(validCertificate).checkValidity();
+        doNothing().when(validCertificate).checkValidity(any(Date.class));

-        // Set up behaviors for expired certificate
+        // Set up behaviors for expired certificate (both overloads)
        doThrow(new CertificateExpiredException("Certificate expired"))
                .when(expiredCertificate)
                .checkValidity();
+        doThrow(new CertificateExpiredException("Certificate expired"))
+                .when(expiredCertificate)
+                .checkValidity(any(Date.class));
    }

    @Test
-    void testIsRevoked_ValidCertificate() {
+    void testIsOutsideValidityPeriod_ValidCertificate() {
        // When certificate is valid (not expired)
-        boolean result = validationService.isRevoked(validCertificate);
+        boolean result = validationService.isOutsideValidityPeriod(validCertificate, new Date());

-        // Then it should not be considered revoked
+        // Then it should not be outside validity period
+        assertFalse(result, "Valid certificate should not be outside validity period");
+    }
+
+    @Test
+    void testIsOutsideValidityPeriod_ExpiredCertificate() {
+        // When certificate is expired
+        boolean result = validationService.isOutsideValidityPeriod(expiredCertificate, new Date());
+
+        // Then it should be outside validity period
+        assertTrue(result, "Expired certificate should be outside validity period");
+    }
+
+    @Test
+    @SuppressWarnings("deprecation")
+    void testDeprecatedIsRevoked_ValidCertificate() {
+        // Test deprecated method for backwards compatibility
+        boolean result = validationService.isRevoked(validCertificate);
        assertFalse(result, "Valid certificate should not be considered revoked");
    }

    @Test
-    void testIsRevoked_ExpiredCertificate() {
-        // When certificate is expired
+    @SuppressWarnings("deprecation")
+    void testDeprecatedIsRevoked_ExpiredCertificate() {
+        // Test deprecated method for backwards compatibility
        boolean result = validationService.isRevoked(expiredCertificate);
-
-        // Then it should be considered revoked
-        assertTrue(result, "Expired certificate should be considered revoked");
+        assertTrue(result, "Expired certificate should be considered revoked (legacy behavior)");
    }

-    @Test
-    void testValidateTrustWithCustomCert_Match() {
-        // Create certificates with matching issuer and subject
-        X509Certificate issuingCert = mock(X509Certificate.class);
-        X509Certificate signedCert = mock(X509Certificate.class);
-
-        // Create X500Principal objects for issuer and subject
-        X500Principal issuerPrincipal = new X500Principal("CN=Test Issuer");
-
-        // Mock the issuer of the signed certificate to match the subject of the issuing certificate
-        when(signedCert.getIssuerX500Principal()).thenReturn(issuerPrincipal);
-        when(issuingCert.getSubjectX500Principal()).thenReturn(issuerPrincipal);
-
-        // When validating trust with custom cert
-        boolean result = validationService.validateTrustWithCustomCert(signedCert, issuingCert);
-
-        // Then validation should succeed
-        assertTrue(result, "Certificate with matching issuer and subject should validate");
-    }
-
-    @Test
-    void testValidateTrustWithCustomCert_NoMatch() {
-        // Create certificates with non-matching issuer and subject
-        X509Certificate issuingCert = mock(X509Certificate.class);
-        X509Certificate signedCert = mock(X509Certificate.class);
-
-        // Create X500Principal objects for issuer and subject
-        X500Principal issuerPrincipal = new X500Principal("CN=Test Issuer");
-        X500Principal differentPrincipal = new X500Principal("CN=Different Name");
-
-        // Mock the issuer of the signed certificate to NOT match the subject of the issuing
-        // certificate
-        when(signedCert.getIssuerX500Principal()).thenReturn(issuerPrincipal);
-        when(issuingCert.getSubjectX500Principal()).thenReturn(differentPrincipal);
-
-        // When validating trust with custom cert
-        boolean result = validationService.validateTrustWithCustomCert(signedCert, issuingCert);
-
-        // Then validation should fail
-        assertFalse(result, "Certificate with non-matching issuer and subject should not validate");
-    }
-
-    @Test
-    void testValidateCertificateChainWithCustomCert_Success() throws Exception {
-        // Setup mock certificates
-        X509Certificate signedCert = mock(X509Certificate.class);
-        X509Certificate signingCert = mock(X509Certificate.class);
-        PublicKey publicKey = mock(PublicKey.class);
-
-        when(signingCert.getPublicKey()).thenReturn(publicKey);
-
-        // When verifying the certificate with the signing cert's public key, don't throw exception
-        doNothing().when(signedCert).verify(Mockito.any());
-
-        // When validating certificate chain with custom cert
-        boolean result =
-                validationService.validateCertificateChainWithCustomCert(signedCert, signingCert);
-
-        // Then validation should succeed
-        assertTrue(result, "Certificate chain with proper signing should validate");
-    }
-
-    @Test
-    void testValidateCertificateChainWithCustomCert_Failure() throws Exception {
-        // Setup mock certificates
-        X509Certificate signedCert = mock(X509Certificate.class);
-        X509Certificate signingCert = mock(X509Certificate.class);
-        PublicKey publicKey = mock(PublicKey.class);
-
-        when(signingCert.getPublicKey()).thenReturn(publicKey);
-
-        // When verifying the certificate with the signing cert's public key, throw exception
-        // Need to use a specific exception that verify() can throw
-        doThrow(new java.security.SignatureException("Verification failed"))
-                .when(signedCert)
-                .verify(Mockito.any());
-
-        // When validating certificate chain with custom cert
-        boolean result =
-                validationService.validateCertificateChainWithCustomCert(signedCert, signingCert);
-
-        // Then validation should fail
-        assertFalse(result, "Certificate chain with failed signing should not validate");
-    }
+    // Note: Full integration tests for buildAndValidatePath() would require
+    // real certificate chains and trust anchors. These would be better as
+    // integration tests using actual signed PDFs from the test-signed-pdfs directory.
 }
@@ -12,7 +12,6 @@ import org.springframework.core.annotation.Order;
 import stirling.software.common.model.ApplicationProperties;
 import stirling.software.common.model.ApplicationProperties.EnterpriseEdition;
 import stirling.software.common.model.ApplicationProperties.Premium;
-import stirling.software.common.model.ApplicationProperties.Premium.ProFeatures.GoogleDrive;

@Configuration
@Order(Ordered.HIGHEST_PRECEDENCE)
@@ -55,19 +54,6 @@ public class EEAppConfig {
        return applicationProperties.getPremium().getProFeatures().isSsoAutoLogin();
    }

-    @Profile("security")
-    @Bean(name = "GoogleDriveEnabled")
-    @Primary
-    public boolean googleDriveEnabled() {
-        return runningProOrHigher()
-                && applicationProperties.getPremium().getProFeatures().getGoogleDrive().isEnabled();
-    }
-
-    @Bean(name = "GoogleDriveConfig")
-    public GoogleDrive googleDriveConfig() {
-        return applicationProperties.getPremium().getProFeatures().getGoogleDrive();
-    }
-
    // TODO: Remove post migration
    @SuppressWarnings("deprecation")
    public void migrateEnterpriseSettingsToPremium(ApplicationProperties applicationProperties) {
@@ -50,7 +50,14 @@ docker-compose -f docker/compose/docker-compose.fat.yml up --build
 - **Custom Ports**: Modify port mappings in docker-compose files
 - **Memory Limits**: Adjust memory limits per variant (2G ultra-lite, 4G standard, 6G fat)

+### [Google Drive Integration](https://developers.google.com/workspace/drive/picker/guides/overview)
+
+- **VITE_GOOGLE_DRIVE_CLIENT_ID**: [OAuth 2.0 Client ID](https://console.cloud.google.com/auth/clients/create)
+- **VITE_GOOGLE_DRIVE_API_KEY**: [Create New API](https://console.cloud.google.com/apis)
+- **VITE_GOOGLE_DRIVE_APP_ID**: This is your [project number](https://console.cloud.google.com/iam-admin/settings) in the GoogleCloud Settings
+
 ## Development vs Production

 - **Development**: Keep backend port 8080 exposed for debugging
- **Production**: Remove backend port exposure, use only frontend proxy
+- **Production**: Remove backend port exposure, use only frontend proxy
+
@@ -47,6 +47,9 @@ services:
      - "3000:80"
    environment:
      BACKEND_URL: http://backend:8080
+      #VITE_GOOGLE_DRIVE_CLIENT_ID: <INSERT_YOUR_CLIENT_ID_HERE>
+      #VITE_GOOGLE_DRIVE_API_KEY: <INSERT_YOUR_API_KEY_HERE>
+      #VITE_GOOGLE_DRIVE_APP_ID: <INSERT_YOUR_APP_ID_HERE>
    depends_on:
      - backend
    networks:
@@ -44,6 +44,9 @@ services:
      - "3000:80"
    environment:
      BACKEND_URL: http://backend:8080
+      #VITE_GOOGLE_DRIVE_CLIENT_ID: <INSERT_YOUR_CLIENT_ID_HERE>
+      #VITE_GOOGLE_DRIVE_API_KEY: <INSERT_YOUR_API_KEY_HERE>
+      #VITE_GOOGLE_DRIVE_APP_ID: <INSERT_YOUR_APP_ID_HERE>
    depends_on:
      - backend
    networks:
@@ -46,6 +46,9 @@ services:
      - "3000:80"
    environment:
      BACKEND_URL: http://backend:8080
+      #VITE_GOOGLE_DRIVE_CLIENT_ID: <INSERT_YOUR_CLIENT_ID_HERE>
+      #VITE_GOOGLE_DRIVE_API_KEY: <INSERT_YOUR_API_KEY_HERE>
+      #VITE_GOOGLE_DRIVE_APP_ID: <INSERT_YOUR_APP_ID_HERE>
    depends_on:
      - backend
    networks:
@@ -1,9 +1,18 @@
 // @ts-check

 import eslint from '@eslint/js';
+import globals from "globals";
 import { defineConfig } from 'eslint/config';
 import tseslint from 'typescript-eslint';

+const srcGlobs = [
+  'src/**/*.{js,mjs,jsx,ts,tsx}',
+];
+const nodeGlobs = [
+  'scripts/**/*.{js,ts,mjs}',
+  '*.config.{js,ts,mjs}',
+];
+
 export default defineConfig(
  eslint.configs.recommended,
  tseslint.configs.recommended,
@@ -15,7 +24,6 @@ export default defineConfig(
  },
  {
    rules: {
-      "no-undef": "off", // Temporarily disabled until codebase conformant
      "@typescript-eslint/no-empty-object-type": [
        "error",
        {
@@ -38,5 +46,23 @@ export default defineConfig(
        },
      ],
    },
-  }
+  },
+  // Config for browser scripts
+  {
+    files: srcGlobs,
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      }
+    }
+  },
+  // Config for node scripts
+  {
+    files: nodeGlobs,
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      }
+    }
+  },
 );
@@ -10,24 +10,24 @@
      "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.7",
-        "@embedpdf/core": "^1.3.1",
-        "@embedpdf/engines": "^1.3.1",
-        "@embedpdf/plugin-annotation": "^1.3.1",
-        "@embedpdf/plugin-export": "^1.3.1",
-        "@embedpdf/plugin-history": "^1.3.1",
-        "@embedpdf/plugin-interaction-manager": "^1.3.1",
-        "@embedpdf/plugin-loader": "^1.3.1",
-        "@embedpdf/plugin-pan": "^1.3.1",
-        "@embedpdf/plugin-render": "^1.3.1",
-        "@embedpdf/plugin-rotate": "^1.3.1",
-        "@embedpdf/plugin-scroll": "^1.3.1",
-        "@embedpdf/plugin-search": "^1.3.1",
-        "@embedpdf/plugin-selection": "^1.3.1",
-        "@embedpdf/plugin-spread": "^1.3.1",
-        "@embedpdf/plugin-thumbnail": "^1.3.1",
-        "@embedpdf/plugin-tiling": "^1.3.1",
-        "@embedpdf/plugin-viewport": "^1.3.1",
-        "@embedpdf/plugin-zoom": "^1.3.1",
+        "@embedpdf/core": "^1.3.14",
+        "@embedpdf/engines": "^1.3.14",
+        "@embedpdf/plugin-annotation": "^1.3.14",
+        "@embedpdf/plugin-export": "^1.3.14",
+        "@embedpdf/plugin-history": "^1.3.14",
+        "@embedpdf/plugin-interaction-manager": "^1.3.14",
+        "@embedpdf/plugin-loader": "^1.3.14",
+        "@embedpdf/plugin-pan": "^1.3.14",
+        "@embedpdf/plugin-render": "^1.3.14",
+        "@embedpdf/plugin-rotate": "^1.3.14",
+        "@embedpdf/plugin-scroll": "^1.3.14",
+        "@embedpdf/plugin-search": "^1.3.14",
+        "@embedpdf/plugin-selection": "^1.3.14",
+        "@embedpdf/plugin-spread": "^1.3.14",
+        "@embedpdf/plugin-thumbnail": "^1.3.14",
+        "@embedpdf/plugin-tiling": "^1.3.14",
+        "@embedpdf/plugin-viewport": "^1.3.14",
+        "@embedpdf/plugin-zoom": "^1.3.14",
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.1",
        "@iconify/react": "^6.0.2",
@@ -41,6 +41,7 @@
        "@tanstack/react-virtual": "^3.13.12",
        "autoprefixer": "^10.4.21",
        "axios": "^1.12.2",
+        "globals": "^16.4.0",
        "i18next": "^25.5.2",
        "i18next-browser-languagedetector": "^8.2.0",
        "i18next-http-backend": "^3.0.2",
@@ -53,6 +54,7 @@
        "react-dom": "^19.1.1",
        "react-i18next": "^15.7.3",
        "react-router-dom": "^7.9.1",
+        "signature_pad": "^5.0.4",
        "tailwindcss": "^4.1.13",
        "web-vitals": "^5.1.0"
      },
@@ -65,6 +67,10 @@
        "@testing-library/jest-dom": "^6.8.0",
        "@testing-library/react": "^16.3.0",
        "@testing-library/user-event": "^14.6.1",
+        "@types/gapi": "^0.0.47",
+        "@types/gapi.client.drive-v3": "^0.0.5",
+        "@types/google.accounts": "^0.0.18",
+        "@types/google.picker": "^0.0.51",
        "@types/node": "^24.5.2",
        "@types/react": "^19.1.13",
        "@types/react-dom": "^19.1.9",
@@ -491,13 +497,13 @@
      }
    },
    "node_modules/@embedpdf/core": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz",
-      "integrity": "sha512-2Az6trhiMMBIv+GFvV8H8UOS1gwQn7NK0KaJMcdsZbUHYLO0P95aVd6Pi/GRzEH4XyF51TDIoTOAUtf07TQ5dQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.14.tgz",
+      "integrity": "sha512-lE/vfhA53CxamaCfGWEibrEPr+JeZT42QCF+cOELUwv4+Zt6b+IE6+4wsznx/8wjjJYwllXJ3GJ/un1UzTqARw==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/engines": "1.3.1",
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/engines": "1.3.14",
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
        "preact": "^10.26.4",
@@ -507,13 +513,13 @@
      }
    },
    "node_modules/@embedpdf/engines": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/engines/-/engines-1.3.1.tgz",
-      "integrity": "sha512-G3pI+18la7spviUMuA5s9/hV95jlfkA2+CNxqlHBO5ocw3641E3d36Lv+mx+6yU7k0B5vEOQPZDGRMg7KFziBQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/engines/-/engines-1.3.14.tgz",
+      "integrity": "sha512-+/FPW2gAzj2lQYvsMH/Oj9+MEXgkyEuyYDC+HFkltTuXvmiP2S/3BD0YslZDX9K4BzcmMxnWB+BiQpNJokbDVg==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1",
-        "@embedpdf/pdfium": "1.3.1"
+        "@embedpdf/models": "1.3.14",
+        "@embedpdf/pdfium": "1.3.14"
      },
      "peerDependencies": {
        "preact": "^10.26.4",
@@ -523,31 +529,31 @@
      }
    },
    "node_modules/@embedpdf/models": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/models/-/models-1.3.1.tgz",
-      "integrity": "sha512-OzmO1rQAuOP/Y3aYXmW21dPNAx49olhr9ZO2hDdI0fbNBHTVGxnaKqOISxVmUz7TmhTwVBljERACnaA8Ib4b4Q==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/models/-/models-1.3.14.tgz",
+      "integrity": "sha512-BujY4bmr8b2DQdoZkOge03SzoRVoWxzfIQATLSPPtp4WiFh1U4BPp6cADlGuCwGkp6zBcH/aM4h8PwwA75d/eg==",
      "license": "MIT"
    },
    "node_modules/@embedpdf/pdfium": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/pdfium/-/pdfium-1.3.1.tgz",
-      "integrity": "sha512-qYGSS5ntz6DSY9Cxw/aigvHqGB+AKJLEcymNTZOL0GdlBzZpL++dOIYNEYHO2Tm/lOQVpE7I0e+Xh2TvD8O1zQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/pdfium/-/pdfium-1.3.14.tgz",
+      "integrity": "sha512-TQMZabXzHmzvvfPwopubFcYgQuYV7POvMgjICYu3Pgfn3sgr+UdIUh3aNXR/COcl3q8sXPMFQ2GDuyOHR9QQnA==",
      "license": "MIT"
    },
    "node_modules/@embedpdf/plugin-annotation": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-annotation/-/plugin-annotation-1.3.1.tgz",
-      "integrity": "sha512-mmePRYYBB8v8NIZ95XVfFkpyQ2QiKIGdWyvrPeJXSbL3/K6d6ix+o/jHBVvBWyTsQzdIlzs+FW8+iT0M1zkEow==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-annotation/-/plugin-annotation-1.3.14.tgz",
+      "integrity": "sha512-JJYqEWwUKCdBZsXCDq/CW96p3pVLn8N+XZ4W3OyL7djI2fvYC9x6ys9m82vwlSathAVOxk1D7xXiY8AzJQVF0Q==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1",
-        "@embedpdf/utils": "1.3.1"
+        "@embedpdf/models": "1.3.14",
+        "@embedpdf/utils": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-history": "1.3.1",
-        "@embedpdf/plugin-interaction-manager": "1.3.1",
-        "@embedpdf/plugin-selection": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-history": "1.3.14",
+        "@embedpdf/plugin-interaction-manager": "1.3.14",
+        "@embedpdf/plugin-selection": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -555,15 +561,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-export": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-export/-/plugin-export-1.3.1.tgz",
-      "integrity": "sha512-reb03vNPFP5GuIAFExMcuYBVYu/deVO2v8EoCwRZ/lzzYMORIkJjpNWDQPo9VfyGBh1x4/o3CHvxisU1Y1tDLg==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-export/-/plugin-export-1.3.14.tgz",
+      "integrity": "sha512-fMGp2YxvI4uTRIViUKxfnJts2Jw/vktEM45XUNGNSjT/kAW6znVNgdceYjpK++xU8CGs2grAQ1i5UvMd3aRNDA==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -571,15 +577,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-history": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.3.1.tgz",
-      "integrity": "sha512-HrPkWQmAk08mbHiOcIN4htVq5KJMqI9zSjAqaYQEhV/TugeHfWVpK+xMst/PzuFb14HWgk5gWXjtV5E4SDlw9w==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.3.14.tgz",
+      "integrity": "sha512-77hnNLp0W0FHw8lT7SeqzCgp8bOClfeOAPZdcInu/jPDhVASUGYbtE/0fkLhiaqPH7kyMirNCLif4sF6n4b5vg==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -587,15 +593,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-interaction-manager": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.3.1.tgz",
-      "integrity": "sha512-8h3y5a9tQ1fZlc4mP1/+XKyuHWwcQEm9AujKxy+6f6omtCBzpnKrH95bURgYOzQEBGY7d5C3HvG6JOlh0o1x3A==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.3.14.tgz",
+      "integrity": "sha512-nR0ZxNoTQtGqOHhweFh6QJ+nUJ4S4Ag1wWur6vAUAi8U95HUOfZhOEa0polZo0zR9WmmblGqRWjFM+mVSOoi1w==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -603,15 +609,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-loader": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.3.1.tgz",
-      "integrity": "sha512-NjNmA7TOs3E/zwb9I+YohzyGkxq8y5NUGu0MKgh2g41lZoFvyqTAjFPar+RjEiLX8iiJiwNZswyJsNrytmS3Xg==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.3.14.tgz",
+      "integrity": "sha512-KoJX1MacEWE2DrO1OeZeG/Ehz76//u+ida/xb4r9BfwqAp5TfYlksq09cOvcF8LMW5FY4pbAL+AHKI1Hjz+HNA==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -619,17 +625,17 @@
      }
    },
    "node_modules/@embedpdf/plugin-pan": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-pan/-/plugin-pan-1.3.1.tgz",
-      "integrity": "sha512-lF1gkz/a77G3+Rr8MOefkGnPJ1i5xWnClXm2ZzYAl7PbOScp59/PaP7qeU7eMPC4FHQM81ZhCgVYGXogbaB8ww==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-pan/-/plugin-pan-1.3.14.tgz",
+      "integrity": "sha512-7EG+I5nn8yDCV8pT4x/g5mv7zJli2t3wPrh6Kt8uIpUorPHNb6J0Z67gl0uc/8rEasNzuKOuT0er46Y6/UYLzQ==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-interaction-manager": "1.3.1",
-        "@embedpdf/plugin-viewport": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-interaction-manager": "1.3.14",
+        "@embedpdf/plugin-viewport": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -637,15 +643,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-render": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.3.1.tgz",
-      "integrity": "sha512-c9oH097e1CVUpYF9RgZRfV/7XCJ0pf+svdT1wyM2MbWby06ti20oCwT9wf7BLY0hPQ7+eO3wunr1I1/y3MnVrw==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.3.14.tgz",
+      "integrity": "sha512-IPj7GCQXJBsY++JaU+z7y+FwX5NaDBj4YYV6hsHNtSGf42Y1AdlwJzDYetivG2bA84xmk7KgD1X2Y3eIFBhjwA==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -653,15 +659,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-rotate": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-rotate/-/plugin-rotate-1.3.1.tgz",
-      "integrity": "sha512-mRAlIW7IZAnCyDuYqN13yDc6yoNIYLUB4uYTUAR7vTIt021C8H5jDHk9TmLwcH0tQ8/R3yHuDm/XPAe0zfs81g==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-rotate/-/plugin-rotate-1.3.14.tgz",
+      "integrity": "sha512-OroEm11x/fPPXI9C0X+nm9LOjwaI0MvsToZRH+HpV60/FbQeOJvt6D8wThCDVLK95Na6A+JeYIMEu+Hiix7H+A==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -669,16 +675,16 @@
      }
    },
    "node_modules/@embedpdf/plugin-scroll": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.3.1.tgz",
-      "integrity": "sha512-mDvK3DyBZC8/8pOEdJsWtSjCmV2ZuZJJ6xfspJpsaDVywo1Vq6M55BtKThkhqED6mqbFWTN9rP9cbWG8KDBWVA==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.3.14.tgz",
+      "integrity": "sha512-fQbt7OlRMLQJMuZj/Bzh0qpRxMw1ld5Qe/OTw8N54b/plljnFA52joE7cITl3H03huWWyHS3NKOScbw7f34dog==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-viewport": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-viewport": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -686,16 +692,16 @@
      }
    },
    "node_modules/@embedpdf/plugin-search": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-search/-/plugin-search-1.3.1.tgz",
-      "integrity": "sha512-SLwYPQg1NJWytq2sd4MnWFmRVGgzwbohBedB2kH0ALsvdnoRYqgjR5HqAsKgoRJO/pphQhHlk3L1gLW62r6hqQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-search/-/plugin-search-1.3.14.tgz",
+      "integrity": "sha512-tlZEgR2tG+GSNnh2u1SjCxhUHfTDgcr38sE/xRK1bRLDGPZWlr6Ln7qP7JSWqeYBGni75sGrj0iZqcZbPWyJag==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-loader": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-loader": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -703,17 +709,17 @@
      }
    },
    "node_modules/@embedpdf/plugin-selection": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.3.1.tgz",
-      "integrity": "sha512-yef2XB/zR7zjyeUB3Ul0SbTcXqu5isR0GtINkFwL7bJMok6HpYNDnMXSuo55BaxI0dOCnnCSZfoRkAgosnZ1uQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.3.14.tgz",
+      "integrity": "sha512-EXENuaAsse3rT6cjA1nYzyrNvoy62ojJl28wblCng6zcs3HSlGPemIQZAvaYKPUxoY608M+6nKlcMQ5neRnk/A==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-interaction-manager": "1.3.1",
-        "@embedpdf/plugin-viewport": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-interaction-manager": "1.3.14",
+        "@embedpdf/plugin-viewport": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -721,16 +727,16 @@
      }
    },
    "node_modules/@embedpdf/plugin-spread": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.3.1.tgz",
-      "integrity": "sha512-RJ/kgJsFRdtWlPMXTW1feUSb6WHIvxtNRLgqzX8dlFIoyc4oZex2Vw+URo/VZuWSe/NvCIihQ20rkNAQJMnNMQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.3.14.tgz",
+      "integrity": "sha512-DVlk6tDgUoDRkp2S4Jc3LrRTuf4DPMlph9vywJw5z6Qpbh0vgcMnObg896/S0Eu5FgACNAj0WGcXpLrcrn5b9Q==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-loader": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-loader": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -738,34 +744,35 @@
      }
    },
    "node_modules/@embedpdf/plugin-thumbnail": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-thumbnail/-/plugin-thumbnail-1.3.1.tgz",
-      "integrity": "sha512-xv96ESa7JgD5z+TzcOK18/u0gq3d9v7QPv2wpr0ZhcnwLwf4sH0eUJZIsv7z7DMOpBNz7o7jJbrtxDUdCEHGhg==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-thumbnail/-/plugin-thumbnail-1.3.14.tgz",
+      "integrity": "sha512-cnwb5dG8Jph8XSArys1WFCQ6kK2R5FKoO0B5mDrHFv9Fcm2pKszlmZC/NDoskX4pgNUgSnwhI1X3cP37ebF9Ng==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-render": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-render": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
      }
    },
    "node_modules/@embedpdf/plugin-tiling": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.3.1.tgz",
-      "integrity": "sha512-Q8RF80fb6y9GDAKwvgsu0BsWJlQuhNCtSKWwp3YcZJtIBFm94DVcg0zTgvDmE9/WNOmn4Z1Edt86usmYauHolw==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.3.14.tgz",
+      "integrity": "sha512-SaCTo2LdZwGeE6jCqkwJxvwt8YKbsI3QGxa9S7Ez+5OcBchlhHeTfLQswcErDQ3WH2p8WHtGuucAcOLrVVOm0A==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-render": "1.3.1",
-        "@embedpdf/plugin-scroll": "1.3.1",
-        "@embedpdf/plugin-viewport": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-render": "1.3.14",
+        "@embedpdf/plugin-scroll": "1.3.14",
+        "@embedpdf/plugin-viewport": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -773,15 +780,15 @@
      }
    },
    "node_modules/@embedpdf/plugin-viewport": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.3.1.tgz",
-      "integrity": "sha512-gzosrWL18ZhN175Kxocf/p7uqYBhNHvEuV1CpJQmN7ys48aew6Qq8z7MjAsCnJBANXk/8syNdo3qWwBriyjQNg==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.3.14.tgz",
+      "integrity": "sha512-mfJ7EbbU68eKk6oFvQ4ozGJNpxUxWbjQ5Gm3uuB+Gj5/tWgBocBOX36k/9LgivEEeX7g2S0tOgyErljApmH8Vg==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1"
+        "@embedpdf/models": "1.3.14"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
+        "@embedpdf/core": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -789,19 +796,19 @@
      }
    },
    "node_modules/@embedpdf/plugin-zoom": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-zoom/-/plugin-zoom-1.3.1.tgz",
-      "integrity": "sha512-3GXpgv6XmZiQnjaPbsxblTqUn84ALFiyONh2gwrEU9apB6STT3TQiY0QRindwrUXdQLpCSjRSB9PpDBCtTww7w==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-zoom/-/plugin-zoom-1.3.14.tgz",
+      "integrity": "sha512-/N5tyMk+8OzhObrS3O9yPkcmX8EPiuTo+WaT2QCVSmIUqKnOO4AnKpHJ6Vl0uVhcuXHCMwLucZKyhJ7tRqavwg==",
      "license": "MIT",
      "dependencies": {
-        "@embedpdf/models": "1.3.1",
+        "@embedpdf/models": "1.3.14",
        "hammerjs": "^2.0.8"
      },
      "peerDependencies": {
-        "@embedpdf/core": "1.3.1",
-        "@embedpdf/plugin-interaction-manager": "1.3.1",
-        "@embedpdf/plugin-scroll": "1.3.1",
-        "@embedpdf/plugin-viewport": "1.3.1",
+        "@embedpdf/core": "1.3.14",
+        "@embedpdf/plugin-interaction-manager": "1.3.14",
+        "@embedpdf/plugin-scroll": "1.3.14",
+        "@embedpdf/plugin-viewport": "1.3.14",
        "preact": "^10.26.4",
        "react": ">=16.8.0",
        "react-dom": ">=16.8.0",
@@ -809,9 +816,9 @@
      }
    },
    "node_modules/@embedpdf/utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/utils/-/utils-1.3.1.tgz",
-      "integrity": "sha512-6trYysnggwCCTB2q7cX6tkOTbZJNtt2YYZohPCmh0yaDpkfNSgwDwD0jCLtEU2UZLQoH4+2GvNo+4xe+KAGlIQ==",
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@embedpdf/utils/-/utils-1.3.14.tgz",
+      "integrity": "sha512-gxEJD12nageCMqAjdbicNfDQolXU3nvnV0EX96OdZITRNj0Q1tisutVYoaxcCiJu3vvIEOzipjsAnQOubbFCEA==",
      "license": "MIT",
      "peerDependencies": {
        "preact": "^10.26.4",
@@ -1760,6 +1767,19 @@
        "mlly": "^1.7.4"
      }
    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1995,6 +2015,28 @@
        "react": "^18.x || ^19.x"
      }
    },
+    "node_modules/@maxim_mazurok/gapi.client.discovery-v1": {
+      "version": "0.4.20200806",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.4.20200806.tgz",
+      "integrity": "sha512-Jeo/KZqK39DI6ExXHcJ4lqnn1O/wEqboQ6eQ8WnNpu5eJ7wUnX/C5KazOgs1aRhnIB/dVzDe8wm62nmtkMIoaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
+    "node_modules/@maxim_mazurok/gapi.client.drive-v3": {
+      "version": "0.1.20250930",
+      "resolved": "https://registry.npmjs.org/@maxim_mazurok/gapi.client.drive-v3/-/gapi.client.drive-v3-0.1.20250930.tgz",
+      "integrity": "sha512-zNR7HtaFl2Pvf8Ck2zP8cppUst7ouY2isKn7hrGf6hQ4/0ULsu19qMRSQgRb0HxBYcGjak7kGK4pZI4a2z4CWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/gapi.client": "*",
+        "@types/gapi.client.discovery-v1": "*"
+      }
+    },
    "node_modules/@mui/core-downloads-tracker": {
      "version": "7.3.2",
      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.2.tgz",
@@ -3581,6 +3623,54 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/gapi": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@types/gapi/-/gapi-0.0.47.tgz",
+      "integrity": "sha512-/ZsLuq6BffMgbKMtZyDZ8vwQvTyKhKQ1G2K6VyWCgtHHhfSSXbk4+4JwImZiTjWNXfI2q1ZStAwFFHSkNoTkHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/gapi.client": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client/-/gapi.client-1.0.8.tgz",
+      "integrity": "sha512-qJQUmmumbYym3Amax0S8CVzuSngcXsC1fJdwRS2zeW5lM63zXkw4wJFP+bG0jzgi0R6EsJKoHnGNVTDbOyG1ng==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/gapi.client.discovery-v1": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.discovery-v1/-/gapi.client.discovery-v1-0.0.4.tgz",
+      "integrity": "sha512-uevhRumNE65F5mf2gABLaReOmbFSXONuzFZjNR3dYv6BmkHg+wciubHrfBAsp3554zNo3Dcg6dUAlwMqQfpwjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@maxim_mazurok/gapi.client.discovery-v1": "latest"
+      }
+    },
+    "node_modules/@types/gapi.client.drive-v3": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@types/gapi.client.drive-v3/-/gapi.client.drive-v3-0.0.5.tgz",
+      "integrity": "sha512-yYBxiqMqJVBg4bns4Q28+f2XdJnd3tVA9dxQX1lXMVmzT2B+pZdyCi1u9HLwGveVlookSsAXuqfLfS9KO6MF6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@maxim_mazurok/gapi.client.drive-v3": "latest"
+      }
+    },
+    "node_modules/@types/google.accounts": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@types/google.accounts/-/google.accounts-0.0.18.tgz",
+      "integrity": "sha512-yHaPznll97ZnMJlPABHyeiIlLn3u6gQaUjA5k/O9lrrpgFB9VT10CKPLuKM0qTHMl50uXpW5sIcG+utm8jMOHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/google.picker": {
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/google.picker/-/google.picker-0.0.51.tgz",
+      "integrity": "sha512-z6o2J4PQTcXvlW1rtgQx65d5uEF+rMI1hzrnazKQxBONdEuYAr4AeOSH2KZy12WHPmqMX+aWYyfcZ0uktBBhhA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/http-cache-semantics": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -6415,10 +6505,9 @@
      }
    },
    "node_modules/globals": {
-      "version": "15.15.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
-      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
-      "dev": true,
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
      "license": "MIT",
      "engines": {
        "node": ">=18"
@@ -9905,6 +9994,12 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/signature_pad": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-5.1.1.tgz",
+      "integrity": "sha512-BT5JJygS5BS0oV+tffPRorIud6q17bM7v/1LdQwd0o6mTqGoI25yY1NjSL99OqkekWltS4uon6p52Y8j1Zqu7g==",
+      "license": "MIT"
+    },
    "node_modules/slash": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
@@ -6,24 +6,24 @@
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
-    "@embedpdf/core": "^1.3.1",
-    "@embedpdf/engines": "^1.3.1",
-    "@embedpdf/plugin-annotation": "^1.3.1",
-    "@embedpdf/plugin-export": "^1.3.1",
-    "@embedpdf/plugin-history": "^1.3.1",
-    "@embedpdf/plugin-interaction-manager": "^1.3.1",
-    "@embedpdf/plugin-loader": "^1.3.1",
-    "@embedpdf/plugin-pan": "^1.3.1",
-    "@embedpdf/plugin-render": "^1.3.1",
-    "@embedpdf/plugin-rotate": "^1.3.1",
-    "@embedpdf/plugin-scroll": "^1.3.1",
-    "@embedpdf/plugin-search": "^1.3.1",
-    "@embedpdf/plugin-selection": "^1.3.1",
-    "@embedpdf/plugin-spread": "^1.3.1",
-    "@embedpdf/plugin-thumbnail": "^1.3.1",
-    "@embedpdf/plugin-tiling": "^1.3.1",
-    "@embedpdf/plugin-viewport": "^1.3.1",
-    "@embedpdf/plugin-zoom": "^1.3.1",
+    "@embedpdf/core": "^1.3.14",
+    "@embedpdf/engines": "^1.3.14",
+    "@embedpdf/plugin-annotation": "^1.3.14",
+    "@embedpdf/plugin-export": "^1.3.14",
+    "@embedpdf/plugin-history": "^1.3.14",
+    "@embedpdf/plugin-interaction-manager": "^1.3.14",
+    "@embedpdf/plugin-loader": "^1.3.14",
+    "@embedpdf/plugin-pan": "^1.3.14",
+    "@embedpdf/plugin-render": "^1.3.14",
+    "@embedpdf/plugin-rotate": "^1.3.14",
+    "@embedpdf/plugin-scroll": "^1.3.14",
+    "@embedpdf/plugin-search": "^1.3.14",
+    "@embedpdf/plugin-selection": "^1.3.14",
+    "@embedpdf/plugin-spread": "^1.3.14",
+    "@embedpdf/plugin-thumbnail": "^1.3.14",
+    "@embedpdf/plugin-tiling": "^1.3.14",
+    "@embedpdf/plugin-viewport": "^1.3.14",
+    "@embedpdf/plugin-zoom": "^1.3.14",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@iconify/react": "^6.0.2",
@@ -37,6 +37,7 @@
    "@tanstack/react-virtual": "^3.13.12",
    "autoprefixer": "^10.4.21",
    "axios": "^1.12.2",
+    "globals": "^16.4.0",
    "i18next": "^25.5.2",
    "i18next-browser-languagedetector": "^8.2.0",
    "i18next-http-backend": "^3.0.2",
@@ -49,6 +50,7 @@
    "react-dom": "^19.1.1",
    "react-i18next": "^15.7.3",
    "react-router-dom": "^7.9.1",
+    "signature_pad": "^5.0.4",
    "tailwindcss": "^4.1.13",
    "web-vitals": "^5.1.0"
  },
@@ -104,6 +106,10 @@
    "@testing-library/jest-dom": "^6.8.0",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^14.6.1",
+    "@types/gapi": "^0.0.47",
+    "@types/gapi.client.drive-v3": "^0.0.5",
+    "@types/google.accounts": "^0.0.18",
+    "@types/google.picker": "^0.0.51",
    "@types/node": "^24.5.2",
    "@types/react": "^19.1.13",
    "@types/react-dom": "^19.1.9",
@@ -1,9 +1,27 @@
 {
-  "unsavedChanges": "You have unsaved changes to your PDF. What would you like to do?",
+  "toolPanel": {
+    "modePrompt": {
+      "title": "Choose how you browse tools",
+      "description": "Preview both layouts and decide how you want to explore Stirling PDF tools.",
+      "sidebarTitle": "Sidebar mode",
+      "sidebarDescription": "Keep tools alongside your workspace for quick switching.",
+      "recommended": "Recommended",
+      "chooseSidebar": "Use sidebar mode",
+      "fullscreenTitle": "Fullscreen mode - (legacy)",
+      "fullscreenDescription": "Browse every tool in a catalogue that covers the workspace until you pick one.",
+      "chooseFullscreen": "Use fullscreen mode",
+      "dismiss": "Maybe later"
+    },
+    "fullscreen": {
+      "showDetails": "Show Details"
+    }
+  },
+  "unsavedChanges": "You have unsaved changes to your PDF.",
+  "areYouSure": "Are you sure you want to leave?",
  "unsavedChangesTitle": "Unsaved Changes",
  "keepWorking": "Keep Working",
-  "discardChanges": "Discard Changes",
-  "applyAndContinue": "Apply & Continue",
+  "discardChanges": "Discard & Leave",
+  "applyAndContinue": "Save & Leave",
  "exportAndContinue": "Export & Continue",
  "language": {
    "direction": "ltr"
@@ -65,6 +83,8 @@
  "save": "Save",
  "saveToBrowser": "Save to Browser",
  "download": "Download",
+  "pin": "Pin",
+  "unpin": "Unpin",
  "undoOperationTooltip": "Click to undo the last operation and restore the original files",
  "undo": "Undo",
  "moreOptions": "More Options",
@@ -255,6 +275,33 @@
    "cacheInputs": {
      "name": "Save form inputs",
      "help": "Enable to store previously used inputs for future runs"
+    },
+    "general": {
+      "title": "General",
+      "description": "Configure general application preferences.",
+      "autoUnzip": "Auto-unzip API responses",
+      "autoUnzipDescription": "Automatically extract files from ZIP responses",
+      "autoUnzipTooltip": "Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.",
+      "autoUnzipFileLimit": "Auto-unzip file limit",
+      "autoUnzipFileLimitDescription": "Maximum number of files to extract from ZIP",
+      "autoUnzipFileLimitTooltip": "Only unzip if the ZIP contains this many files or fewer. Set higher to extract larger ZIPs."
+    },
+    "hotkeys": {
+      "title": "Keyboard Shortcuts",
+      "description": "Hover a tool to see its shortcut or customise it below. Click \"Change shortcut\" and press a new key combination. Press Esc to cancel.",
+      "errorModifier": {
+        "mac": "Include ⌘ (Command), ⌥ (Option), or another modifier in your shortcut.",
+        "windows": "Include Ctrl, Alt, or another modifier in your shortcut."
+      },
+      "errorConflict": "Shortcut already used by {{tool}}.",
+      "none": "Not assigned",
+      "customBadge": "Custom",
+      "defaultLabel": "Default: {{shortcut}}",
+      "capturing": "Press keys… (Esc to cancel)",
+      "change": "Change shortcut",
+      "reset": "Reset",
+      "shortcut": "Shortcut",
+      "noShortcut": "No shortcut set"
    }
  },
  "changeCreds": {
@@ -531,7 +578,7 @@
    "adjustContrast": {
      "tags": "contrast,brightness,saturation",
      "title": "Adjust Colours/Contrast",
-      "desc": "Adjust Contrast, Saturation and Brightness of a PDF"
+      "desc": "Adjust Colors/Contrast, Saturation and Brightness of a PDF"
    },
    "crop": {
      "tags": "trim,cut,resize",
@@ -568,11 +615,6 @@
      "title": "Redact",
      "desc": "Redacts (blacks out) a PDF based on selected text, drawn shapes and/or selected page(s)"
    },
-    "overlayPdfs": {
-      "tags": "overlay,combine,stack",
-      "title": "Overlay PDFs",
-      "desc": "Overlays PDFs on-top of another PDF"
-    },
    "splitBySections": {
      "tags": "split,sections,divide",
      "title": "Split PDF by Sections",
@@ -868,6 +910,7 @@
  "rotate": {
    "title": "Rotate PDF",
    "submit": "Apply Rotation",
+    "selectRotation":  "Select Rotation Angle (Clockwise)",
    "error": {
      "failed": "An error occurred while rotating the PDF."
    },
@@ -1788,8 +1831,16 @@
      "placeholder": "Enter your full name"
    },
    "instructions": {
-      "title": "How to add signature"
+      "title": "How to add signature",
+      "canvas": "After drawing your signature in the canvas, close the modal then click anywhere on the PDF to place it.",
+      "image": "After uploading your signature image above, click anywhere on the PDF to place it.",
+      "text": "After entering your name above, click anywhere on the PDF to place your signature."
    },
+    "mode": {
+      "move": "Move Signature",
+      "place": "Place Signature"
+    },
+    "updateAndPlace": "Update and Place",
    "activate": "Activate Signature Placement",
    "deactivate": "Stop Placing Signatures",
    "results": {
@@ -2511,11 +2562,15 @@
  "overlay-pdfs": {
    "tags": "Overlay",
    "header": "Overlay PDF Files",
+    "title": "Overlay PDFs",
+    "desc": "Overlay one PDF on top of another",
    "baseFile": {
      "label": "Select Base PDF File"
    },
    "overlayFiles": {
-      "label": "Select Overlay PDF Files"
+      "label": "Select Overlay PDF Files",
+      "placeholder": "Choose PDF(s)...",
+      "addMore": "Add more PDFs..."
    },
    "mode": {
      "label": "Select Overlay Mode",
@@ -2525,14 +2580,49 @@
    },
    "counts": {
      "label": "Overlay Counts (for Fixed Repeat Mode)",
-      "placeholder": "Enter comma-separated counts (e.g., 2,3,1)"
+      "placeholder": "Enter comma-separated counts (e.g., 2,3,1)",
+      "item": "Count for file"
    },
    "position": {
      "label": "Select Overlay Position",
      "foreground": "Foreground",
      "background": "Background"
    },
-    "submit": "Submit"
+    "submit": "Submit",
+    "settings": {
+      "title": "Settings"
+    },
+    "results": {
+      "title": "Overlay Results"
+    },
+    "tooltip": {
+      "header": {
+        "title": "Overlay PDFs Overview"
+      },
+      "description": {
+        "title": "Description",
+        "text": "Combine a base PDF with one or more overlay PDFs. Overlays can be applied page-by-page in different modes and placed in the foreground or background."
+      },
+      "mode": {
+        "title": "Overlay Mode",
+        "text": "Choose how to distribute overlay pages across the base PDF pages.",
+        "sequential": "Sequential Overlay: Use pages from the first overlay PDF until it ends, then move to the next.",
+        "interleaved": "Interleaved Overlay: Take one page from each overlay in turn.",
+        "fixedRepeat": "Fixed Repeat Overlay: Take a set number of pages from each overlay before moving to the next. Use Counts to set the numbers."
+      },
+      "position": {
+        "title": "Overlay Position",
+        "text": "Foreground places the overlay on top of the page. Background places it behind."
+      },
+      "overlayFiles": {
+        "title": "Overlay Files",
+        "text": "Select one or more PDFs to overlay on the base. The order of these files affects how pages are applied in Sequential and Fixed Repeat modes."
+      },
+      "counts": {
+        "title": "Counts (Fixed Repeat only)",
+        "text": "Provide a positive number for each overlay file showing how many pages to take before moving to the next. Required when mode is Fixed Repeat."
+      }
+    }
  },
  "split-by-sections": {
    "tags": "Section Split, Divide, Customize,Customise",
@@ -2774,8 +2864,9 @@
    "submit": "Sanitize PDF"
  },
  "adjustContrast": {
-    "title": "Adjust Contrast",
-    "header": "Adjust Contrast",
+    "title": "Adjust Colors/Contrast",
+    "header": "Adjust Colors/Contrast",
+    "basic": "Basic Adjustments",
    "contrast": "Contrast:",
    "brightness": "Brightness:",
    "saturation": "Saturation:",
@@ -3062,7 +3153,12 @@
    "panMode": "Pan Mode",
    "rotateLeft": "Rotate Left",
    "rotateRight": "Rotate Right",
-    "toggleSidebar": "Toggle Sidebar"
+    "toggleSidebar": "Toggle Sidebar",
+    "exportSelected": "Export Selected Pages",
+    "toggleAnnotations": "Toggle Annotations Visibility",
+    "annotationMode": "Toggle Annotation Mode",
+    "draw": "Draw",
+    "save": "Save"
  },
  "search": {
    "title": "Search PDF",
@@ -3104,6 +3200,7 @@
    "automate": "Automate",
    "files": "Files",
    "activity": "Activity",
+    "account": "Account",
    "config": "Config",
    "allTools": "All Tools"
  },
@@ -3131,6 +3228,9 @@
    "addFiles": "Add Files",
    "dragFilesInOrClick": "Drag files in or click \"Add Files\" to browse"
  },
+  "fileEditor": {
+    "addFiles": "Add Files"
+  },
  "fileManager": {
    "title": "Upload PDF Files",
    "subtitle": "Add files to your storage for easy access across tools",
@@ -3159,6 +3259,7 @@
    "lastModified": "Last Modified",
    "toolChain": "Tools Applied",
    "restore": "Restore",
+    "unzip": "Unzip",
    "searchFiles": "Search files...",
    "recent": "Recent",
    "localFiles": "Local Files",
@@ -3166,7 +3267,6 @@
    "googleDriveShort": "Drive",
    "myFiles": "My Files",
    "noRecentFiles": "No recent files found",
-    "dropFilesHint": "Drop files here to upload",
    "googleDriveNotAvailable": "Google Drive integration not available",
    "openFiles": "Open Files",
    "openFile": "Open File",
@@ -2,6 +2,23 @@
  "language": {
    "direction": "ltr"
  },
+  "toolPanel": {
+    "modePrompt": {
+      "title": "Choose how you browse tools",
+      "description": "Preview both layouts and decide how you want to explore Stirling PDF tools.",
+      "sidebarTitle": "Sidebar mode",
+      "sidebarDescription": "Keep tools alongside your workspace for quick switching.",
+      "recommended": "Recommended",
+      "chooseSidebar": "Use sidebar mode",
+      "fullscreenTitle": "Fullscreen mode - (legacy)",
+      "fullscreenDescription": "Browse every tool in a catalogue that covers the workspace until you pick one.",
+      "chooseFullscreen": "Use fullscreen mode",
+      "dismiss": "Maybe later"
+    },
+    "fullscreen": {
+      "showDetails": "Show Details"
+    }
+  },
  "addPageNumbers": {
    "fontSize": "Font Size",
    "fontName": "Font Name",
@@ -562,7 +579,7 @@
    "adjustContrast": {
      "tags": "contrast,brightness,saturation",
      "title": "Adjust Colors/Contrast",
-      "desc": "Adjust Contrast, Saturation and Brightness of a PDF"
+      "desc": "Adjust Colors/Contrast, Saturation and Brightness of a PDF"
    },
    "crop": {
      "tags": "trim,cut,resize",
@@ -1521,11 +1538,15 @@
  "overlay-pdfs": {
    "tags": "Overlay",
    "header": "Overlay PDF Files",
+    "title": "Overlay PDFs",
+    "desc": "Overlay one PDF on top of another",
    "baseFile": {
      "label": "Select Base PDF File"
    },
    "overlayFiles": {
-      "label": "Select Overlay PDF Files"
+      "label": "Select Overlay PDF Files",
+      "placeholder": "Choose PDF(s)...",
+      "addMore": "Add more PDFs..."
    },
    "mode": {
      "label": "Select Overlay Mode",
@@ -1535,14 +1556,49 @@
    },
    "counts": {
      "label": "Overlay Counts (for Fixed Repeat Mode)",
-      "placeholder": "Enter comma-separated counts (e.g., 2,3,1)"
+      "placeholder": "Enter comma-separated counts (e.g., 2,3,1)",
+      "item": "Count for file"
    },
    "position": {
      "label": "Select Overlay Position",
      "foreground": "Foreground",
      "background": "Background"
    },
-    "submit": "Submit"
+    "submit": "Submit",
+    "settings": {
+      "title": "Settings"
+    },
+    "results": {
+      "title": "Overlay Results"
+    },
+    "tooltip": {
+      "header": {
+        "title": "Overlay PDFs Overview"
+      },
+      "description": {
+        "title": "Description",
+        "text": "Combine a base PDF with one or more overlay PDFs. Overlays can be applied page-by-page in different modes and placed in the foreground or background."
+      },
+      "mode": {
+        "title": "Overlay Mode",
+        "text": "Choose how to distribute overlay pages across the base PDF pages.",
+        "sequential": "Sequential Overlay: Use pages from the first overlay PDF until it ends, then move to the next.",
+        "interleaved": "Interleaved Overlay: Take one page from each overlay in turn.",
+        "fixedRepeat": "Fixed Repeat Overlay: Take a set number of pages from each overlay before moving to the next. Use Counts to set the numbers."
+      },
+      "position": {
+        "title": "Overlay Position",
+        "text": "Foreground places the overlay on top of the page. Background places it behind."
+      },
+      "overlayFiles": {
+        "title": "Overlay Files",
+        "text": "Select one or more PDFs to overlay on the base. The order of these files affects how pages are applied in Sequential and Fixed Repeat modes."
+      },
+      "counts": {
+        "title": "Counts (Fixed Repeat only)",
+        "text": "Provide a positive number for each overlay file showing how many pages to take before moving to the next. Required when mode is Fixed Repeat."
+      }
+    }
  },
  "split-by-sections": {
    "tags": "Section Split, Divide, Customize",
@@ -1712,8 +1768,9 @@
    "submit": "Sanitize PDF"
  },
  "adjustContrast": {
-    "title": "Adjust Contrast",
-    "header": "Adjust Contrast",
+    "title": "Adjust Colors/Contrast",
+    "header": "Adjust Colors/Contrast",
+    "basic": "Basic Adjustments",
    "contrast": "Contrast:",
    "brightness": "Brightness:",
    "saturation": "Saturation:",
@@ -38,7 +38,7 @@
  "save": "Guardar",
  "saveToBrowser": "Guardar en el navegador",
  "close": "Cerrar",
-  "filesSelected": "archivos seleccionados",
+  "filesSelected": "{{count}} archivos seleccionados",
  "noFavourites": "No se agregaron favoritos",
  "downloadComplete": "Descarga completada",
  "bored": "¿Aburrido de esperar?",
@@ -4,7 +4,9 @@ import { FileContextProvider } from "./contexts/FileContext";
 import { NavigationProvider } from "./contexts/NavigationContext";
 import { FilesModalProvider } from "./contexts/FilesModalContext";
 import { ToolWorkflowProvider } from "./contexts/ToolWorkflowContext";
+import { HotkeyProvider } from "./contexts/HotkeyContext";
 import { SidebarProvider } from "./contexts/SidebarContext";
+import { PreferencesProvider } from "./contexts/PreferencesContext";
 import ErrorBoundary from "./components/shared/ErrorBoundary";
 import HomePage from "./pages/HomePage";

@@ -40,23 +42,27 @@ export default function App() {
    <Suspense fallback={<LoadingFallback />}>
      <RainbowThemeProvider>
        <ErrorBoundary>
-          <FileContextProvider enableUrlSync={true} enablePersistence={true}>
-            <NavigationProvider>
-              <FilesModalProvider>
-                <ToolWorkflowProvider>
-                  <SidebarProvider>
-                    <ViewerProvider>
-                      <SignatureProvider>
-                      <RightRailProvider>
-                            <HomePage />
-                          </RightRailProvider>
-                      </SignatureProvider>
-                    </ViewerProvider>
-                  </SidebarProvider>
-                </ToolWorkflowProvider>
-              </FilesModalProvider>
-            </NavigationProvider>
-          </FileContextProvider>
+          <PreferencesProvider>
+            <FileContextProvider enableUrlSync={true} enablePersistence={true}>
+              <NavigationProvider>
+                <FilesModalProvider>
+                  <ToolWorkflowProvider>
+                    <HotkeyProvider>
+                      <SidebarProvider>
+                        <ViewerProvider>
+                          <SignatureProvider>
+                            <RightRailProvider>
+                              <HomePage />
+                            </RightRailProvider>
+                          </SignatureProvider>
+                        </ViewerProvider>
+                      </SidebarProvider>
+                    </HotkeyProvider>
+                  </ToolWorkflowProvider>
+                </FilesModalProvider>
+              </NavigationProvider>
+            </FileContextProvider>
+          </PreferencesProvider>
        </ErrorBoundary>
      </RainbowThemeProvider>
    </Suspense>
@@ -9,6 +9,9 @@ import MobileLayout from './fileManager/MobileLayout';
 import DesktopLayout from './fileManager/DesktopLayout';
 import DragOverlay from './fileManager/DragOverlay';
 import { FileManagerProvider } from '../contexts/FileManagerContext';
+import { Z_INDEX_FILE_MANAGER_MODAL } from '../styles/zIndex';
+import { isGoogleDriveConfigured } from '../services/googleDrivePickerService';
+import { loadScript } from '../utils/scriptLoader';

 interface FileManagerProps {
  selectedTool?: Tool | null;
@@ -20,7 +23,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
  const [isDragging, setIsDragging] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

-  const { loadRecentFiles, handleRemoveFile } = useFileManager();
+  const { loadRecentFiles, handleRemoveFile, loading } = useFileManager();

  // File management handlers
  const isFileSupported = useCallback((fileName: string) => {
@@ -84,6 +87,30 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
    };
  }, []);

+  // Preload Google Drive scripts if configured
+
+  useEffect(() => {
+    if (isGoogleDriveConfigured()) {
+      // Load scripts in parallel without blocking
+      Promise.all([
+        loadScript({
+          src: 'https://apis.google.com/js/api.js',
+          id: 'gapi-script',
+          async: true,
+          defer: true,
+        }),
+        loadScript({
+          src: 'https://accounts.google.com/gsi/client',
+          id: 'gis-script',
+          async: true,
+          defer: true,
+        }),
+      ]).catch((error) => {
+        console.warn('Failed to preload Google Drive scripts:', error);
+      });
+    }
+  }, []);
+
  // Modal size constants for consistent scaling
  const modalHeight = '80vh';
  const modalWidth = isMobile ? '100%' : '80vw';
@@ -100,6 +127,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
      radius="md"
      className="overflow-hidden p-0"
      withCloseButton={false}
+      zIndex={Z_INDEX_FILE_MANAGER_MODAL}
      styles={{
        content: {
          position: 'relative',
@@ -123,7 +151,6 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
          onDrop={handleNewFileUpload}
          onDragEnter={() => setIsDragging(true)}
          onDragLeave={() => setIsDragging(false)}
-          accept={{}}
          multiple={true}
          activateOnClick={false}
          style={{
@@ -147,6 +174,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
            onFileRemove={handleRemoveFileByIndex}
            modalHeight={modalHeight}
            refreshRecentFiles={refreshRecentFiles}
+            isLoading={loading}
          >
            {isMobile ? <MobileLayout /> : <DesktopLayout />}
          </FileManagerProvider>
@@ -1,7 +1,8 @@
-import React, { useRef, useState, useCallback } from 'react';
-import { Paper, Group, Button, Modal, Stack, Text } from '@mantine/core';
+import React, { useRef, useState } from 'react';
+import { Paper, Button, Modal, Stack, Text, Popover, ColorPicker as MantineColorPicker } from '@mantine/core';
 import { ColorSwatchButton } from './ColorPicker';
 import PenSizeSelector from '../../tools/sign/PenSizeSelector';
+import SignaturePad from 'signature_pad';

 interface DrawingCanvasProps {
  selectedColor: string;
@@ -11,6 +12,7 @@ interface DrawingCanvasProps {
  onPenSizeChange: (size: number) => void;
  onPenSizeInputChange: (input: string) => void;
  onSignatureDataChange: (data: string | null) => void;
+  onDrawingComplete?: () => void;
  disabled?: boolean;
  width?: number;
  height?: number;
@@ -27,411 +29,253 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
  onPenSizeChange,
  onPenSizeInputChange,
  onSignatureDataChange,
+  onDrawingComplete,
  disabled = false,
  width = 400,
  height = 150,
-  modalWidth = 800,
-  modalHeight = 400,
-  additionalButtons
 }) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
  const modalCanvasRef = useRef<HTMLCanvasElement>(null);
-  const visibleModalCanvasRef = useRef<HTMLCanvasElement>(null);
+  const padRef = useRef<SignaturePad | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);

-  const [isDrawing, setIsDrawing] = useState(false);
-  const [isModalDrawing, setIsModalDrawing] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const initPad = (canvas: HTMLCanvasElement) => {
+    if (!padRef.current) {
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;

-  // Drawing functions for main canvas
-  const startDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!canvasRef.current || disabled) return;
-
-    setIsDrawing(true);
-    const rect = canvasRef.current.getBoundingClientRect();
-    const scaleX = canvasRef.current.width / rect.width;
-    const scaleY = canvasRef.current.height / rect.height;
-    const x = (e.clientX - rect.left) * scaleX;
-    const y = (e.clientY - rect.top) * scaleY;
-
-    const ctx = canvasRef.current.getContext('2d');
-    if (ctx) {
-      ctx.strokeStyle = selectedColor;
-      ctx.lineWidth = penSize;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-      ctx.beginPath();
-      ctx.moveTo(x, y);
+      padRef.current = new SignaturePad(canvas, {
+        penColor: selectedColor,
+        minWidth: penSize * 0.5,
+        maxWidth: penSize * 2.5,
+        throttle: 10,
+        minDistance: 5,
+        velocityFilterWeight: 0.7,
+      });
    }
-  }, [disabled, selectedColor, penSize]);
+  };

-  const draw = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isDrawing || !canvasRef.current || disabled) return;
-
-    const rect = canvasRef.current.getBoundingClientRect();
-    const scaleX = canvasRef.current.width / rect.width;
-    const scaleY = canvasRef.current.height / rect.height;
-    const x = (e.clientX - rect.left) * scaleX;
-    const y = (e.clientY - rect.top) * scaleY;
-
-    const ctx = canvasRef.current.getContext('2d');
-    if (ctx) {
-      ctx.lineTo(x, y);
-      ctx.stroke();
+  const openModal = () => {
+    // Clear pad ref so it reinitializes
+    if (padRef.current) {
+      padRef.current.off();
+      padRef.current = null;
    }
-  }, [isDrawing, disabled]);
+    setModalOpen(true);
+  };

-  const stopDrawing = useCallback(() => {
-    if (!isDrawing || disabled) return;
+  const trimCanvas = (canvas: HTMLCanvasElement): string => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return canvas.toDataURL('image/png');

-    setIsDrawing(false);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const pixels = imageData.data;

-    // Save canvas as signature data
-    if (canvasRef.current) {
-      const dataURL = canvasRef.current.toDataURL('image/png');
-      onSignatureDataChange(dataURL);
-    }
-  }, [isDrawing, disabled, onSignatureDataChange]);
+    let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;

-  // Modal canvas drawing functions
-  const startModalDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!visibleModalCanvasRef.current || !modalCanvasRef.current) return;
-
-    setIsModalDrawing(true);
-    const rect = visibleModalCanvasRef.current.getBoundingClientRect();
-    const scaleX = visibleModalCanvasRef.current.width / rect.width;
-    const scaleY = visibleModalCanvasRef.current.height / rect.height;
-    const x = (e.clientX - rect.left) * scaleX;
-    const y = (e.clientY - rect.top) * scaleY;
-
-    // Draw on both the visible modal canvas and hidden canvas
-    const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
-    const hiddenCtx = modalCanvasRef.current.getContext('2d');
-
-    [visibleCtx, hiddenCtx].forEach(ctx => {
-      if (ctx) {
-        ctx.strokeStyle = selectedColor;
-        ctx.lineWidth = penSize;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        ctx.beginPath();
-        ctx.moveTo(x, y);
-      }
-    });
-  }, [selectedColor, penSize]);
-
-  const drawModal = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!isModalDrawing || !visibleModalCanvasRef.current || !modalCanvasRef.current) return;
-
-    const rect = visibleModalCanvasRef.current.getBoundingClientRect();
-    const scaleX = visibleModalCanvasRef.current.width / rect.width;
-    const scaleY = visibleModalCanvasRef.current.height / rect.height;
-    const x = (e.clientX - rect.left) * scaleX;
-    const y = (e.clientY - rect.top) * scaleY;
-
-    // Draw on both canvases
-    const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
-    const hiddenCtx = modalCanvasRef.current.getContext('2d');
-
-    [visibleCtx, hiddenCtx].forEach(ctx => {
-      if (ctx) {
-        ctx.lineTo(x, y);
-        ctx.stroke();
-      }
-    });
-  }, [isModalDrawing]);
-
-  const stopModalDrawing = useCallback(() => {
-    if (!isModalDrawing) return;
-    setIsModalDrawing(false);
-
-    // Sync the canvases and update signature data (only when drawing stops)
-    if (modalCanvasRef.current) {
-      const dataURL = modalCanvasRef.current.toDataURL('image/png');
-      onSignatureDataChange(dataURL);
-
-      // Also update the small canvas display
-      if (canvasRef.current) {
-        const smallCtx = canvasRef.current.getContext('2d');
-        if (smallCtx) {
-          const img = new Image();
-          img.onload = () => {
-            smallCtx.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);
-            smallCtx.drawImage(img, 0, 0, canvasRef.current!.width, canvasRef.current!.height);
-          };
-          img.src = dataURL;
+    // Find bounds of non-transparent pixels
+    for (let y = 0; y < canvas.height; y++) {
+      for (let x = 0; x < canvas.width; x++) {
+        const alpha = pixels[(y * canvas.width + x) * 4 + 3];
+        if (alpha > 0) {
+          if (x < minX) minX = x;
+          if (x > maxX) maxX = x;
+          if (y < minY) minY = y;
+          if (y > maxY) maxY = y;
        }
      }
    }
-  }, [isModalDrawing]);

-  // Clear canvas functions
-  const clearCanvas = useCallback(() => {
-    if (!canvasRef.current || disabled) return;
+    const trimWidth = maxX - minX + 1;
+    const trimHeight = maxY - minY + 1;

-    const ctx = canvasRef.current.getContext('2d');
-    if (ctx) {
-      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-
-      // Also clear the modal canvas if it exists
-      if (modalCanvasRef.current) {
-        const modalCtx = modalCanvasRef.current.getContext('2d');
-        if (modalCtx) {
-          modalCtx.clearRect(0, 0, modalCanvasRef.current.width, modalCanvasRef.current.height);
-        }
-      }
-
-      onSignatureDataChange(null);
-    }
-  }, [disabled]);
-
-  const clearModalCanvas = useCallback(() => {
-    // Clear both modal canvases (visible and hidden)
-    if (modalCanvasRef.current) {
-      const hiddenCtx = modalCanvasRef.current.getContext('2d');
-      if (hiddenCtx) {
-        hiddenCtx.clearRect(0, 0, modalCanvasRef.current.width, modalCanvasRef.current.height);
-      }
+    // Create trimmed canvas
+    const trimmedCanvas = document.createElement('canvas');
+    trimmedCanvas.width = trimWidth;
+    trimmedCanvas.height = trimHeight;
+    const trimmedCtx = trimmedCanvas.getContext('2d');
+    if (trimmedCtx) {
+      trimmedCtx.drawImage(canvas, minX, minY, trimWidth, trimHeight, 0, 0, trimWidth, trimHeight);
    }

-    if (visibleModalCanvasRef.current) {
-      const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
-      if (visibleCtx) {
-        visibleCtx.clearRect(0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
-      }
-    }
+    return trimmedCanvas.toDataURL('image/png');
+  };

-    // Also clear the main canvas and signature data
-    if (canvasRef.current) {
-      const mainCtx = canvasRef.current.getContext('2d');
-      if (mainCtx) {
-        mainCtx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+  const closeModal = () => {
+    if (padRef.current && !padRef.current.isEmpty()) {
+      const canvas = modalCanvasRef.current;
+      if (canvas) {
+        const trimmedPng = trimCanvas(canvas);
+        onSignatureDataChange(trimmedPng);

-    onSignatureDataChange(null);
-  }, []);
-
-  const saveModalSignature = useCallback(() => {
-    if (!modalCanvasRef.current) return;
-
-    const dataURL = modalCanvasRef.current.toDataURL('image/png');
-    onSignatureDataChange(dataURL);
-
-    // Copy to small canvas for display
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext('2d');
-      if (ctx) {
+        // Update preview canvas with proper aspect ratio
        const img = new Image();
        img.onload = () => {
-          ctx.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);
-          ctx.drawImage(img, 0, 0, canvasRef.current!.width, canvasRef.current!.height);
+          if (previewCanvasRef.current) {
+            const ctx = previewCanvasRef.current.getContext('2d');
+            if (ctx) {
+              ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
+
+              // Calculate scaling to fit within preview canvas while maintaining aspect ratio
+              const scale = Math.min(
+                previewCanvasRef.current.width / img.width,
+                previewCanvasRef.current.height / img.height
+              );
+              const scaledWidth = img.width * scale;
+              const scaledHeight = img.height * scale;
+              const x = (previewCanvasRef.current.width - scaledWidth) / 2;
+              const y = (previewCanvasRef.current.height - scaledHeight) / 2;
+
+              ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+            }
+          }
        };
-        img.src = dataURL;
-      }
-    }
+        img.src = trimmedPng;

-    setIsModalOpen(false);
-  }, []);
-
-  const openModal = useCallback(() => {
-    setIsModalOpen(true);
-    // Copy content to modal canvas after a brief delay
-    setTimeout(() => {
-      if (visibleModalCanvasRef.current && modalCanvasRef.current) {
-        const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
-        if (visibleCtx) {
-          visibleCtx.strokeStyle = selectedColor;
-          visibleCtx.lineWidth = penSize;
-          visibleCtx.lineCap = 'round';
-          visibleCtx.lineJoin = 'round';
-          visibleCtx.clearRect(0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
-          visibleCtx.drawImage(modalCanvasRef.current, 0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
+        if (onDrawingComplete) {
+          onDrawingComplete();
        }
      }
-    }, 300);
-  }, [selectedColor, penSize]);
+    }
+    if (padRef.current) {
+      padRef.current.off();
+      padRef.current = null;
+    }
+    setModalOpen(false);
+  };

-  // Initialize canvas settings whenever color or pen size changes
-  React.useEffect(() => {
-    const updateCanvas = (canvas: HTMLCanvasElement | null) => {
-      if (!canvas) return;
-      const ctx = canvas.getContext('2d');
+  const clear = () => {
+    if (padRef.current) {
+      padRef.current.clear();
+    }
+    if (previewCanvasRef.current) {
+      const ctx = previewCanvasRef.current.getContext('2d');
      if (ctx) {
-        ctx.strokeStyle = selectedColor;
-        ctx.lineWidth = penSize;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
+        ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
      }
-    };
+    }
+    onSignatureDataChange(null);
+  };

-    updateCanvas(canvasRef.current);
-    updateCanvas(modalCanvasRef.current);
-    updateCanvas(visibleModalCanvasRef.current);
-  }, [selectedColor, penSize]);
+  const updatePenColor = (color: string) => {
+    if (padRef.current) {
+      padRef.current.penColor = color;
+    }
+  };
+
+  const updatePenSize = (size: number) => {
+    if (padRef.current) {
+      padRef.current.minWidth = size * 0.8;
+      padRef.current.maxWidth = size * 1.2;
+    }
+  };

  return (
    <>
      <Paper withBorder p="md">
        <Stack gap="sm">
-          <Group justify="space-between">
-            <Text fw={500}>Draw your signature</Text>
-            <Group gap="lg">
-              <div>
-                <Text size="sm" fw={500} mb="xs" ta="center">Color</Text>
-                <Group justify="center">
-                  <ColorSwatchButton
-                    color={selectedColor}
-                    onClick={onColorSwatchClick}
-                  />
-                </Group>
-              </div>
-              <div>
-                <Text size="sm" fw={500} mb="xs">Pen Size</Text>
-                <PenSizeSelector
-                  value={penSize}
-                  inputValue={penSizeInput}
-                  onValueChange={onPenSizeChange}
-                  onInputChange={onPenSizeInputChange}
-                  disabled={disabled}
-                  placeholder="Size"
-                  size="compact-sm"
-                  style={{ width: '60px' }}
-                />
-              </div>
-              <div style={{ paddingTop: '24px' }}>
-                <Button
-                  variant="light"
-                  size="compact-sm"
-                  onClick={openModal}
-                  disabled={disabled}
-                >
-                  Expand
-                </Button>
-              </div>
-            </Group>
-          </Group>
+          <Text fw={500}>Draw your signature</Text>
          <canvas
-            ref={canvasRef}
+            ref={previewCanvasRef}
            width={width}
            height={height}
            style={{
              border: '1px solid #ccc',
              borderRadius: '4px',
-              cursor: disabled ? 'default' : 'crosshair',
+              cursor: disabled ? 'default' : 'pointer',
              backgroundColor: '#ffffff',
              width: '100%',
            }}
-            onMouseDown={startDrawing}
-            onMouseMove={draw}
-            onMouseUp={stopDrawing}
-            onMouseLeave={stopDrawing}
+            onClick={disabled ? undefined : openModal}
          />
-          <Group justify="space-between">
-            <div>
-              {additionalButtons}
-            </div>
-            <Button
-              variant="subtle"
-              color="red"
-              size="compact-sm"
-              onClick={clearCanvas}
-              disabled={disabled}
-            >
-              Clear
-            </Button>
-          </Group>
+          <Text size="sm" c="dimmed" ta="center">
+            Click to open drawing canvas
+          </Text>
        </Stack>
      </Paper>

-      {/* Hidden canvas for modal synchronization */}
-      <canvas
-        ref={modalCanvasRef}
-        width={modalWidth}
-        height={modalHeight}
-        style={{ display: 'none' }}
-      />
-
-      {/* Modal for larger signature canvas */}
-      <Modal
-        opened={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        title="Draw Your Signature"
-        size="xl"
-        centered
-      >
+      <Modal opened={modalOpen} onClose={closeModal} title="Draw Your Signature" size="auto" centered>
        <Stack gap="md">
-          {/* Color and Pen Size picker */}
-          <Paper withBorder p="sm">
-            <Group gap="lg" align="flex-end">
-              <div>
-                <Text size="sm" fw={500} mb="xs">Color</Text>
-                <ColorSwatchButton
-                  color={selectedColor}
-                  onClick={onColorSwatchClick}
-                />
-              </div>
-              <div>
-                <Text size="sm" fw={500} mb="xs">Pen Size</Text>
-                <PenSizeSelector
-                  value={penSize}
-                  inputValue={penSizeInput}
-                  onValueChange={onPenSizeChange}
-                  onInputChange={onPenSizeInputChange}
-                  placeholder="Size"
-                  size="compact-sm"
-                  style={{ width: '60px' }}
-                />
-              </div>
-            </Group>
-          </Paper>
+          <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-end' }}>
+            <div>
+              <Text size="sm" fw={500} mb="xs">Color</Text>
+              <Popover
+                opened={colorPickerOpen}
+                onChange={setColorPickerOpen}
+                position="bottom-start"
+                withArrow
+                withinPortal={false}
+              >
+                <Popover.Target>
+                  <div>
+                    <ColorSwatchButton
+                      color={selectedColor}
+                      onClick={() => setColorPickerOpen(!colorPickerOpen)}
+                    />
+                  </div>
+                </Popover.Target>
+                <Popover.Dropdown>
+                  <MantineColorPicker
+                    format="hex"
+                    value={selectedColor}
+                    onChange={(color) => {
+                      onColorSwatchClick();
+                      updatePenColor(color);
+                    }}
+                    swatches={['#000000', '#0066cc', '#cc0000', '#cc6600', '#009900', '#6600cc']}
+                  />
+                </Popover.Dropdown>
+              </Popover>
+            </div>
+            <div>
+              <Text size="sm" fw={500} mb="xs">Pen Size</Text>
+              <PenSizeSelector
+                value={penSize}
+                inputValue={penSizeInput}
+                onValueChange={(size) => {
+                  onPenSizeChange(size);
+                  updatePenSize(size);
+                }}
+                onInputChange={onPenSizeInputChange}
+                placeholder="Size"
+                size="compact-sm"
+                style={{ width: '60px' }}
+              />
+            </div>
+          </div>

-          <Paper withBorder p="md">
-            <canvas
-              ref={visibleModalCanvasRef}
-              width={modalWidth}
-              height={modalHeight}
-              style={{
-                border: '1px solid #ccc',
-                borderRadius: '4px',
-                cursor: 'crosshair',
-                backgroundColor: '#ffffff',
-                width: '100%',
-                maxWidth: `${modalWidth}px`,
-                height: 'auto',
-              }}
-              onMouseDown={startModalDrawing}
-              onMouseMove={drawModal}
-              onMouseUp={stopModalDrawing}
-              onMouseLeave={stopModalDrawing}
-            />
-          </Paper>
+          <canvas
+            ref={(el) => {
+              modalCanvasRef.current = el;
+              if (el) initPad(el);
+            }}
+            style={{
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              display: 'block',
+              touchAction: 'none',
+              backgroundColor: 'white',
+              width: '100%',
+              maxWidth: '800px',
+              height: '400px',
+              cursor: 'crosshair',
+            }}
+          />

-          <Group justify="space-between">
-            <Button
-              variant="subtle"
-              color="red"
-              onClick={clearModalCanvas}
-            >
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Button variant="subtle" color="red" onClick={clear}>
              Clear Canvas
            </Button>
-            <Group gap="sm">
-              <Button
-                variant="subtle"
-                onClick={() => setIsModalOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={saveModalSignature}
-              >
-                Save Signature
-              </Button>
-            </Group>
-          </Group>
+            <Button onClick={closeModal}>
+              Done
+            </Button>
+          </div>
        </Stack>
      </Modal>
    </>
  );
 };

-export default DrawingCanvas;
+export default DrawingCanvas;
@@ -48,7 +48,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
        disabled={disabled}
      />
      <Text size="sm" c="dimmed">
-        {hint || t('sign.image.hint', 'Upload a PNG or JPG image of your signature')}
+        {hint || t('sign.image.hint', 'Upload an image of your signature')}
      </Text>
    </Stack>
  );
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Stack, TextInput, Select, Combobox, useCombobox } from '@mantine/core';
+import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { ColorPicker } from './ColorPicker';

 interface TextInputWithFontProps {
  text: string;
@@ -9,6 +10,8 @@ interface TextInputWithFontProps {
  onFontSizeChange: (size: number) => void;
  fontFamily: string;
  onFontFamilyChange: (family: string) => void;
+  textColor?: string;
+  onTextColorChange?: (color: string) => void;
  disabled?: boolean;
  label?: string;
  placeholder?: string;
@@ -21,6 +24,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
  onFontSizeChange,
  fontFamily,
  onFontFamilyChange,
+  textColor = '#000000',
+  onTextColorChange,
  disabled = false,
  label,
  placeholder
@@ -28,6 +33,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
  const { t } = useTranslation();
  const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
  const fontSizeCombobox = useCombobox();
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);

  // Sync font size input with prop changes
  useEffect(() => {
@@ -42,7 +48,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
    { value: 'Georgia', label: 'Georgia' },
  ];

-  const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48'];
+  const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];

  return (
    <Stack gap="sm">
@@ -66,61 +72,101 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
        allowDeselect={false}
      />

-      {/* Font Size */}
-      <Combobox
-        onOptionSubmit={(optionValue) => {
-          setFontSizeInput(optionValue);
-          const size = parseInt(optionValue);
-          if (!isNaN(size)) {
-            onFontSizeChange(size);
-          }
-          fontSizeCombobox.closeDropdown();
-        }}
-        store={fontSizeCombobox}
-        withinPortal={false}
-      >
-        <Combobox.Target>
-          <TextInput
-            label="Font Size"
-            placeholder="Type or select font size (8-72)"
-            value={fontSizeInput}
-            onChange={(event) => {
-              const value = event.currentTarget.value;
-              setFontSizeInput(value);
+      {/* Font Size and Color */}
+      <Group grow>
+        <Combobox
+          onOptionSubmit={(optionValue) => {
+            setFontSizeInput(optionValue);
+            const size = parseInt(optionValue);
+            if (!isNaN(size)) {
+              onFontSizeChange(size);
+            }
+            fontSizeCombobox.closeDropdown();
+          }}
+          store={fontSizeCombobox}
+          withinPortal={false}
+        >
+          <Combobox.Target>
+            <TextInput
+              label="Font Size"
+              placeholder="Type or select font size (8-200)"
+              value={fontSizeInput}
+              onChange={(event) => {
+                const value = event.currentTarget.value;
+                setFontSizeInput(value);

-              // Parse and validate the typed value in real-time
-              const size = parseInt(value);
-              if (!isNaN(size) && size >= 8 && size <= 72) {
-                onFontSizeChange(size);
+                // Parse and validate the typed value in real-time
+                const size = parseInt(value);
+                if (!isNaN(size) && size >= 8 && size <= 200) {
+                  onFontSizeChange(size);
+                }
+
+                fontSizeCombobox.openDropdown();
+                fontSizeCombobox.updateSelectedOptionIndex();
+              }}
+              onClick={() => fontSizeCombobox.openDropdown()}
+              onFocus={() => fontSizeCombobox.openDropdown()}
+              onBlur={() => {
+                fontSizeCombobox.closeDropdown();
+                // Clean up invalid values on blur
+                const size = parseInt(fontSizeInput);
+                if (isNaN(size) || size < 8 || size > 200) {
+                  setFontSizeInput(fontSize.toString());
+                } else {
+                  onFontSizeChange(size);
+                }
+              }}
+              disabled={disabled}
+            />
+          </Combobox.Target>
+
+          <Combobox.Dropdown>
+            <Combobox.Options>
+              {fontSizeOptions.map((size) => (
+                <Combobox.Option value={size} key={size}>
+                  {size}px
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Combobox.Dropdown>
+        </Combobox>
+
+        {/* Text Color Picker */}
+        {onTextColorChange && (
+          <Box>
+            <TextInput
+              label="Text Color"
+              value={textColor}
+              readOnly
+              disabled={disabled}
+              onClick={() => !disabled && setIsColorPickerOpen(true)}
+              style={{ cursor: disabled ? 'default' : 'pointer' }}
+              rightSection={
+                <Box
+                  style={{
+                    width: 24,
+                    height: 24,
+                    backgroundColor: textColor,
+                    border: '1px solid #ccc',
+                    borderRadius: 4,
+                    cursor: disabled ? 'default' : 'pointer'
+                  }}
+                />
              }
+            />
+          </Box>
+        )}
+      </Group>

-              fontSizeCombobox.openDropdown();
-              fontSizeCombobox.updateSelectedOptionIndex();
-            }}
-            onClick={() => fontSizeCombobox.openDropdown()}
-            onFocus={() => fontSizeCombobox.openDropdown()}
-            onBlur={() => {
-              fontSizeCombobox.closeDropdown();
-              // Clean up invalid values on blur
-              const size = parseInt(fontSizeInput);
-              if (isNaN(size) || size < 8 || size > 72) {
-                setFontSizeInput(fontSize.toString());
-              }
-            }}
-            disabled={disabled}
-          />
-        </Combobox.Target>
-
-        <Combobox.Dropdown>
-          <Combobox.Options>
-            {fontSizeOptions.map((size) => (
-              <Combobox.Option value={size} key={size}>
-                {size}px
-              </Combobox.Option>
-            ))}
-          </Combobox.Options>
-        </Combobox.Dropdown>
-      </Combobox>
+      {/* Color Picker Modal */}
+      {onTextColorChange && (
+        <ColorPicker
+          isOpen={isColorPickerOpen}
+          onClose={() => setIsColorPickerOpen(false)}
+          selectedColor={textColor}
+          onColorChange={onTextColorChange}
+        />
+      )}
    </Stack>
  );
 };
@@ -0,0 +1,177 @@
+import React, { useRef, useState } from 'react';
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import AddIcon from '@mui/icons-material/Add';
+import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import LocalIcon from '../shared/LocalIcon';
+import { BASE_PATH } from '../../constants/app';
+import styles from './FileEditor.module.css';
+
+interface AddFileCardProps {
+  onFileSelect: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+}
+
+const AddFileCard = ({
+  onFileSelect,
+  accept,
+  multiple = true
+}: AddFileCardProps) => {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { openFilesModal } = useFilesModalContext();
+  const { colorScheme } = useMantineColorScheme();
+  const [isUploadHover, setIsUploadHover] = useState(false);
+
+  const handleCardClick = () => {
+    openFilesModal();
+  };
+
+  const handleNativeUploadClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  };
+
+  const handleOpenFilesModal = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    openFilesModal();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length > 0) {
+      onFileSelect(files);
+    }
+    // Reset input so same files can be selected again
+    event.target.value = '';
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+
+      <div
+        className={`${styles.addFileCard} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative cursor-pointer`}
+        tabIndex={0}
+        role="button"
+        aria-label={t('fileEditor.addFiles', 'Add files')}
+        onClick={handleCardClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleCardClick();
+          }
+        }}
+      >
+        {/* Header bar - matches FileEditorThumbnail structure */}
+        <div className={`${styles.header} ${styles.addFileHeader}`}>
+          <div className={styles.logoMark}>
+            <AddIcon sx={{ color: 'inherit', fontSize: '1.5rem' }} />
+          </div>
+          <div className={styles.headerIndex}>
+            {t('fileEditor.addFiles', 'Add Files')}
+          </div>
+          <div className={styles.kebab} />
+        </div>
+
+        {/* Main content area */}
+        <div className={styles.addFileContent}>
+          {/* Stirling PDF Branding */}
+          <Group gap="xs" align="center">
+            <img
+              src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
+              alt="Stirling PDF"
+              style={{ height: '2.2rem', width: 'auto' }}
+            />
+          </Group>
+
+          {/* Add Files + Native Upload Buttons - styled like LandingPage */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '0.6rem',
+              width: '100%',
+              marginTop: '0.8rem',
+              marginBottom: '0.8rem'
+            }}
+            onMouseLeave={() => setIsUploadHover(false)}
+          >
+            <Button
+              style={{
+                backgroundColor: 'var(--landing-button-bg)',
+                color: 'var(--landing-button-color)',
+                border: '1px solid var(--landing-button-border)',
+                borderRadius: '2rem',
+                height: '38px',
+                paddingLeft: isUploadHover ? 0 : '1rem',
+                paddingRight: isUploadHover ? 0 : '1rem',
+                width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
+                minWidth: isUploadHover ? '58px' : undefined,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'width .5s ease, padding .5s ease'
+              }}
+              onClick={handleOpenFilesModal}
+              onMouseEnter={() => setIsUploadHover(false)}
+            >
+              <LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
+              {!isUploadHover && (
+                <span>
+                  {t('landing.addFiles', 'Add Files')}
+                </span>
+              )}
+            </Button>
+            <Button
+              aria-label="Upload"
+              style={{
+                backgroundColor: 'var(--landing-button-bg)',
+                color: 'var(--landing-button-color)',
+                border: '1px solid var(--landing-button-border)',
+                borderRadius: '1rem',
+                height: '38px',
+                width: isUploadHover ? 'calc(100% - 58px - 0.6rem)' : '58px',
+                minWidth: '58px',
+                paddingLeft: isUploadHover ? '1rem' : 0,
+                paddingRight: isUploadHover ? '1rem' : 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'width .5s ease, padding .5s ease'
+              }}
+              onClick={handleNativeUploadClick}
+              onMouseEnter={() => setIsUploadHover(true)}
+            >
+              <LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
+              {isUploadHover && (
+                <span style={{ marginLeft: '.5rem' }}>
+                  {t('landing.uploadFromComputer', 'Upload from computer')}
+                </span>
+              )}
+            </Button>
+          </div>
+
+          {/* Instruction Text */}
+          <span
+            className="text-[var(--accent-interactive)]"
+            style={{ fontSize: '.8rem', textAlign: 'center', marginTop: '0.5rem' }}
+          >
+            {t('fileUpload.dropFilesHere', 'Drop files here or click the upload button')}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AddFileCard;
@@ -34,9 +34,9 @@
 .header {
  height: 2.25rem;
  border-radius: 0.0625rem 0.0625rem 0 0;
-  display: grid;
-  grid-template-columns: 44px 1fr 44px;
+  display: flex;
  align-items: center;
+  justify-content: space-between;
  padding: 0 6px;
  user-select: none;
  background: var(--bg-toolbar);
@@ -86,14 +86,23 @@
 }

 .headerIndex {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.04em;
 }

-.kebab {
-  justify-self: end;
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.headerIconButton {
  color: #FFFFFF !important;
 }

@@ -216,6 +225,11 @@
  color: rgba(0, 0, 0, 0.35);
 }

+.pinned {
+  color: #FFC107 !important;
+}
+
+
 /* Unsupported file indicator */
 .unsupportedPill {
  margin-left: 1.75rem;
@@ -304,4 +318,84 @@
 /* Light mode selected header stroke override */
 :global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
  outline-color: #3B4B6E;
-}
+}
+
+/* =========================
+   Add File Card Styles
+   ========================= */
+
+.addFileCard {
+  background: var(--file-card-bg);
+  border: 2px dashed var(--border-default);
+  border-radius: 0.0625rem;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  opacity: 0.7;
+}
+
+.addFileCard:hover {
+  opacity: 1;
+  border-color: var(--color-blue-500);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.addFileCard:focus {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
+}
+
+.addFileHeader {
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.addFileCard:hover .addFileHeader {
+  background: var(--color-blue-500);
+  color: white;
+}
+
+.addFileContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 1rem;
+  gap: 0.5rem;
+}
+
+.addFileIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 50%;
+  background: var(--bg-subtle);
+  transition: background-color 0.18s ease;
+}
+
+.addFileCard:hover .addFileIcon {
+  background: var(--color-blue-50);
+}
+
+.addFileText {
+  font-weight: 500;
+  transition: color 0.18s ease;
+}
+
+.addFileCard:hover .addFileText {
+  color: var(--text-primary);
+}
+
+.addFileSubtext {
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
@@ -1,13 +1,14 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import {
  Text, Center, Box, LoadingOverlay, Stack, Group
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { useFileSelection, useFileState, useFileManagement } from '../../contexts/FileContext';
+import { useFileSelection, useFileState, useFileManagement, useFileActions } from '../../contexts/FileContext';
 import { useNavigationActions } from '../../contexts/NavigationContext';
 import { zipFileService } from '../../services/zipFileService';
 import { detectFileExtension } from '../../utils/fileUtils';
 import FileEditorThumbnail from './FileEditorThumbnail';
+import AddFileCard from './AddFileCard';
 import FilePickerModal from '../shared/FilePickerModal';
 import SkeletonLoader from '../shared/SkeletonLoader';
 import { FileId, StirlingFile } from '../../types/fileContext';
@@ -36,6 +37,7 @@ const FileEditor = ({
  // Use optimized FileContext hooks
  const { state, selectors } = useFileState();
  const { addFiles, removeFiles, reorderFiles } = useFileManagement();
+  const { actions } = useFileActions();

  // Extract needed values from state (memoized to prevent infinite loops)
  const activeStirlingFileStubs = useMemo(() => selectors.getStirlingFileStubs(), [selectors.getFilesSignature()]);
@@ -60,7 +62,7 @@ const FileEditor = ({
  const [selectionMode, setSelectionMode] = useState(toolMode);

  // Enable selection mode automatically in tool mode
-  React.useEffect(() => {
+  useEffect(() => {
    if (toolMode) {
      setSelectionMode(true);
    }
@@ -171,8 +173,8 @@ const FileEditor = ({

      // Process all extracted files
      if (allExtractedFiles.length > 0) {
-        // Add files to context (they will be processed automatically)
-        await addFiles(allExtractedFiles);
+        // Add files to context and select them automatically
+        await addFiles(allExtractedFiles, { selectFiles: true });
        showStatus(`Added ${allExtractedFiles.length} files`, 'success');
      }
    } catch (err) {
@@ -286,7 +288,7 @@ const FileEditor = ({


  // File operations using context
-  const handleDeleteFile = useCallback((fileId: FileId) => {
+  const handleCloseFile = useCallback((fileId: FileId) => {
    const record = activeStirlingFileStubs.find(r => r.id === fileId);
    const file = record ? selectors.getFile(record.id) : null;
    if (record && file) {
@@ -308,6 +310,48 @@ const FileEditor = ({
    }
  }, [activeStirlingFileStubs, selectors, _setStatus]);

+  const handleUnzipFile = useCallback(async (fileId: FileId) => {
+    const record = activeStirlingFileStubs.find(r => r.id === fileId);
+    const file = record ? selectors.getFile(record.id) : null;
+    if (record && file) {
+      try {
+        // Extract and store files using shared service method
+        const result = await zipFileService.extractAndStoreFilesWithHistory(file, record);
+
+        if (result.success && result.extractedStubs.length > 0) {
+          // Add extracted file stubs to FileContext
+          await actions.addStirlingFileStubs(result.extractedStubs);
+
+          // Remove the original ZIP file
+          removeFiles([fileId], false);
+
+          alert({
+            alertType: 'success',
+            title: `Extracted ${result.extractedStubs.length} file(s) from ${file.name}`,
+            expandable: false,
+            durationMs: 3500
+          });
+        } else {
+          alert({
+            alertType: 'error',
+            title: `Failed to extract files from ${file.name}`,
+            body: result.errors.join('\n'),
+            expandable: true,
+            durationMs: 3500
+          });
+        }
+      } catch (error) {
+        console.error('Failed to unzip file:', error);
+        alert({
+          alertType: 'error',
+          title: `Error unzipping ${file.name}`,
+          expandable: false,
+          durationMs: 3500
+        });
+      }
+    }
+  }, [activeStirlingFileStubs, selectors, actions, removeFiles]);
+
  const handleViewFile = useCallback((fileId: FileId) => {
    const record = activeStirlingFileStubs.find(r => r.id === fileId);
    if (record) {
@@ -347,7 +391,7 @@ const FileEditor = ({
      <Box pos="relative" style={{ overflow: 'auto' }}>
        <LoadingOverlay visible={false} />

-        <Box p="md" pt="xl">
+        <Box p="md">


        {activeStirlingFileStubs.length === 0 && !zipExtractionProgress.isExtracting ? (
@@ -405,6 +449,14 @@ const FileEditor = ({
              pointerEvents: 'auto'
            }}
          >
+            {/* Add File Card - only show when files exist */}
+            {activeStirlingFileStubs.length > 0 && (
+              <AddFileCard
+                key="add-file-card"
+                onFileSelect={handleFileUpload}
+              />
+            )}
+
            {activeStirlingFileStubs.map((record, index) => {
              return (
                <FileEditorThumbnail
@@ -415,11 +467,12 @@ const FileEditor = ({
                  selectedFiles={localSelectedIds}
                  selectionMode={selectionMode}
                  onToggleFile={toggleFile}
-                  onDeleteFile={handleDeleteFile}
+                  onCloseFile={handleCloseFile}
                  onViewFile={handleViewFile}
                  _onSetStatus={showStatus}
                  onReorderFiles={handleReorderFiles}
                  onDownloadFile={handleDownloadFile}
+                  onUnzipFile={handleUnzipFile}
                  toolMode={toolMode}
                  isSupported={isFileSupported(record.name)}
                />
@@ -437,7 +490,7 @@ const FileEditor = ({
        onSelectFiles={handleLoadFromStorage}
      />

-      
+
      </Box>
    </Dropzone>
  );
@@ -1,15 +1,17 @@
 import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
+import { Text, ActionIcon, CheckboxIndicator, Tooltip } from '@mantine/core';
 import { alert } from '../toast';
 import { useTranslation } from 'react-i18next';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import CloseIcon from '@mui/icons-material/Close';
+import UnarchiveIcon from '@mui/icons-material/Unarchive';
 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 { StirlingFileStub } from '../../types/fileContext';
+import { zipFileService } from '../../services/zipFileService';

 import styles from './FileEditor.module.css';
 import { useFileContext } from '../../contexts/FileContext';
@@ -27,11 +29,12 @@ interface FileEditorThumbnailProps {
  selectedFiles: FileId[];
  selectionMode: boolean;
  onToggleFile: (fileId: FileId) => void;
-  onDeleteFile: (fileId: FileId) => void;
+  onCloseFile: (fileId: FileId) => void;
  onViewFile: (fileId: FileId) => void;
  _onSetStatus: (status: string) => void;
  onReorderFiles?: (sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => void;
  onDownloadFile: (fileId: FileId) => void;
+  onUnzipFile?: (fileId: FileId) => void;
  toolMode?: boolean;
  isSupported?: boolean;
 }
@@ -41,10 +44,12 @@ const FileEditorThumbnail = ({
  index,
  selectedFiles,
  onToggleFile,
-  onDeleteFile,
+  onCloseFile,
+  onViewFile,
  _onSetStatus,
  onReorderFiles,
  onDownloadFile,
+  onUnzipFile,
  isSupported = true,
 }: FileEditorThumbnailProps) => {
  const { t } = useTranslation();
@@ -64,6 +69,9 @@ const FileEditorThumbnail = ({
  }, [activeFiles, file.id]);
  const isPinned = actualFile ? isFilePinned(actualFile) : false;

+  // Check if this is a ZIP file
+  const isZipFile = zipFileService.isZipFileStub(file);
+
  const pageCount = file.processedFile?.totalPages || 0;

  const handleRef = useRef<HTMLSpanElement | null>(null);
@@ -198,6 +206,11 @@ const FileEditorThumbnail = ({
    onToggleFile(file.id);
  };

+  const handleCardDoubleClick = () => {
+    if (!isSupported) return;
+    onViewFile(file.id);
+  };
+
  // ---- Style helpers ----
  const getHeaderClassName = () => {
    if (hasError) return styles.headerError;
@@ -219,6 +232,7 @@ const FileEditorThumbnail = ({
      role="listitem"
      aria-selected={isSelected}
      onClick={handleCardClick}
+      onDoubleClick={handleCardDoubleClick}
    >
      {/* Header bar */}
      <div
@@ -251,18 +265,60 @@ const FileEditorThumbnail = ({
          {index + 1}
        </div>

-        {/* Kebab menu */}
-        <ActionIcon
-          aria-label={t('moreOptions', 'More options')}
-          variant="subtle"
-          className={styles.kebab}
-          onClick={(e) => {
-            e.stopPropagation();
-            setShowActions((v) => !v);
-          }}
-        >
-          <MoreVertIcon fontSize="small" />
-        </ActionIcon>
+        {/* Action buttons group */}
+        <div className={styles.headerActions}>
+          {/* Pin/Unpin icon */}
+          <Tooltip label={isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}>
+            <ActionIcon
+              aria-label={isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}
+              variant="subtle"
+              className={isPinned ? styles.pinned : styles.headerIconButton}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (actualFile) {
+                  if (isPinned) {
+                    unpinFile(actualFile);
+                    alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
+                  } else {
+                    pinFile(actualFile);
+                    alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
+                  }
+                }
+              }}
+            >
+              {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+            </ActionIcon>
+          </Tooltip>
+
+          {/* Download icon */}
+          <Tooltip label={t('download', 'Download')}>
+            <ActionIcon
+              aria-label={t('download', 'Download')}
+              variant="subtle"
+              className={styles.headerIconButton}
+              onClick={(e) => {
+                e.stopPropagation();
+                onDownloadFile(file.id);
+                alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 });
+              }}
+            >
+              <DownloadOutlinedIcon fontSize="small" />
+            </ActionIcon>
+          </Tooltip>
+
+          {/* Kebab menu */}
+          <ActionIcon
+            aria-label={t('moreOptions', 'More options')}
+            variant="subtle"
+            className={styles.headerIconButton}
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowActions((v) => !v);
+            }}
+          >
+            <MoreVertIcon fontSize="small" />
+          </ActionIcon>
+        </div>
      </div>

      {/* Actions overlay */}
@@ -287,7 +343,7 @@ const FileEditorThumbnail = ({
              setShowActions(false);
            }}
          >
-            {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+            {isPinned ? <PushPinIcon className={styles.pinned} fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
            <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
          </button>

@@ -299,18 +355,28 @@ const FileEditorThumbnail = ({
            <span>{t('download', 'Download')}</span>
          </button>

+          {isZipFile && onUnzipFile && (
+            <button
+              className={styles.actionRow}
+              onClick={() => { onUnzipFile(file.id); alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
+            >
+              <UnarchiveIcon fontSize="small" />
+              <span>{t('fileManager.unzip', 'Unzip')}</span>
+            </button>
+          )}
+
          <div className={styles.actionsDivider} />

          <button
            className={`${styles.actionRow} ${styles.actionDanger}`}
            onClick={() => {
-              onDeleteFile(file.id);
-              alert({ alertType: 'neutral', title: `Deleted ${file.name}`, expandable: false, durationMs: 3500 });
+              onCloseFile(file.id);
+              alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
              setShowActions(false);
            }}
          >
-            <DeleteOutlineIcon fontSize="small" />
-            <span>{t('delete', 'Delete')}</span>
+            <CloseIcon fontSize="small" />
+            <span>{t('close', 'Close')}</span>
          </button>
        </div>
      )}
@@ -324,7 +390,7 @@ const FileEditorThumbnail = ({
        marginTop: '0.5rem',
        marginBottom: '0.5rem',
      }}>
-        <Text size="lg" fw={700} className={styles.title} lineClamp={2}>
+        <Text  size="lg" fw={700} className={`${styles.title}  ph-no-capture `}  lineClamp={2}>
          {file.name}
        </Text>
        <Text
@@ -350,6 +416,7 @@ const FileEditorThumbnail = ({
        <div className={styles.previewPaper}>
          {file.thumbnailUrl && (
            <img
+              className="ph-no-capture"
              src={file.thumbnailUrl}
              alt={file.name}
              draggable={false}
@@ -376,13 +443,6 @@ const FileEditorThumbnail = ({
          )}
        </div>

-        {/* Pin indicator (bottom-left) */}
-        {isPinned && (
-          <span className={styles.pinIndicator} aria-hidden>
-            <PushPinIcon fontSize="small" />
-          </span>
-        )}
-
        {/* Drag handle (span wrapper so we can attach a ref reliably) */}
        <span ref={handleRef} className={styles.dragHandle} aria-hidden>
          <DragIndicatorIcon fontSize="small" />
@@ -42,6 +42,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
        <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {currentFile && thumbnail ? (
            <img
+              className='ph-no-capture'
              src={thumbnail}
              alt={currentFile.name}
              style={{
@@ -66,7 +67,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({

        {/* File info */}
        <Box style={{ flex: 1, minWidth: 0 }}>
-          <Text size="sm" fw={500} truncate>
+          <Text className='ph-no-capture' size="sm" fw={500} truncate>
            {currentFile ? currentFile.name : 'No file selected'}
          </Text>
          <Text size="xs" c="dimmed">
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Button, Group, Text, Stack, useMantineColorScheme } from '@mantine/core';
+import HistoryIcon from '@mui/icons-material/History';
+import { useTranslation } from 'react-i18next';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import LocalIcon from '../shared/LocalIcon';
+import { BASE_PATH } from '../../constants/app';
+
+const EmptyFilesState: React.FC = () => {
+  const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const { onLocalFileClick } = useFileManagerContext();
+  const [isUploadHover, setIsUploadHover] = useState(false);
+
+  const handleUploadClick = () => {
+    onLocalFileClick();
+  };
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem'
+      }}
+    >
+      {/* Container */}
+      <div
+        style={{
+          backgroundColor: 'transparent',
+          padding: '3rem 2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '1.5rem',
+          minWidth: '20rem',
+          maxWidth: '28rem',
+          width: '100%'
+        }}
+      >
+        {/* No Recent Files Message */}
+        <Stack align="center" gap="sm">
+          <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+          <Text c="dimmed" ta="center" size="lg">
+            {t('fileManager.noRecentFiles', 'No recent files')}
+          </Text>
+        </Stack>
+
+        {/* Stirling PDF Logo */}
+        <Group gap="xs" align="center">
+          <img
+            src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
+            alt="Stirling PDF"
+            style={{ height: '2.2rem', width: 'auto' }}
+          />
+        </Group>
+
+        {/* Upload Button */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: '0.5rem',
+            marginBottom: '0.5rem'
+          }}
+          onMouseLeave={() => setIsUploadHover(false)}
+        >
+          <Button
+            aria-label="Upload"
+            style={{
+              backgroundColor: 'var(--bg-file-manager)',
+              color: 'var(--landing-button-color)',
+              border: '1px solid var(--landing-button-border)',
+              borderRadius: isUploadHover ? '2rem' : '1rem',
+              height: '38px',
+              width: isUploadHover ? '100%' : '58px',
+              minWidth: '58px',
+              paddingLeft: isUploadHover ? '1rem' : 0,
+              paddingRight: isUploadHover ? '1rem' : 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'width .5s ease, padding .5s ease, border-radius .5s ease'
+            }}
+            onClick={handleUploadClick}
+            onMouseEnter={() => setIsUploadHover(true)}
+          >
+            <LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
+            {isUploadHover && (
+              <span style={{ marginLeft: '.5rem' }}>
+                {t('landing.uploadFromComputer', 'Upload from computer')}
+              </span>
+            )}
+          </Button>
+        </div>
+
+        {/* Instruction Text */}
+        <span
+          className="text-[var(--accent-interactive)]"
+          style={{ fontSize: '.8rem', textAlign: 'center' }}
+        >
+          {t('fileUpload.dropFilesHere', 'Drop files here or click the upload button')}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyFilesState;
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Stack, Button, Box } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
@@ -50,7 +50,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
  };

  // Reset index when selection changes
-  React.useEffect(() => {
+  useEffect(() => {
    if (currentFileIndex >= selectedFiles.length) {
      setCurrentFileIndex(0);
    }
@@ -44,7 +44,7 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
        </Group>

        <Box ml="md">
-          {sortedHistory.map((historyFile, _index) => (
+          {sortedHistory.map((historyFile) => (
            <FileListItem
              key={`history-${historyFile.id}-${historyFile.versionNumber || 1}`}
              file={historyFile}
@@ -56,7 +56,6 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
              onDoubleClick={() => onFileDoubleClick(historyFile)}
              isHistoryFile={true} // This enables "Add to Recents" in menu
              isLatestVersion={false} // History files are never latest
-              // onAddToRecents is accessed from context by FileListItem
            />
          ))}
        </Box>
@@ -26,7 +26,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
      <ScrollArea style={{ flex: 1 }} p="md">
        <Stack gap="sm">
          <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
+            <Text className='ph-no-capture' size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
            <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
              {currentFile ? currentFile.name : ''}
            </Text>
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Center, ScrollArea, Text, Stack } from '@mantine/core';
 import CloudIcon from '@mui/icons-material/Cloud';
-import HistoryIcon from '@mui/icons-material/History';
 import { useTranslation } from 'react-i18next';
 import FileListItem from './FileListItem';
 import FileHistoryGroup from './FileHistoryGroup';
+import EmptyFilesState from './EmptyFilesState';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';

 interface FileListAreaProps {
@@ -29,6 +29,7 @@ const FileListArea: React.FC<FileListAreaProps> = ({
    onFileDoubleClick,
    onDownloadSingle,
    isFileSupported,
+    isLoading,
  } = useFileManagerContext();
  const { t } = useTranslation();

@@ -43,15 +44,11 @@ const FileListArea: React.FC<FileListAreaProps> = ({
        scrollbarSize={8}
      >
        <Stack gap={0}>
-          {recentFiles.length === 0 ? (
+          {recentFiles.length === 0 && !isLoading ? (
+            <EmptyFilesState />
+          ) : recentFiles.length === 0 && isLoading ? (
            <Center style={{ height: '12.5rem' }}>
-              <Stack align="center" gap="sm">
-                <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
-                <Text c="dimmed" ta="center">{t('fileManager.noRecentFiles', 'No recent files')}</Text>
-                <Text size="xs" c="dimmed" ta="center" style={{ opacity: 0.7 }}>
-                  {t('fileManager.dropFilesHint', 'Drop files anywhere to upload')}
-                </Text>
-              </Stack>
+              <Text c="dimmed" ta="center">{t('fileManager.loadingFiles', 'Loading files...')}</Text>
            </Center>
          ) : (
            filteredFiles.map((file, index) => {
@@ -5,10 +5,12 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import DownloadIcon from '@mui/icons-material/Download';
 import HistoryIcon from '@mui/icons-material/History';
 import RestoreIcon from '@mui/icons-material/Restore';
+import UnarchiveIcon from '@mui/icons-material/Unarchive';
 import { useTranslation } from 'react-i18next';
 import { getFileSize, getFileDate } from '../../utils/fileUtils';
 import { FileId, StirlingFileStub } from '../../types/fileContext';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import { zipFileService } from '../../services/zipFileService';
 import ToolChain from '../shared/ToolChain';

 interface FileListItemProps {
@@ -38,7 +40,10 @@ const FileListItem: React.FC<FileListItemProps> = ({
  const [isHovered, setIsHovered] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { t } = useTranslation();
-  const {expandedFileIds, onToggleExpansion, onAddToRecents } = useFileManagerContext();
+  const {expandedFileIds, onToggleExpansion, onUnzipFile } = useFileManagerContext();
+
+  // Check if this is a ZIP file
+  const isZipFile = zipFileService.isZipFileStub(file);

  // Keep item in hovered state if menu is open
  const shouldShowHovered = isHovered || isMenuOpen;
@@ -93,7 +98,7 @@ const FileListItem: React.FC<FileListItemProps> = ({

          <Box style={{ flex: 1, minWidth: 0 }}>
            <Group gap="xs" align="center">
-              <Text size="sm" fw={500} truncate style={{ flex: 1 }}>{file.name}</Text>
+              <Text size="sm" fw={500} className='ph-no-capture' truncate style={{ flex: 1 }}>{file.name}</Text>
              <Badge size="xs" variant="light" color={"blue"}>
                v{currentVersion}
              </Badge>
@@ -183,7 +188,6 @@ const FileListItem: React.FC<FileListItemProps> = ({
                    leftSection={<RestoreIcon style={{ fontSize: 16 }} />}
                    onClick={(e) => {
                      e.stopPropagation();
-                      onAddToRecents(file);
                    }}
                  >
                    {t('fileManager.restore', 'Restore')}
@@ -192,6 +196,22 @@ const FileListItem: React.FC<FileListItemProps> = ({
                </>
              )}

+              {/* Unzip option for ZIP files */}
+              {isZipFile && !isHistoryFile && (
+                <>
+                  <Menu.Item
+                    leftSection={<UnarchiveIcon style={{ fontSize: 16 }} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onUnzipFile(file);
+                    }}
+                  >
+                    {t('fileManager.unzip', 'Unzip')}
+                  </Menu.Item>
+                  <Menu.Divider />
+                </>
+              )}
+
              <Menu.Item
                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
                onClick={(e) => {
@@ -5,6 +5,7 @@ import UploadIcon from '@mui/icons-material/Upload';
 import CloudIcon from '@mui/icons-material/Cloud';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import { useGoogleDrivePicker } from '../../hooks/useGoogleDrivePicker';

 interface FileSourceButtonsProps {
  horizontal?: boolean;
@@ -13,8 +14,20 @@ interface FileSourceButtonsProps {
 const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
  horizontal = false
 }) => {
-  const { activeSource, onSourceChange, onLocalFileClick } = useFileManagerContext();
+  const { activeSource, onSourceChange, onLocalFileClick, onGoogleDriveSelect } = useFileManagerContext();
  const { t } = useTranslation();
+  const { isEnabled: isGoogleDriveEnabled, openPicker: openGoogleDrivePicker } = useGoogleDrivePicker();
+
+  const handleGoogleDriveClick = async () => {
+    try {
+      const files = await openGoogleDrivePicker({ multiple: true });
+      if (files.length > 0) {
+        onGoogleDriveSelect(files);
+      }
+    } catch (error) {
+      console.error('Failed to pick files from Google Drive:', error);
+    }
+  };

  const buttonProps = {
    variant: (source: string) => activeSource === source ? 'filled' : 'subtle',
@@ -67,15 +80,24 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
      </Button>

      <Button
-        variant={buttonProps.variant('drive')}
+        variant="subtle"
+        color='var(--mantine-color-gray-6)'
        leftSection={<CloudIcon />}
        justify={horizontal ? "center" : "flex-start"}
-        onClick={() => onSourceChange('drive')}
+        onClick={handleGoogleDriveClick}
        fullWidth={!horizontal}
        size={horizontal ? "xs" : "sm"}
-        disabled
-        color={activeSource === 'drive' ? 'gray' : undefined}
-        styles={buttonProps.getStyles('drive')}
+        disabled={!isGoogleDriveEnabled}
+        styles={{
+          root: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            '&:hover': {
+              backgroundColor: isGoogleDriveEnabled ? 'var(--mantine-color-gray-0)' : 'transparent'
+            }
+          }
+        }}
+        title={!isGoogleDriveEnabled ? t('fileManager.googleDriveNotAvailable', 'Google Drive integration not available') : undefined}
      >
        {horizontal ? t('fileManager.googleDriveShort', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
      </Button>
@@ -9,7 +9,6 @@ const HiddenFileInput: React.FC = () => {
      ref={fileInputRef}
      type="file"
      multiple={true}
-      accept={["*/*"] as any}
      onChange={onFileInputChange}
      style={{ display: 'none' }}
      data-testid="file-input"
@@ -0,0 +1,58 @@
+import React from 'react';
+import { HotkeyBinding } from '../../utils/hotkeys';
+import { useHotkeys } from '../../contexts/HotkeyContext';
+
+interface HotkeyDisplayProps {
+  binding: HotkeyBinding | null | undefined;
+  size?: 'sm' | 'md';
+  muted?: boolean;
+}
+
+const baseKeyStyle: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0.375rem',
+  background: 'var(--mantine-color-gray-1)',
+  border: '1px solid var(--mantine-color-gray-3)',
+  padding: '0.125rem 0.35rem',
+  fontSize: '0.75rem',
+  lineHeight: 1,
+  fontFamily: 'var(--mantine-font-family-monospace, monospace)',
+  minWidth: '1.35rem',
+  color: 'var(--mantine-color-text)',
+};
+
+export const HotkeyDisplay: React.FC<HotkeyDisplayProps> = ({ binding, size = 'sm', muted = false }) => {
+  const { getDisplayParts } = useHotkeys();
+  const parts = getDisplayParts(binding);
+
+  if (!binding || parts.length === 0) {
+    return null;
+  }
+
+  const keyStyle = size === 'md'
+    ? { ...baseKeyStyle, fontSize: '0.85rem', padding: '0.2rem 0.5rem' }
+    : baseKeyStyle;
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.25rem',
+        color: muted ? 'var(--mantine-color-dimmed)' : 'inherit',
+        fontWeight: muted ? 500 : 600,
+      }}
+    >
+      {parts.map((part, index) => (
+        <React.Fragment key={`${part}-${index}`}>
+          <kbd style={keyStyle}>{part}</kbd>
+          {index < parts.length - 1 && <span aria-hidden style={{ fontWeight: 400 }}>+</span>}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+};
+
+export default HotkeyDisplay;
@@ -1,9 +1,12 @@
+import React from 'react';
 import { Box } from '@mantine/core';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFileState } from '../../contexts/FileContext';
 import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
+import { isBaseWorkbench } from '../../types/workbench';
+import { useViewer } from '../../contexts/ViewerContext';
 import './Workbench.css';

 import TopControls from '../shared/TopControls';
@@ -20,18 +23,19 @@ export default function Workbench() {
  const { isRainbowMode } = useRainbowThemeContext();

  // Use context-based hooks to eliminate all prop drilling
-  const { state } = useFileState();
+  const { selectors } = useFileState();
  const { workbench: currentView } = useNavigationState();
  const { actions: navActions } = useNavigationActions();
  const setCurrentView = navActions.setWorkbench;
-  const activeFiles = state.files.ids;
+  const activeFiles = selectors.getFiles();
  const {
    previewFile,
    pageEditorFunctions,
    sidebarsVisible,
    setPreviewFile,
    setPageEditorFunctions,
-    setSidebarsVisible
+    setSidebarsVisible,
+    customWorkbenchViews,
  } = useToolWorkflow();

  const { handleToolSelect } = useToolWorkflow();
@@ -44,6 +48,9 @@ export default function Workbench() {
  const selectedTool = selectedToolId ? toolRegistry[selectedToolId] : null;
  const { addFiles } = useFileHandler();

+  // Get active file index from ViewerContext
+  const { activeFileIndex, setActiveFileIndex } = useViewer();
+
  const handlePreviewClose = () => {
    setPreviewFile(null);
    const previousMode = sessionStorage.getItem('previousMode');
@@ -95,6 +102,8 @@ export default function Workbench() {
            setSidebarsVisible={setSidebarsVisible}
            previewFile={previewFile}
            onClose={handlePreviewClose}
+            activeFileIndex={activeFileIndex}
+            setActiveFileIndex={setActiveFileIndex}
          />
        );

@@ -130,9 +139,14 @@ export default function Workbench() {
        );

      default:
-        return (
-          <LandingPage/>
-        );
+        if (!isBaseWorkbench(currentView)) {
+          const customView = customWorkbenchViews.find((view) => view.workbenchId === currentView && view.data != null);
+          if (customView) {
+            const CustomComponent = customView.component;
+            return <CustomComponent data={customView.data} />;
+          }
+        }
+        return <LandingPage />;
    }
  };

@@ -146,10 +160,19 @@ export default function Workbench() {
      }
    >
      {/* Top Controls */}
-      <TopControls
-        currentView={currentView}
-        setCurrentView={setCurrentView}
-      />
+      {activeFiles.length > 0 && (
+        <TopControls
+          currentView={currentView}
+          setCurrentView={setCurrentView}
+          customViews={customWorkbenchViews}
+          activeFiles={activeFiles.map(f => {
+            const stub = selectors.getStirlingFileStub(f.fileId);
+            return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
+          })}
+          currentFileIndex={activeFileIndex}
+          onFileSelect={setActiveFileIndex}
+        />
+      )}

      {/* Dismiss All Errors Button */}
      <DismissAllErrorsButton />
@@ -159,6 +182,7 @@ export default function Workbench() {
        className="flex-1 min-h-0 relative z-10 workbench-scrollable "
        style={{
          transition: 'opacity 0.15s ease-in-out',
+          paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '3.5rem' : '0'),
        }}
      >
        {renderMainContent()}
@@ -317,6 +317,7 @@ const FileThumbnail = ({
        >
          {file.thumbnail && (
            <img
+              className="ph-no-capture"
              src={file.thumbnail}
              alt={file.name}
              draggable={false}
@@ -5,6 +5,8 @@ import { useNavigationGuard } from "../../contexts/NavigationContext";
 import { PDFDocument, PageEditorFunctions } from "../../types/pageEditor";
 import { pdfExportService } from "../../services/pdfExportService";
 import { documentManipulationService } from "../../services/documentManipulationService";
+import { exportProcessedDocumentsToFiles } from "../../services/pdfExportHelpers";
+import { createStirlingFilesAndStubs } from "../../services/fileStubHelpers";
 // Thumbnail generation is now handled by individual PageThumbnail components
 import './PageEditor.module.css';
 import PageThumbnail from './PageThumbnail';
@@ -524,66 +526,38 @@ const PageEditor = ({
    try {
      // Step 1: Apply DOM changes to document state first
      const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
-        mergedPdfDocument || displayDocument, // Original order
-        displayDocument, // Current display order (includes reordering)
-        splitPositions // Position-based splits
+        mergedPdfDocument || displayDocument,
+        displayDocument,
+        splitPositions
      );

-      // Step 2: Check if we have multiple documents (splits) or single document
-      if (Array.isArray(processedDocuments)) {
-        // Multiple documents (splits) - export as ZIP
-        const blobs: Blob[] = [];
-        const filenames: string[] = [];
+      // Step 2: Export to files
+      const sourceFiles = getSourceFiles();
+      const exportFilename = getExportFilename();
+      const files = await exportProcessedDocumentsToFiles(processedDocuments, sourceFiles, exportFilename);

-        const sourceFiles = getSourceFiles();
-        const baseExportFilename = getExportFilename();
-        const baseName = baseExportFilename.replace(/\.pdf$/i, '');
-
-        for (let i = 0; i < processedDocuments.length; i++) {
-          const doc = processedDocuments[i];
-          const partFilename = `${baseName}_part_${i + 1}.pdf`;
-
-          const result = sourceFiles
-            ? await pdfExportService.exportPDFMultiFile(doc, sourceFiles, [], { filename: partFilename })
-            : await pdfExportService.exportPDF(doc, [], { filename: partFilename });
-          blobs.push(result.blob);
-          filenames.push(result.filename);
-        }
-
-        // Create ZIP file
+      // Step 3: Download
+      if (files.length > 1) {
+        // Multiple files - create ZIP
        const JSZip = await import('jszip');
        const zip = new JSZip.default();

-        blobs.forEach((blob, index) => {
-          zip.file(filenames[index], blob);
+        files.forEach((file) => {
+          zip.file(file.name, file);
        });

        const zipBlob = await zip.generateAsync({ type: 'blob' });
-        const zipFilename = baseExportFilename.replace(/\.pdf$/i, '.zip');
+        const exportFilename = getExportFilename();
+        const zipFilename = exportFilename.replace(/\.pdf$/i, '.zip');

        pdfExportService.downloadFile(zipBlob, zipFilename);
-        setHasUnsavedChanges(false); // Clear unsaved changes after successful export
      } else {
-        // Single document - regular export
-        const sourceFiles = getSourceFiles();
-        const exportFilename = getExportFilename();
-        const result = sourceFiles
-          ? await pdfExportService.exportPDFMultiFile(
-              processedDocuments,
-              sourceFiles,
-              [],
-              { selectedOnly: false, filename: exportFilename }
-            )
-          : await pdfExportService.exportPDF(
-              processedDocuments,
-              [],
-              { selectedOnly: false, filename: exportFilename }
-            );
-
-        pdfExportService.downloadFile(result.blob, result.filename);
-        setHasUnsavedChanges(false); // Clear unsaved changes after successful export
+        // Single file - download directly
+        const file = files[0];
+        pdfExportService.downloadFile(file, file.name);
      }

+      setHasUnsavedChanges(false);
      setExportLoading(false);
    } catch (error) {
      console.error('Export failed:', error);
@@ -592,21 +566,39 @@ const PageEditor = ({
  }, [displayDocument, mergedPdfDocument, splitPositions, getSourceFiles, getExportFilename, setHasUnsavedChanges]);

  // Apply DOM changes to document state using dedicated service
-  const applyChanges = useCallback(() => {
+  const applyChanges = useCallback(async () => {
    if (!displayDocument) return;

-    // Pass current display document (which includes reordering) to get both reordering AND DOM changes
-    const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
-      mergedPdfDocument || displayDocument, // Original order
-      displayDocument, // Current display order (includes reordering)
-      splitPositions // Position-based splits
-    );
+    setExportLoading(true);
+    try {
+      // Step 1: Apply DOM changes to document state first
+      const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
+        mergedPdfDocument || displayDocument,
+        displayDocument,
+        splitPositions
+      );

-    // For apply changes, we only set the first document if it's an array (splits shouldn't affect document state)
-    const documentToSet = Array.isArray(processedDocuments) ? processedDocuments[0] : processedDocuments;
-    setEditedDocument(documentToSet);
+      // Step 2: Export to files
+      const sourceFiles = getSourceFiles();
+      const exportFilename = getExportFilename();
+      const files = await exportProcessedDocumentsToFiles(processedDocuments, sourceFiles, exportFilename);

-  }, [displayDocument, mergedPdfDocument, splitPositions]);
+      // Step 3: Create StirlingFiles and stubs for version history
+      const parentStub = selectors.getStirlingFileStub(activeFileIds[0]);
+      if (!parentStub) throw new Error('Parent stub not found');
+
+      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs(files, parentStub, 'multiTool');
+
+      // Step 4: Consume files (replace in context)
+      await actions.consumeFiles(activeFileIds, stirlingFiles, stubs);
+
+      setHasUnsavedChanges(false);
+      setExportLoading(false);
+    } catch (error) {
+      console.error('Apply changes failed:', error);
+      setExportLoading(false);
+    }
+  }, [displayDocument, mergedPdfDocument, splitPositions, activeFileIds, getSourceFiles, getExportFilename, actions, selectors, setHasUnsavedChanges]);


  const closePdf = useCallback(() => {
@@ -670,7 +662,7 @@ const PageEditor = ({
  const displayedPages = displayDocument?.pages || [];

  return (
-    <Box pos="relative" h='100%' pt={40} style={{ overflow: 'auto' }} data-scrolling-container="true">
+    <Box pos="relative" h='100%' style={{ overflow: 'auto' }} data-scrolling-container="true">
      <LoadingOverlay visible={globalProcessing && !mergedPdfDocument} />

      {!mergedPdfDocument && !globalProcessing && activeFileIds.length === 0 && (
@@ -793,7 +785,7 @@ const PageEditor = ({

      <NavigationWarningModal
        onApplyAndContinue={async () => {
-          applyChanges();
+          await applyChanges();
        }}
        onExportAndContinue={async () => {
          await onExportAll();
@@ -371,9 +371,11 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
            </div>
          ) : thumbnailUrl ? (
            <img
+              className="ph-no-capture"
              src={thumbnailUrl}
              alt={`Page ${page.pageNumber}`}
              draggable={false}
+              data-original-rotation={page.rotation}
              style={{
                width: '100%',
                height: '100%',
@@ -17,32 +17,34 @@ export class RotatePageCommand extends DOMCommand {
  }

  execute(): void {
-    // Only update DOM for immediate visual feedback
    const pageElement = document.querySelector(`[data-page-id="${this.pageId}"]`);
    if (pageElement) {
      const img = pageElement.querySelector('img');
      if (img) {
-        // Extract current rotation from transform property to match the animated CSS
        const currentTransform = img.style.transform || '';
        const rotateMatch = currentTransform.match(/rotate\(([^)]+)\)/);
        const currentRotation = rotateMatch ? parseInt(rotateMatch[1]) : 0;
-        const newRotation = currentRotation + this.degrees;
+        let newRotation = currentRotation + this.degrees;
+
+        newRotation = ((newRotation % 360) + 360) % 360;
+
        img.style.transform = `rotate(${newRotation}deg)`;
      }
    }
  }

  undo(): void {
-    // Only update DOM
    const pageElement = document.querySelector(`[data-page-id="${this.pageId}"]`);
    if (pageElement) {
      const img = pageElement.querySelector('img');
      if (img) {
-        // Extract current rotation from transform property
        const currentTransform = img.style.transform || '';
        const rotateMatch = currentTransform.match(/rotate\(([^)]+)\)/);
        const currentRotation = rotateMatch ? parseInt(rotateMatch[1]) : 0;
-        const previousRotation = currentRotation - this.degrees;
+        let previousRotation = currentRotation - this.degrees;
+
+        previousRotation = ((previousRotation % 360) + 360) % 360;
+
        img.style.transform = `rotate(${previousRotation}deg)`;
      }
    }
@@ -0,0 +1,130 @@
+/* AppConfigModal styles */
+.modal-container {
+  display: flex;
+  gap: 0;
+  height: 37.5rem; /* 600px */
+}
+
+.modal-nav {
+  width: 15rem; /* 240px */
+  height: 37.5rem; /* 600px */
+  border-top-left-radius: 0.75rem; /* 12px */
+  border-bottom-left-radius: 0.75rem; /* 12px */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Mobile: compact icon-only navigation */
+@media (max-width: 1024px) {
+  .modal-container {
+    height: 100vh !important;
+    max-height: none !important;
+  }
+
+  .modal-nav {
+    width: 5rem; /* 80px - wider for larger icons */
+    height: 100vh !important;
+    max-height: none !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .modal-nav-scroll {
+    padding: 1rem 0.5rem;
+  }
+
+  .modal-nav-section {
+    margin-bottom: 1.5rem;
+  }
+
+  .modal-nav-item.mobile {
+    padding: 1rem;
+    justify-content: center;
+    border-radius: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .modal-content {
+    height: 100vh !important;
+    max-height: none !important;
+    border-radius: 0;
+  }
+}
+
+.modal-nav-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  padding-bottom: 2rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-nav-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-nav-section {
+  margin-bottom: 1rem;
+}
+
+.modal-nav-section-items {
+  margin-top: 0.5rem;
+}
+
+.modal-nav-item {
+  cursor: pointer;
+  padding: 0.5rem 0.625rem; /* 8px 10px */
+  border-radius: 0.5rem; /* 8px */
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem; /* 4px */
+}
+
+.modal-content {
+  flex: 1;
+  height: 37.5rem; /* 600px */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-content-scroll {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.modal-body {
+  padding: 2rem;
+  padding-top: 1rem;
+}
+
+.confirm-modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.confirm-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
@@ -1,6 +1,12 @@
-import React from 'react';
-import { Modal, Button, Stack, Text, Code, ScrollArea, Group, Badge, Alert, Loader } from '@mantine/core';
-import { useAppConfig } from '../../hooks/useAppConfig';
+import React, { useMemo, useState, useEffect } from 'react';
+import { Modal, Text, ActionIcon } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import LocalIcon from './LocalIcon';
+import Overview from './config/configSections/Overview';
+import { createConfigNavSections } from './config/configNavSections';
+import { NavKey } from './config/types';
+import './AppConfigModal.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';

 interface AppConfigModalProps {
  opened: boolean;
@@ -8,131 +14,143 @@ interface AppConfigModalProps {
 }

 const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
-  const { config, loading, error, refetch } = useAppConfig();
+  const [active, setActive] = useState<NavKey>('overview');
+  const isMobile = useMediaQuery("(max-width: 1024px)");

-  const renderConfigSection = (title: string, data: any) => {
-    if (!data || typeof data !== 'object') return null;
+  useEffect(() => {
+    const handler = (ev: Event) => {
+      const detail = (ev as CustomEvent).detail as { key?: NavKey } | undefined;
+      if (detail?.key) {
+        setActive(detail.key);
+      }
+    };
+    window.addEventListener('appConfig:navigate', handler as EventListener);
+    return () => window.removeEventListener('appConfig:navigate', handler as EventListener);
+  }, []);

-    return (
-      <Stack gap="xs" mb="md">
-        <Text fw={600} size="md" c="blue">{title}</Text>
-        <Stack gap="xs" pl="md">
-          {Object.entries(data).map(([key, value]) => (
-            <Group key={key} wrap="nowrap" align="flex-start">
-              <Text size="sm" w={150} style={{ flexShrink: 0 }} c="dimmed">
-                {key}:
-              </Text>
-                {typeof value === 'boolean' ? (
-                  <Badge color={value ? 'green' : 'red'} size="sm">
-                    {value ? 'true' : 'false'}
-                  </Badge>
-                ) : typeof value === 'object' ? (
-                  <Code block>{JSON.stringify(value, null, 2)}</Code>
-                ) : (
-                  String(value) || 'null'
-                )}
-            </Group>
-          ))}
-        </Stack>
-      </Stack>
-    );
+  const colors = useMemo(() => ({
+    navBg: 'var(--modal-nav-bg)',
+    sectionTitle: 'var(--modal-nav-section-title)',
+    navItem: 'var(--modal-nav-item)',
+    navItemActive: 'var(--modal-nav-item-active)',
+    navItemActiveBg: 'var(--modal-nav-item-active-bg)',
+    contentBg: 'var(--modal-content-bg)',
+    headerBorder: 'var(--modal-header-border)',
+  }), []);
+
+  // Placeholder logout handler (not needed in open-source but keeps SaaS compatibility)
+  const handleLogout = () => {
+    // In SaaS this would sign out, in open-source it does nothing
+    console.log('Logout placeholder for SaaS compatibility');
  };

-  const basicConfig = config ? {
-    appName: config.appName,
-    appNameNavbar: config.appNameNavbar,
-    baseUrl: config.baseUrl,
-    contextPath: config.contextPath,
-    serverPort: config.serverPort,
-  } : null;
+  // Left navigation structure and icons
+  const configNavSections = useMemo(() =>
+    createConfigNavSections(
+      Overview,
+      handleLogout
+    ),
+    []
+  );

-  const securityConfig = config ? {
-    enableLogin: config.enableLogin,
-  } : null;
+  const activeLabel = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find(i => i.key === active);
+      if (found) return found.label;
+    }
+    return '';
+  }, [configNavSections, active]);

-  const systemConfig = config ? {
-    enableAlphaFunctionality: config.enableAlphaFunctionality,
-    enableAnalytics: config.enableAnalytics,
-  } : null;
-
-  const premiumConfig = config ? {
-    premiumEnabled: config.premiumEnabled,
-    premiumKey: config.premiumKey ? '***hidden***' : null,
-    runningProOrHigher: config.runningProOrHigher,
-    runningEE: config.runningEE,
-    license: config.license,
-  } : null;
-
-  const integrationConfig = config ? {
-    GoogleDriveEnabled: config.GoogleDriveEnabled,
-    SSOAutoLogin: config.SSOAutoLogin,
-  } : null;
-
-  const legalConfig = config ? {
-    termsAndConditions: config.termsAndConditions,
-    privacyPolicy: config.privacyPolicy,
-    cookiePolicy: config.cookiePolicy,
-    impressum: config.impressum,
-    accessibilityStatement: config.accessibilityStatement,
-  } : null;
+  const activeComponent = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find(i => i.key === active);
+      if (found) return found.component;
+    }
+    return null;
+  }, [configNavSections, active]);

  return (
    <Modal
      opened={opened}
      onClose={onClose}
-      title="App Configuration (Testing)"
-      size="lg"
-      style={{ zIndex: 1000 }}
+      title={null}
+      size={isMobile ? "100%" : 980}
+      centered
+      radius="lg"
+      withCloseButton={false}
+      zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
+      overlayProps={{ opacity: 0.35, blur: 2 }}
+      padding={0}
+      fullScreen={isMobile}
    >
-      <Stack>
-        <Group justify="space-between">
-          <Text size="sm" c="dimmed">
-            This modal shows the current application configuration for testing purposes only.
-          </Text>
-          <Button size="xs" variant="light" onClick={refetch}>
-            Refresh
-          </Button>
-        </Group>
+      <div className="modal-container">
+        {/* Left navigation */}
+        <div
+          className={`modal-nav ${isMobile ? 'mobile' : ''}`}
+          style={{
+            background: colors.navBg,
+            borderRight: `1px solid ${colors.headerBorder}`,
+          }}
+        >
+          <div className="modal-nav-scroll">
+            {configNavSections.map(section => (
+              <div key={section.title} className="modal-nav-section">
+                {!isMobile && (
+                  <Text size="xs" fw={600} c={colors.sectionTitle} style={{ textTransform: 'uppercase', letterSpacing: 0.4 }}>
+                    {section.title}
+                  </Text>
+                )}
+                <div className="modal-nav-section-items">
+                  {section.items.map(item => {
+                    const isActive = active === item.key;
+                    const color = isActive ? colors.navItemActive : colors.navItem;
+                    const iconSize = isMobile ? 28 : 18;
+                    return (
+                      <div
+                        key={item.key}
+                        onClick={() => setActive(item.key)}
+                        className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
+                        style={{
+                          background: isActive ? colors.navItemActiveBg : 'transparent',
+                        }}
+                      >
+                        <LocalIcon icon={item.icon} width={iconSize} height={iconSize} style={{ color }} />
+                        {!isMobile && (
+                          <Text size="sm" fw={500} style={{ color }}>
+                            {item.label}
+                          </Text>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>

-        {loading && (
-          <Stack align="center" py="md">
-            <Loader size="sm" />
-            <Text size="sm" c="dimmed">Loading configuration...</Text>
-          </Stack>
-        )}
-
-        {error && (
-          <Alert color="red" title="Error">
-            {error}
-          </Alert>
-        )}
-
-        {config && (
-          <ScrollArea h={400}>
-            <Stack gap="lg">
-              {renderConfigSection('Basic Configuration', basicConfig)}
-              {renderConfigSection('Security Configuration', securityConfig)}
-              {renderConfigSection('System Configuration', systemConfig)}
-              {renderConfigSection('Premium/Enterprise Configuration', premiumConfig)}
-              {renderConfigSection('Integration Configuration', integrationConfig)}
-              {renderConfigSection('Legal Configuration', legalConfig)}
-              
-              {config.error && (
-                <Alert color="yellow" title="Configuration Warning">
-                  {config.error}
-                </Alert>
-              )}
-
-              <Stack gap="xs">
-                <Text fw={600} size="md" c="blue">Raw Configuration</Text>
-                <Code block style={{ fontSize: '11px' }}>
-                  {JSON.stringify(config, null, 2)}
-                </Code>
-              </Stack>
-            </Stack>
-          </ScrollArea>
-        )}
-      </Stack>
+        {/* Right content */}
+        <div className="modal-content">
+          <div className="modal-content-scroll">
+            {/* Sticky header with section title and small close button */}
+            <div
+              className="modal-header"
+              style={{
+                background: colors.contentBg,
+                borderBottom: `1px solid ${colors.headerBorder}`,
+              }}
+            >
+              <Text fw={700} size="lg">{activeLabel}</Text>
+              <ActionIcon variant="subtle" onClick={onClose} aria-label="Close">
+                <LocalIcon icon="close-rounded" width={18} height={18} />
+              </ActionIcon>
+            </div>
+            <div className="modal-body">
+              {activeComponent}
+            </div>
+          </div>
+        </div>
+      </div>
    </Modal>
  );
 };
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Box } from '@mantine/core';
+
+interface BadgeProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'colored';
+  color?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Badge: React.FC<BadgeProps> = ({ 
+  children, 
+  size = 'sm', 
+  variant = 'default',
+  color,
+  textColor,
+  backgroundColor,
+  className,
+  style 
+}) => {
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'sm':
+        return {
+          padding: '0.125rem 0.5rem',
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          borderRadius: '0.5rem',
+        };
+      case 'md':
+        return {
+          padding: '0.25rem 0.75rem',
+          fontSize: '0.875rem',
+          fontWeight: 700,
+          borderRadius: '0.625rem',
+        };
+      case 'lg':
+        return {
+          padding: '0.375rem 1rem',
+          fontSize: '1rem',
+          fontWeight: 700,
+          borderRadius: '0.75rem',
+        };
+      default:
+        return {};
+    }
+  };
+
+  const getVariantStyles = () => {
+    // If explicit colors are provided, use them
+    if (textColor && backgroundColor) {
+      return {
+        backgroundColor,
+        color: textColor,
+      };
+    }
+    
+    // If a single color is provided, use it for text and 20% opacity for background
+    if (color) {
+      return {
+        backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+        color: color,
+      };
+    }
+    
+    // If variant is colored but no color provided, use default colored styling
+    if (variant === 'colored') {
+      return {
+        backgroundColor: `color-mix(in srgb, var(--category-color-default) 15%, transparent)`,
+        color: 'var(--category-color-default)',
+        borderColor: `color-mix(in srgb, var(--category-color-default) 30%, transparent)`,
+        border: '1px solid',
+      };
+    }
+    
+    // Default styling
+    return {
+      background: 'var(--tool-header-badge-bg)',
+      color: 'var(--tool-header-badge-text)',
+    };
+  };
+
+  return (
+    <Box
+      className={className}
+      style={{
+        ...getSizeStyles(),
+        ...getVariantStyles(),
+        ...style,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Badge;
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Menu, Loader, Group, Text } from '@mantine/core';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FitText from './FitText';
+
+interface FileDropdownMenuProps {
+  displayName: string;
+  activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
+  currentFileIndex: number;
+  onFileSelect?: (index: number) => void;
+  switchingTo?: string | null;
+  viewOptionStyle: React.CSSProperties;
+  pillRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
+  displayName,
+  activeFiles,
+  currentFileIndex,
+  onFileSelect,
+  switchingTo,
+  viewOptionStyle,
+}) => {
+  return (
+    <Menu trigger="click" position="bottom" width="30rem">
+      <Menu.Target>
+        <div style={{...viewOptionStyle, cursor: 'pointer'}}>
+          {switchingTo === "viewer" ? (
+            <Loader size="xs" />
+          ) : (
+            <VisibilityIcon fontSize="small" />
+          )}
+          <FitText text={displayName} fontSize={14} minimumFontScale={0.6} className="ph-no-capture" />
+          <KeyboardArrowDownIcon fontSize="small" />
+        </div>
+      </Menu.Target>
+      <Menu.Dropdown style={{
+        backgroundColor: 'var(--right-rail-bg)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+        maxHeight: '50vh',
+        overflowY: 'auto'
+      }}>
+        {activeFiles.map((file, index) => {
+          const itemName = file?.name || 'Untitled';
+          const isActive = index === currentFileIndex;
+          return (
+            <Menu.Item
+              key={file.fileId}
+              onClick={(e) => {
+                e.stopPropagation();
+                onFileSelect?.(index);
+              }}
+              className="viewer-file-tab"
+              {...(isActive && { 'data-active': true })}
+              style={{
+                justifyContent: 'flex-start',
+              }}
+            >
+              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
+                <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+                  <FitText text={itemName} fontSize={14} minimumFontScale={0.7} className="ph-no-capture" />
+                </div>
+                {file.versionNumber && file.versionNumber > 1 && (
+                  <Text size="xs" c="dimmed">
+                    v{file.versionNumber}
+                  </Text>
+                )}
+              </Group>
+            </Menu.Item>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
@@ -125,6 +125,7 @@ const FilePickerModal = ({
      title={t("fileUpload.selectFromStorage", "Select Files from Storage")}
      size="lg"
      scrollAreaComponent={ScrollArea.Autosize}
+      zIndex={1100}
    >
      <Stack gap="md">
        {storedFiles.length === 0 ? (
@@ -15,7 +15,7 @@ interface FileUploadButtonProps {
 const FileUploadButton = ({
  file,
  onChange,
-  accept = "*/*",
+  accept,
  disabled = false,
  placeholder,
  variant = "outline",
@@ -41,7 +41,6 @@ const LandingPage = () => {
      {/* White PDF Page Background */}
      <Dropzone
        onDrop={handleFileDrop}
-        accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
        multiple={true}
        className="w-4/5 flex items-center justify-center h-[95%]"
        style={{
@@ -178,7 +177,6 @@ const LandingPage = () => {
              ref={fileInputRef}
              type="file"
              multiple
-              accept=".pdf,.zip"
              onChange={handleFileSelect}
              style={{ display: 'none' }}
            />
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
 import LocalIcon from './LocalIcon';
 import styles from './LanguageSelector.module.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';

 // Types
 interface LanguageSelectorProps {
@@ -209,6 +210,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
        width={600}
        position={position}
        offset={offset}
+        zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
        transitionProps={{
          transition: 'scale-y',
          duration: 200,
@@ -264,13 +266,15 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
            backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))',
            border: 'light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))',
+            zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
          }}
        >
          <ScrollArea h={190} type="scroll">
            <div className={styles.languageGrid}>
              {languageOptions.map((option, index) => {
-                const isEnglishGB = option.value === 'en-GB'; // Currently only English GB has enough translations to use
-                const isDisabled = !isEnglishGB;
+                // Enable languages with >90% translation completion
+                const enabledLanguages = ['en-GB', 'ar-AR', 'de-DE', 'es-ES', 'fr-FR', 'it-IT', 'pt-BR', 'ru-RU', 'zh-CN'];
+                const isDisabled = !enabledLanguages.includes(option.value);

                return (
                  <LanguageItem
@@ -1,25 +1,19 @@
-import { Modal, Text, Button, Group, Stack } from '@mantine/core';
-import { useNavigationGuard } from '../../contexts/NavigationContext';
-import { useTranslation } from 'react-i18next';
+import { Modal, Text, Button, Group, Stack } from "@mantine/core";
+import { useNavigationGuard } from "../../contexts/NavigationContext";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";

 interface NavigationWarningModalProps {
  onApplyAndContinue?: () => Promise<void>;
  onExportAndContinue?: () => Promise<void>;
 }

-const NavigationWarningModal = ({
-  onApplyAndContinue,
-  onExportAndContinue
-}: NavigationWarningModalProps) => {
-
+const NavigationWarningModal = ({ onApplyAndContinue, onExportAndContinue }: NavigationWarningModalProps) => {
  const { t } = useTranslation();
-  const {
-    showNavigationWarning,
-    hasUnsavedChanges,
-    cancelNavigation,
-    confirmNavigation,
-    setHasUnsavedChanges
-  } = useNavigationGuard();
+  const { showNavigationWarning, hasUnsavedChanges, cancelNavigation, confirmNavigation, setHasUnsavedChanges } =
+    useNavigationGuard();

  const handleKeepWorking = () => {
    cancelNavigation();
@@ -30,7 +24,7 @@ const NavigationWarningModal = ({
    confirmNavigation();
  };

-  const _handleApplyAndContinue = async () => {
+  const handleApplyAndContinue = async () => {
    if (onApplyAndContinue) {
      await onApplyAndContinue();
    }
@@ -38,13 +32,14 @@ const NavigationWarningModal = ({
    confirmNavigation();
  };

-  const handleExportAndContinue = async () => {
+  const _handleExportAndContinue = async () => {
    if (onExportAndContinue) {
      await onExportAndContinue();
    }
    setHasUnsavedChanges(false);
    confirmNavigation();
  };
+  const BUTTON_WIDTH = "10rem";

  if (!hasUnsavedChanges) {
    return null;
@@ -56,54 +51,53 @@ const NavigationWarningModal = ({
      onClose={handleKeepWorking}
      title={t("unsavedChangesTitle", "Unsaved Changes")}
      centered
-      size="lg"
-      closeOnClickOutside={false}
-      closeOnEscape={false}
+      size="auto"
+      closeOnClickOutside={true}
+      closeOnEscape={true}
    >
-      <Stack gap="md">
-        <Text>
-          {t("unsavedChanges", "You have unsaved changes to your PDF. What would you like to do?")}
+      <Stack>
+        <Stack  ta="center"  p="md">
+        <Text size="md" fw="300">
+          {t("unsavedChanges", "You have unsaved changes to your PDF.")}
        </Text>
+        <Text size="lg" fw="500" >
+          {t("areYouSure", "Are you sure you want to leave?")}
+        </Text>
+        </Stack>

-
-        <Group justify="space-between" gap="sm">
-          <Button
-            variant="light"
-            color="red"
-            onClick={handleDiscardChanges}
-          >
-            {t("discardChanges", "Discard Changes")}
-          </Button>
-
+        {/* Desktop layout: 2 groups side by side */}
+        <Group justify="space-between" gap="xl" visibleFrom="md">
          <Group gap="sm">
-            <Button
-              variant="light"
-              color="var(--mantine-color-gray-8)"
-              onClick={handleKeepWorking}
-            >
+            <Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
              {t("keepWorking", "Keep Working")}
            </Button>
-
-            {/* TODO:: Add this back in when it works */}
-            {/* {onApplyAndContinue  && (
-              <Button
-                variant="light"
-                color="blue"
-                onClick={handleApplyAndContinue}
-              >
-                {t("applyAndContinue", "Apply & Continue")}
-              </Button>
-            )} */}
-
-            {onExportAndContinue && (
-              <Button
-                onClick={handleExportAndContinue}
-              >
-                {t("exportAndContinue", "Export & Continue")}
+          </Group>
+          <Group gap="sm">
+            <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+              {t("discardChanges", "Discard Changes")}
+            </Button>
+            {onApplyAndContinue && (
+              <Button variant="filled"  onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+                {t("applyAndContinue", "Apply & Leave")}
              </Button>
            )}
          </Group>
        </Group>
+
+        {/* Mobile layout: centered stack of 4 buttons */}
+        <Stack align="center" gap="sm" hiddenFrom="md">
+           <Button variant="light" color="var(--mantine-color-gray-8)"  onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
+            {t("keepWorking", "Keep Working")}
+          </Button>
+          <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+            {t("discardChanges", "Discard Changes")}
+          </Button>
+          {onApplyAndContinue && (
+            <Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+              {t("applyAndContinue", "Apply & Leave")}
+            </Button>
+          )}
+        </Stack>
      </Stack>
    </Modal>
  );
@@ -12,6 +12,8 @@ import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
 import ActiveToolButton from "./quickAccessBar/ActiveToolButton";
+import AppConfigModal from './AppConfigModal';
+import { useAppConfig } from '../../hooks/useAppConfig';
 import {
  isNavButtonActive,
  getNavButtonStyle,
@@ -22,8 +24,9 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
  const { t } = useTranslation();
  const { isRainbowMode } = useRainbowThemeContext();
  const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
-  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
+  const { handleReaderToggle, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
  const { getToolNavigation } = useSidebarNavigation();
+  const { config } = useAppConfig();
  const [configModalOpen, setConfigModalOpen] = useState(false);
  const [activeButton, setActiveButton] = useState<string>('tools');
  const scrollableRef = useRef<HTMLDivElement>(null);
@@ -65,7 +68,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
            onClick: (e: React.MouseEvent) => handleClick(e),
            'aria-label': config.name
          } : {
-            onClick: () => handleClick()
+            onClick: () => handleClick(),
+            'aria-label': config.name
          })}
          size={isActive ? (config.size || 'lg') : 'lg'}
          variant="subtle"
@@ -95,12 +99,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
      type: 'navigation',
      onClick: () => {
        setActiveButton('read');
-        handleBackToTools();
        handleReaderToggle();
      }
    },
-    // TODO: Add sign
-    //{
+    // {
    //  id: 'sign',
    //  name: t("quickAccess.sign", "Sign"),
    //  icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
@@ -111,7 +113,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
    //    setActiveButton('sign');
    //    handleToolSelect('sign');
    //  }
-    //},
+    // },
    {
      id: 'automate',
      name: t("quickAccess.automate", "Automate"),
@@ -150,8 +152,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
    //},
    {
      id: 'config',
-      name: t("quickAccess.config", "Config"),
-      icon: <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
+      name: config?.enableLogin ? t("quickAccess.account", "Account") : t("quickAccess.config", "Config"),
+      icon: config?.enableLogin ? <LocalIcon icon="person-rounded" width="1.25rem" height="1.25rem" /> : <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
      size: 'lg',
      type: 'modal',
      onClick: () => {
@@ -217,7 +219,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
          <div className="spacer" />

          {/* Config button at the bottom */}
-          {/* {buttonConfigs
+          {buttonConfigs
            .filter(config => config.id === 'config')
            .map(config => (
                <div key={config.id} className="flex flex-col items-center gap-1">
@@ -227,6 +229,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                    onClick={config.onClick}
                    style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
                    className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'activeIconScale' : ''}
+                    aria-label={config.name}
                    data-testid={`${config.id}-button`}
                  >
                    <span className="iconContainer">
@@ -237,14 +240,14 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                    {config.name}
                  </span>
                </div>
-            ))} */}
+            ))}
        </div>
      </div>

-      {/* <AppConfigModal
+      <AppConfigModal
        opened={configModalOpen}
        onClose={() => setConfigModalOpen(false)}
-      /> */}
+      />
    </div>
  );
 });
@@ -15,28 +15,35 @@ import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
 import { SearchInterface } from '../viewer/SearchInterface';
 import { ViewerContext } from '../../contexts/ViewerContext';
 import { useSignature } from '../../contexts/SignatureContext';
+import ViewerAnnotationControls from './rightRail/ViewerAnnotationControls';

 import { parseSelection } from '../../utils/bulkselection/parseSelection';


+import { useSidebarContext } from '../../contexts/SidebarContext';
+
 export default function RightRail() {
+  const { sidebarRefs } = useSidebarContext();
  const { t } = useTranslation();
  const [isPanning, setIsPanning] = useState(false);

  // Viewer context for PDF controls - safely handle when not available
  const viewerContext = React.useContext(ViewerContext);
  const { toggleTheme } = useRainbowThemeContext();
-  const { buttons, actions } = useRightRail();
+  const { buttons, actions, allButtonsDisabled } = useRightRail();
+
  const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);

  // Access PageEditor functions for page-editor-specific actions
-  const { pageEditorFunctions } = useToolWorkflow();
+  const { pageEditorFunctions, toolPanelMode, leftPanelView } = useToolWorkflow();
+  const disableForFullscreen = toolPanelMode === 'fullscreen' && leftPanelView === 'toolPicker';

  // CSV input state for page selection
  const [csvInput, setCsvInput] = useState<string>("");

  // Navigation view
  const { workbench: currentView } = useNavigationState();
+  const isCustomWorkbench = typeof currentView === 'string' && currentView.startsWith('custom:');

  // File state and selection
  const { state, selectors } = useFileState();
@@ -175,19 +182,19 @@ export default function RightRail() {
  }, [currentView]);

  return (
-    <div className="right-rail">
+    <div ref={sidebarRefs.rightRailRef} className={`right-rail`} data-sidebar="right-rail">
      <div className="right-rail-inner">
-        {topButtons.length > 0 && (
+        {topButtons.length > 0 && !isCustomWorkbench && (
          <>
            <div className="right-rail-section">
              {topButtons.map(btn => (
-                <Tooltip key={btn.id} content={btn.tooltip} position="left" offset={12} arrow>
+                <Tooltip key={btn.id} content={btn.tooltip} position="left" offset={12} arrow portalTarget={document.body}>
                  <ActionIcon
                    variant="subtle"
                    radius="md"
                    className="right-rail-icon"
                    onClick={() => actions[btn.id]?.()}
-                    disabled={btn.disabled}
+                    disabled={btn.disabled || allButtonsDisabled || disableForFullscreen}
                  >
                    {btn.icon}
                  </ActionIcon>
@@ -199,13 +206,14 @@ export default function RightRail() {
        )}

        {/* Group: PDF Viewer Controls - visible only in viewer mode */}
+        {!isCustomWorkbench && (
        <div
          className={`right-rail-slot ${currentView === 'viewer' ? 'visible right-rail-enter' : 'right-rail-exit'}`}
          aria-hidden={currentView !== 'viewer'}
        >
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
            {/* Search */}
-            <Tooltip content={t('rightRail.search', 'Search PDF')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.search', 'Search PDF')} position="left" offset={12} arrow portalTarget={document.body}>
              <Popover position="left" withArrow shadow="md" offset={8}>
                <Popover.Target>
                  <div style={{ display: 'inline-flex' }}>
@@ -213,7 +221,7 @@ export default function RightRail() {
                      variant="subtle"
                      radius="md"
                      className="right-rail-icon"
-                      disabled={currentView !== 'viewer'}
+                      disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
                      aria-label={typeof t === 'function' ? t('rightRail.search', 'Search PDF') : 'Search PDF'}
                    >
                      <LocalIcon icon="search" width="1.5rem" height="1.5rem" />
@@ -233,7 +241,7 @@ export default function RightRail() {


            {/* Pan Mode */}
-            <Tooltip content={t('rightRail.panMode', 'Pan Mode')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.panMode', 'Pan Mode')} position="left" offset={12} arrow portalTarget={document.body}>
              <ActionIcon
                variant={isPanning ? "filled" : "subtle"}
                color={isPanning ? "blue" : undefined}
@@ -243,14 +251,14 @@ export default function RightRail() {
                  viewerContext?.panActions.togglePan();
                  setIsPanning(!isPanning);
                }}
-                disabled={currentView !== 'viewer'}
+                disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
              >
                <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />
              </ActionIcon>
            </Tooltip>

            {/* Rotate Left */}
-            <Tooltip content={t('rightRail.rotateLeft', 'Rotate Left')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.rotateLeft', 'Rotate Left')} position="left" offset={12} arrow portalTarget={document.body}>
              <ActionIcon
                variant="subtle"
                radius="md"
@@ -258,14 +266,14 @@ export default function RightRail() {
                onClick={() => {
                  viewerContext?.rotationActions.rotateBackward();
                }}
-                disabled={currentView !== 'viewer'}
+                disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
              >
                <LocalIcon icon="rotate-left" width="1.5rem" height="1.5rem" />
              </ActionIcon>
            </Tooltip>

            {/* Rotate Right */}
-            <Tooltip content={t('rightRail.rotateRight', 'Rotate Right')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.rotateRight', 'Rotate Right')} position="left" offset={12} arrow portalTarget={document.body}>
              <ActionIcon
                variant="subtle"
                radius="md"
@@ -273,14 +281,14 @@ export default function RightRail() {
                onClick={() => {
                  viewerContext?.rotationActions.rotateForward();
                }}
-                disabled={currentView !== 'viewer'}
+                disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
              >
                <LocalIcon icon="rotate-right" width="1.5rem" height="1.5rem" />
              </ActionIcon>
            </Tooltip>

            {/* Sidebar Toggle */}
-            <Tooltip content={t('rightRail.toggleSidebar', 'Toggle Sidebar')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.toggleSidebar', 'Toggle Sidebar')} position="left" offset={12} arrow portalTarget={document.body}>
              <ActionIcon
                variant="subtle"
                radius="md"
@@ -288,30 +296,38 @@ export default function RightRail() {
                onClick={() => {
                  viewerContext?.toggleThumbnailSidebar();
                }}
-                disabled={currentView !== 'viewer'}
+                disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
              >
                <LocalIcon icon="view-list" width="1.5rem" height="1.5rem" />
              </ActionIcon>
            </Tooltip>
+
+            {/* Annotation Controls */}
+            <ViewerAnnotationControls
+              currentView={currentView}
+              disabled={currentView !== 'viewer' || allButtonsDisabled || disableForFullscreen}
+            />
          </div>
          <Divider className="right-rail-divider" />
        </div>
+        )}

        {/* Group: Selection controls + Close, animate as one unit when entering/leaving viewer */}
+        {!isCustomWorkbench && (
        <div
          className={`right-rail-slot ${currentView !== 'viewer' ? 'visible right-rail-enter' : 'right-rail-exit'}`}
          aria-hidden={currentView === 'viewer'}
        >
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
            {/* Select All Button */}
-            <Tooltip content={t('rightRail.selectAll', 'Select All')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.selectAll', 'Select All')} position="left" offset={12} arrow portalTarget={document.body}>
              <div>
                <ActionIcon
                  variant="subtle"
                  radius="md"
                  className="right-rail-icon"
                  onClick={handleSelectAll}
-                  disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems}
+                  disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems || allButtonsDisabled || disableForFullscreen}
                >
                  <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />
                </ActionIcon>
@@ -319,14 +335,14 @@ export default function RightRail() {
            </Tooltip>

            {/* Deselect All Button */}
-            <Tooltip content={t('rightRail.deselectAll', 'Deselect All')} position="left" offset={12} arrow>
+            <Tooltip content={t('rightRail.deselectAll', 'Deselect All')} position="left" offset={12} arrow portalTarget={document.body}>
              <div>
                <ActionIcon
                  variant="subtle"
                  radius="md"
                  className="right-rail-icon"
                  onClick={handleDeselectAll}
-                  disabled={currentView === 'viewer' || selectedCount === 0}
+                  disabled={currentView === 'viewer' || selectedCount === 0 || allButtonsDisabled || disableForFullscreen}
                >
                  <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />
                </ActionIcon>
@@ -335,7 +351,7 @@ export default function RightRail() {

            {/* Select by Numbers - page editor only, with animated presence */}
            {pageControlsMounted && (
-                                  <Tooltip content={t('rightRail.selectByNumber', 'Select by Page Numbers')} position="left" offset={12} arrow>
+                                  <Tooltip content={t('rightRail.selectByNumber', 'Select by Page Numbers')} position="left" offset={12} arrow portalTarget={document.body}>

              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
                <Popover position="left" withArrow shadow="md" offset={8}>
@@ -345,7 +361,7 @@ export default function RightRail() {
                          variant="subtle"
                          radius="md"
                          className="right-rail-icon"
-                          disabled={!pageControlsVisible || totalItems === 0}
+                          disabled={!pageControlsVisible || totalItems === 0 || allButtonsDisabled || disableForFullscreen}
                          aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'}
                        >
                          <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
@@ -372,7 +388,7 @@ export default function RightRail() {

            {/* Delete Selected Pages - page editor only, with animated presence */}
            {pageControlsMounted && (
-                              <Tooltip content={t('rightRail.deleteSelected', 'Delete Selected Pages')} position="left" offset={12} arrow>
+                              <Tooltip content={t('rightRail.deleteSelected', 'Delete Selected Pages')} position="left" offset={12} arrow portalTarget={document.body}>

              <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
                  <div style={{ display: 'inline-flex' }}>
@@ -381,7 +397,7 @@ export default function RightRail() {
                      radius="md"
                      className="right-rail-icon"
                      onClick={() => { pageEditorFunctions?.handleDelete?.(); }}
-                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0}
+                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0 || allButtonsDisabled || disableForFullscreen}
                      aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'}
                    >
                      <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />
@@ -394,7 +410,7 @@ export default function RightRail() {

            {/* Export Selected Pages - page editor only */}
            {pageControlsMounted && (
-              <Tooltip content={t('rightRail.exportSelected', 'Export Selected Pages')} position="left" offset={12} arrow>
+              <Tooltip content={t('rightRail.exportSelected', 'Export Selected Pages')} position="left" offset={12} arrow portalTarget={document.body}>
                <div className={`right-rail-fade ${pageControlsVisible ? 'enter' : 'exit'}`} aria-hidden={!pageControlsVisible}>
                  <div style={{ display: 'inline-flex' }}>
                    <ActionIcon
@@ -402,7 +418,7 @@ export default function RightRail() {
                      radius="md"
                      className="right-rail-icon"
                      onClick={() => { pageEditorFunctions?.onExportSelected?.(); }}
-                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0 || pageEditorFunctions?.exportLoading}
+                      disabled={!pageControlsVisible || (pageEditorFunctions?.selectedPageIds?.length || 0) === 0 || pageEditorFunctions?.exportLoading || allButtonsDisabled || disableForFullscreen}
                      aria-label={typeof t === 'function' ? t('rightRail.exportSelected', 'Export Selected Pages') : 'Export Selected Pages'}
                    >
                      <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
@@ -413,7 +429,7 @@ export default function RightRail() {
            )}

            {/* Close (File Editor: Close Selected | Page Editor: Close PDF) */}
-            <Tooltip content={currentView === 'pageEditor' ? t('rightRail.closePdf', 'Close PDF') : t('rightRail.closeSelected', 'Close Selected Files')} position="left" offset={12} arrow>
+            <Tooltip content={currentView === 'pageEditor' ? t('rightRail.closePdf', 'Close PDF') : t('rightRail.closeSelected', 'Close Selected Files')} position="left" offset={12} arrow portalTarget={document.body}>
              <div>
                <ActionIcon
                  variant="subtle"
@@ -423,7 +439,8 @@ export default function RightRail() {
                  disabled={
                    currentView === 'viewer' ||
                    (currentView === 'fileEditor' && selectedCount === 0) ||
-                    (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf))
+                    (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf)) ||
+                    allButtonsDisabled || disableForFullscreen
                  }
                >
                  <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />
@@ -434,10 +451,12 @@ export default function RightRail() {

          <Divider className="right-rail-divider" />
        </div>
+        )}

        {/* Theme toggle and Language dropdown */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
-          <Tooltip content={t('rightRail.toggleTheme', 'Toggle Theme')} position="left" offset={12} arrow>
+          <Tooltip content={t('rightRail.toggleTheme', 'Toggle Theme')} position="left" offset={12} arrow portalTarget={document.body}
+          >
            <ActionIcon
              variant="subtle"
              radius="md"
@@ -448,13 +467,17 @@ export default function RightRail() {
            </ActionIcon>
          </Tooltip>

-          <LanguageSelector position="left-start" offset={6} compact />
+          <Tooltip content={t('rightRail.language', 'Language')} position="left" offset={12} arrow portalTarget={document.body}>
+            <div style={{ display: 'inline-flex' }}>
+              <LanguageSelector position="left-start" offset={6} compact />
+            </div>
+          </Tooltip>

          <Tooltip content={
            currentView === 'pageEditor'
              ? t('rightRail.exportAll', 'Export PDF')
              : (selectedCount > 0 ? t('rightRail.downloadSelected', 'Download Selected Files') : t('rightRail.downloadAll', 'Download All'))
-          } position="left" offset={12} arrow>
+          } position="left" offset={12} arrow portalTarget={document.body}>
            <div>
              <ActionIcon
                variant="subtle"
@@ -462,7 +485,7 @@ export default function RightRail() {
                className="right-rail-icon"
                onClick={handleExportAll}
                disabled={
-                  currentView === 'viewer' ? !exportState?.canExport : totalItems === 0
+                  disableForFullscreen || (currentView === 'viewer' ? !exportState?.canExport : totalItems === 0 || allButtonsDisabled)
                }
              >
                <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
@@ -477,4 +500,3 @@ export default function RightRail() {
  );
 }

-
@@ -0,0 +1,34 @@
+import React from "react";
+
+interface ToolIconProps {
+  icon: React.ReactNode;
+  opacity?: number;
+  color?: string;
+  marginRight?: string;
+}
+
+/**
+ * Shared icon component for consistent tool icon styling across the application.
+ * Uses the same visual pattern as ToolButton: scaled to 0.8, centered transform, consistent spacing.
+ */
+export const ToolIcon: React.FC<ToolIconProps> = ({
+  icon,
+  opacity = 1,
+  color = "var(--tools-text-and-icon-color)",
+  marginRight = "0.5rem"
+}) => {
+  return (
+    <div
+      className="tool-button-icon"
+      style={{
+        color,
+        marginRight,
+        transform: "scale(0.8)",
+        transformOrigin: "center",
+        opacity
+      }}
+    >
+      {icon}
+    </div>
+  );
+};
@@ -8,6 +8,7 @@ import { TooltipContent } from './tooltip/TooltipContent';
 import { useSidebarContext } from '../../contexts/SidebarContext';
 import { BASE_PATH } from '../../constants/app';
 import styles from './tooltip/Tooltip.module.css';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';

 export interface TooltipProps {
  sidebarTooltip?: boolean;
@@ -28,6 +29,10 @@ export interface TooltipProps {
  pinOnClick?: boolean;
  /** If true, clicking outside also closes when not pinned (default true) */
  closeOnOutside?: boolean;
+  /** If true, tooltip interaction is disabled entirely */
+  disabled?: boolean;
+  /** If false, tooltip will not open on focus (hover only) */
+  openOnFocus?: boolean;
 }

 export const Tooltip: React.FC<TooltipProps> = ({
@@ -48,6 +53,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
  containerStyle = {},
  pinOnClick = false,
  closeOnOutside = true,
+  disabled = false,
+  openOnFocus = true,
 }) => {
  const [internalOpen, setInternalOpen] = useState(false);
  const [isPinned, setIsPinned] = useState(false);
@@ -68,7 +75,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
  const sidebarContext = sidebarTooltip ? useSidebarContext() : null;

  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? !!controlledOpen : internalOpen;
+  const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled;

  const setOpen = useCallback(
    (newOpen: boolean) => {
@@ -148,15 +155,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
  // === Trigger handlers ===
  const openWithDelay = useCallback(() => {
    clearTimers();
+    if (disabled) return;
    openTimeoutRef.current = setTimeout(() => setOpen(true), Math.max(0, delay || 0));
-  }, [clearTimers, setOpen, delay]);
+  }, [clearTimers, setOpen, delay, disabled]);

  const handlePointerEnter = useCallback(
    (e: React.PointerEvent) => {
-      if (!isPinned) openWithDelay();
+      if (!isPinned && !disabled) openWithDelay();
      (children.props as any)?.onPointerEnter?.(e);
    },
-    [isPinned, openWithDelay, children.props]
+    [isPinned, openWithDelay, children.props, disabled]
  );

  const handlePointerLeave = useCallback(
@@ -219,10 +227,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
  // Keyboard / focus accessibility
  const handleFocus = useCallback(
    (e: React.FocusEvent) => {
-      if (!isPinned) openWithDelay();
+      if (!isPinned && !disabled && openOnFocus) openWithDelay();
      (children.props as any)?.onFocus?.(e);
    },
-    [isPinned, openWithDelay, children.props]
+    [isPinned, openWithDelay, children.props, disabled, openOnFocus]
  );

  const handleBlur = useCallback(
@@ -291,7 +299,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
        left: coords.left,
        width: maxWidth !== undefined ? maxWidth : (sidebarTooltip ? '25rem' as const : undefined),
        minWidth,
-        zIndex: 9999,
+        zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
        visibility: positionReady ? 'visible' : 'hidden',
        opacity: positionReady ? 1 : 0,
        color: 'var(--text-primary)',
@@ -345,9 +353,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
  return (
    <>
      {childWithHandlers}
-      {portalTarget && document.body.contains(portalTarget)
-        ? tooltipElement && createPortal(tooltipElement, portalTarget)
-        : tooltipElement}
+      {(() => {
+        const defaultTarget = typeof document !== 'undefined' ? document.body : null;
+        const target = portalTarget ?? defaultTarget;
+        return tooltipElement && target
+          ? createPortal(tooltipElement, target)
+          : tooltipElement;
+      })()}
    </>
  );
 };
@@ -5,10 +5,13 @@ import rainbowStyles from '../../styles/rainbow.module.css';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import { WorkbenchType, isValidWorkbench } from '../../types/workbench';
+import type { CustomWorkbenchViewInstance } from '../../contexts/ToolWorkflowContext';
+import { FileDropdownMenu } from './FileDropdownMenu';


-const viewOptionStyle = {
+const viewOptionStyle: React.CSSProperties = {
  display: 'inline-flex',
  flexDirection: 'row',
  alignItems: 'center',
@@ -19,16 +22,39 @@ const viewOptionStyle = {


 // Build view options showing text always
-const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null) => {
+const createViewOptions = (
+  currentView: WorkbenchType,
+  switchingTo: WorkbenchType | null,
+  activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>,
+  currentFileIndex: number,
+  onFileSelect?: (index: number) => void,
+  customViews?: CustomWorkbenchViewInstance[]
+) => {
+  const currentFile = activeFiles[currentFileIndex];
+  const isInViewer = currentView === 'viewer';
+  const fileName = currentFile?.name || '';
+  const displayName = isInViewer && fileName ? fileName : 'Viewer';
+  const hasMultipleFiles = activeFiles.length > 1;
+  const showDropdown = isInViewer && hasMultipleFiles;
+
  const viewerOption = {
-    label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
+    label: showDropdown ? (
+      <FileDropdownMenu
+        displayName={displayName}
+        activeFiles={activeFiles}
+        currentFileIndex={currentFileIndex}
+        onFileSelect={onFileSelect}
+        switchingTo={switchingTo}
+        viewOptionStyle={viewOptionStyle}
+      />
+    ) : (
+      <div style={viewOptionStyle}>
        {switchingTo === "viewer" ? (
          <Loader size="xs" />
        ) : (
          <VisibilityIcon fontSize="small" />
        )}
-        <span>Viewer</span>
+        <span className="ph-no-capture">{displayName}</span>
      </div>
    ),
    value: "viewer",
@@ -36,7 +62,7 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp

  const pageEditorOption = {
    label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
+      <div style={viewOptionStyle}>
        {currentView === "pageEditor" ? (
          <>
            {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
@@ -55,7 +81,7 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp

  const fileEditorOption = {
    label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
+      <div style={viewOptionStyle}>
        {currentView === "fileEditor" ? (
          <>
            {switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />}
@@ -72,23 +98,48 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp
    value: "fileEditor",
  };

-  // Build options array conditionally
-  return [
+  const baseOptions = [
    viewerOption,
    pageEditorOption,
    fileEditorOption,
  ];
+
+  const customOptions = (customViews ?? []) 
+    .filter((view) => view.data != null)
+    .map((view) => ({
+      label: (
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {switchingTo === view.workbenchId ? (
+            <Loader size="xs" />
+          ) : (
+            view.icon || <PictureAsPdfIcon fontSize="small" />
+          )}
+          <span>{view.label}</span>
+        </div>
+      ),
+      value: view.workbenchId,
+    }));
+
+  return [...baseOptions, ...customOptions];
 };

 interface TopControlsProps {
  currentView: WorkbenchType;
  setCurrentView: (view: WorkbenchType) => void;
+  customViews?: CustomWorkbenchViewInstance[];
+  activeFiles?: Array<{ fileId: string; name: string; versionNumber?: number }>;
+  currentFileIndex?: number;
+  onFileSelect?: (index: number) => void;
 }

 const TopControls = ({
  currentView,
  setCurrentView,
-  }: TopControlsProps) => {
+  customViews = [],
+  activeFiles = [],
+  currentFileIndex = 0,
+  onFileSelect,
+}: TopControlsProps) => {
  const { isRainbowMode } = useRainbowThemeContext();
  const [switchingTo, setSwitchingTo] = useState<WorkbenchType | null>(null);

@@ -118,7 +169,7 @@ const TopControls = ({
    <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
      <div className="flex justify-center mt-[0.5rem]">
        <SegmentedControl
-          data={createViewOptions(currentView, switchingTo)}
+          data={createViewOptions(currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect)}
          value={currentView}
          onChange={handleViewChange}
          color="blue"
@@ -0,0 +1,64 @@
+import React from 'react';
+import { NavKey } from './types';
+import HotkeysSection from './configSections/HotkeysSection';
+import GeneralSection from './configSections/GeneralSection';
+
+export interface ConfigNavItem {
+  key: NavKey;
+  label: string;
+  icon: string;
+  component: React.ReactNode;
+}
+
+export interface ConfigNavSection {
+  title: string;
+  items: ConfigNavItem[];
+}
+
+export interface ConfigColors {
+  navBg: string;
+  sectionTitle: string;
+  navItem: string;
+  navItemActive: string;
+  navItemActiveBg: string;
+  contentBg: string;
+  headerBorder: string;
+}
+
+export const createConfigNavSections = (
+  Overview: React.ComponentType<{ onLogoutClick: () => void }>,
+  onLogoutClick: () => void
+): ConfigNavSection[] => {
+  const sections: ConfigNavSection[] = [
+    {
+      title: 'Account',
+      items: [
+        {
+          key: 'overview',
+          label: 'Overview',
+          icon: 'person-rounded',
+          component: <Overview onLogoutClick={onLogoutClick} />
+        },
+      ],
+    },
+    {
+      title: 'Preferences',
+      items: [
+        {
+          key: 'general',
+          label: 'General',
+          icon: 'settings-rounded',
+          component: <GeneralSection />
+        },
+        {
+          key: 'hotkeys',
+          label: 'Keyboard Shortcuts',
+          icon: 'keyboard-rounded',
+          component: <HotkeysSection />
+        },
+      ],
+    },
+  ];
+
+  return sections;
+};
@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { Paper, Stack, Switch, Text, Tooltip, NumberInput, SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { usePreferences } from '../../../../contexts/PreferencesContext';
+import { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
+
+const DEFAULT_AUTO_UNZIP_FILE_LIMIT = 4;
+
+const GeneralSection: React.FC = () => {
+  const { t } = useTranslation();
+  const { preferences, updatePreference } = usePreferences();
+  const [fileLimitInput, setFileLimitInput] = useState<number | string>(preferences.autoUnzipFileLimit);
+
+  // Sync local state with preference changes
+  useEffect(() => {
+    setFileLimitInput(preferences.autoUnzipFileLimit);
+  }, [preferences.autoUnzipFileLimit]);
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">{t('settings.general.title', 'General')}</Text>
+        <Text size="sm" c="dimmed">
+          {t('settings.general.description', 'Configure general application preferences.')}
+        </Text>
+      </div>
+
+      <Paper withBorder p="md" radius="md">
+        <Stack gap="md">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div>
+              <Text fw={500} size="sm">
+                {t('settings.general.defaultToolPickerMode', 'Default tool picker mode')}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {t('settings.general.defaultToolPickerModeDescription', 'Choose whether the tool picker opens in fullscreen or sidebar by default')}
+              </Text>
+            </div>
+            <SegmentedControl
+              value={preferences.defaultToolPanelMode}
+              onChange={(val: string) => updatePreference('defaultToolPanelMode', val as ToolPanelMode)}
+              data={[
+                { label: t('settings.general.mode.sidebar', 'Sidebar'), value: 'sidebar' },
+                { label: t('settings.general.mode.fullscreen', 'Fullscreen'), value: 'fullscreen' },
+              ]}
+            />
+          </div>
+          <Tooltip
+            label={t('settings.general.autoUnzipTooltip', 'Automatically extract ZIP files returned from API operations. Disable to keep ZIP files intact. This does not affect automation workflows.')}
+            multiline
+            w={300}
+            withArrow
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t('settings.general.autoUnzip', 'Auto-unzip API responses')}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t('settings.general.autoUnzipDescription', 'Automatically extract files from ZIP responses')}
+                </Text>
+              </div>
+              <Switch
+                checked={preferences.autoUnzip}
+                onChange={(event) => updatePreference('autoUnzip', event.currentTarget.checked)}
+              />
+            </div>
+          </Tooltip>
+
+          <Tooltip
+            label={t('settings.general.autoUnzipFileLimitTooltip', 'Only unzip if the ZIP contains this many files or fewer. Set higher to extract larger ZIPs.')}
+            multiline
+            w={300}
+            withArrow
+          >
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'help' }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t('settings.general.autoUnzipFileLimit', 'Auto-unzip file limit')}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t('settings.general.autoUnzipFileLimitDescription', 'Maximum number of files to extract from ZIP')}
+                </Text>
+              </div>
+              <NumberInput
+                value={fileLimitInput}
+                onChange={setFileLimitInput}
+                onBlur={() => {
+                  const numValue = Number(fileLimitInput);
+                  const finalValue = (!fileLimitInput || isNaN(numValue) || numValue < 1 || numValue > 100) ? DEFAULT_AUTO_UNZIP_FILE_LIMIT : numValue;
+                  setFileLimitInput(finalValue);
+                  updatePreference('autoUnzipFileLimit', finalValue);
+                }}
+                min={1}
+                max={100}
+                step={1}
+                disabled={!preferences.autoUnzip}
+                style={{ width: 90 }}
+              />
+            </div>
+          </Tooltip>
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+};
+
+export default GeneralSection;
@@ -0,0 +1,204 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '../../../../contexts/ToolWorkflowContext';
+import { useHotkeys } from '../../../../contexts/HotkeyContext';
+import { ToolId } from '../../../../types/toolId';
+import HotkeyDisplay from '../../../hotkeys/HotkeyDisplay';
+import { bindingEquals, eventToBinding, HotkeyBinding } from '../../../../utils/hotkeys';
+import { ToolRegistryEntry } from 'src/data/toolsTaxonomy';
+
+const rowStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+};
+
+const rowHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '0.5rem',
+};
+
+const HotkeysSection: React.FC = () => {
+  const { t } = useTranslation();
+  const { toolRegistry } = useToolWorkflow();
+  const { hotkeys, defaults, updateHotkey, resetHotkey, pauseHotkeys, resumeHotkeys, getDisplayParts, isMac } = useHotkeys();
+  const [editingTool, setEditingTool] = useState<ToolId | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const tools = useMemo(() => Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][], [toolRegistry]);
+
+  const filteredTools = useMemo(() => {
+    if (!searchQuery.trim()) return tools;
+    
+    const query = searchQuery.toLowerCase();
+    return tools.filter(([toolId, tool]) => 
+      tool.name.toLowerCase().includes(query) ||
+      tool.description.toLowerCase().includes(query) ||
+      toolId.toLowerCase().includes(query)
+    );
+  }, [tools, searchQuery]);
+
+  useEffect(() => {
+    if (!editingTool) {
+      return;
+    }
+    pauseHotkeys();
+    return () => {
+      resumeHotkeys();
+    };
+  }, [editingTool, pauseHotkeys, resumeHotkeys]);
+
+  useEffect(() => {
+    if (!editingTool) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setEditingTool(null);
+        setError(null);
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const binding = eventToBinding(event as KeyboardEvent);
+      if (!binding) {
+        const osKey = isMac ? 'mac' : 'windows';
+        const fallbackText = isMac
+          ? 'Include ⌘ (Command), ⌥ (Option), or another modifier in your shortcut.'
+          : 'Include Ctrl, Alt, or another modifier in your shortcut.';
+        setError(t(`settings.hotkeys.errorModifier.${osKey}`, fallbackText));
+        return;
+      }
+
+      const conflictEntry = (Object.entries(hotkeys) as [ToolId, HotkeyBinding][]).find(([toolId, existing]) => (
+        toolId !== editingTool && bindingEquals(existing, binding)
+      ));
+
+      if (conflictEntry) {
+        const conflictKey = conflictEntry[0];
+        const conflictTool = (conflictKey in toolRegistry)
+          ? toolRegistry[conflictKey as ToolId]?.name
+          : conflictKey;
+        setError(t('settings.hotkeys.errorConflict', 'Shortcut already used by {{tool}}.', { tool: conflictTool }));
+        return;
+      }
+
+      updateHotkey(editingTool, binding);
+      setEditingTool(null);
+      setError(null);
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [editingTool, hotkeys, toolRegistry, updateHotkey, t]);
+
+  const handleStartCapture = (toolId: ToolId) => {
+    setEditingTool(toolId);
+    setError(null);
+  };
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">Keyboard Shortcuts</Text>
+        <Text size="sm" c="dimmed">
+          Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.
+        </Text>
+      </div>
+
+      <TextInput
+        placeholder={t('settings.hotkeys.searchPlaceholder', 'Search tools...')}
+        value={searchQuery}
+        onChange={(event) => setSearchQuery(event.currentTarget.value)}
+        size="md"
+        radius="md"
+      />
+
+      <Paper withBorder p="md" radius="md">
+        <Stack gap="md">
+          {filteredTools.length === 0 ? (
+            <Text c="dimmed" ta="center" py="xl">
+              {t('toolPicker.noToolsFound', 'No tools found')}
+            </Text>
+          ) : (
+            filteredTools.map(([toolId, tool], index) => {
+            const currentBinding = hotkeys[toolId];
+            const defaultBinding = defaults[toolId];
+            const isEditing = editingTool === toolId;
+            const defaultParts = getDisplayParts(defaultBinding);
+            const defaultLabel = defaultParts.length > 0
+              ? defaultParts.join(' + ')
+              : t('settings.hotkeys.none', 'Not assigned');
+
+            return (
+              <React.Fragment key={toolId}>
+                <Box style={rowStyle} data-testid={`hotkey-row-${toolId}`}>
+                  <div style={rowHeaderStyle}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: 0 }}>
+                      <Text fw={600}>{tool.name}</Text>
+                      <Group gap="xs" wrap="wrap" align="center">
+                        <HotkeyDisplay binding={currentBinding} size="md" />
+                        {!bindingEquals(currentBinding, defaultBinding) && (
+                          <Badge variant="light" color="orange" radius="sm">
+                            {t('settings.hotkeys.customBadge', 'Custom')}
+                          </Badge>
+                        )}
+                        <Text size="xs" c="dimmed">
+                          {t('settings.hotkeys.defaultLabel', 'Default: {{shortcut}}', { shortcut: defaultLabel })}
+                        </Text>
+                      </Group>
+                    </div>
+
+                    <Group gap="xs">
+                      <Button
+                        size="xs"
+                        variant={isEditing ? 'filled' : 'default'}
+                        color={isEditing ? 'blue' : undefined}
+                        onClick={() => handleStartCapture(toolId)}
+                      >
+                        {isEditing
+                          ? t('settings.hotkeys.capturing', 'Press keys… (Esc to cancel)')
+                          : t('settings.hotkeys.change', 'Change shortcut')}
+                      </Button>
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        disabled={bindingEquals(currentBinding, defaultBinding)}
+                        onClick={() => resetHotkey(toolId)}
+                      >
+                        {t('settings.hotkeys.reset', 'Reset')}
+                      </Button>
+                    </Group>
+                  </div>
+
+                  {isEditing && error && (
+                    <Alert color="red" radius="sm" variant="filled">
+                      {error}
+                    </Alert>
+                  )}
+                </Box>
+
+                {index < filteredTools.length - 1 && <Divider />}
+              </React.Fragment>
+            );
+          })
+          )}
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+};
+
+export default HotkeysSection;
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Stack, Text, Code, Group, Badge, Alert, Loader } from '@mantine/core';
+import { useAppConfig } from '../../../../hooks/useAppConfig';
+
+const Overview: React.FC = () => {
+  const { config, loading, error } = useAppConfig();
+
+  const renderConfigSection = (title: string, data: any) => {
+    if (!data || typeof data !== 'object') return null;
+
+    return (
+      <Stack gap="xs" mb="md">
+        <Text fw={600} size="md" c="blue">{title}</Text>
+        <Stack gap="xs" pl="md">
+          {Object.entries(data).map(([key, value]) => (
+            <Group key={key} wrap="nowrap" align="flex-start">
+              <Text size="sm" w={150} style={{ flexShrink: 0 }} c="dimmed">
+                {key}:
+              </Text>
+              {typeof value === 'boolean' ? (
+                <Badge color={value ? 'green' : 'red'} size="sm">
+                  {value ? 'true' : 'false'}
+                </Badge>
+              ) : typeof value === 'object' ? (
+                <Code block>{JSON.stringify(value, null, 2)}</Code>
+              ) : (
+                String(value) || 'null'
+              )}
+            </Group>
+          ))}
+        </Stack>
+      </Stack>
+    );
+  };
+
+  const basicConfig = config ? {
+    appName: config.appName,
+    appNameNavbar: config.appNameNavbar,
+    baseUrl: config.baseUrl,
+    contextPath: config.contextPath,
+    serverPort: config.serverPort,
+  } : null;
+
+  const securityConfig = config ? {
+    enableLogin: config.enableLogin,
+  } : null;
+
+  const systemConfig = config ? {
+    enableAlphaFunctionality: config.enableAlphaFunctionality,
+    enableAnalytics: config.enableAnalytics,
+  } : null;
+
+  const integrationConfig = config ? {
+    SSOAutoLogin: config.SSOAutoLogin,
+  } : null;
+
+  if (loading) {
+    return (
+      <Stack align="center" py="md">
+        <Loader size="sm" />
+        <Text size="sm" c="dimmed">Loading configuration...</Text>
+      </Stack>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert color="red" title="Error">
+        {error}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">Application Configuration</Text>
+        <Text size="sm" c="dimmed">
+          Current application settings and configuration details.
+        </Text>
+      </div>
+
+      {config && (
+        <>
+          {renderConfigSection('Basic Configuration', basicConfig)}
+          {renderConfigSection('Security Configuration', securityConfig)}
+          {renderConfigSection('System Configuration', systemConfig)}
+          {renderConfigSection('Integration Configuration', integrationConfig)}
+
+          {config.error && (
+            <Alert color="yellow" title="Configuration Warning">
+              {config.error}
+            </Alert>
+          )}
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default Overview;
@@ -0,0 +1,19 @@
+export type NavKey =
+  | 'overview'
+  | 'preferences'
+  | 'notifications'
+  | 'connections'
+  | 'general'
+  | 'people'
+  | 'teams'
+  | 'security'
+  | 'identity'
+  | 'plan'
+  | 'payments'
+  | 'requests'
+  | 'developer'
+  | 'api-keys'
+  | 'hotkeys';
+
+
+  // some of these are not used yet, but appear in figma designs
@@ -19,7 +19,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
  children
 }) => {
  if (!file) return null;
-  
+
  const containerStyle = {
    position: 'relative' as const,
    cursor: onClick ? 'pointer' : 'default',
@@ -36,6 +36,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
    return (
      <Box style={containerStyle} onClick={onClick}>
        <Image
+          className='ph-no-capture'
          src={thumbnail}
          alt={`Preview of ${file.name}`}
          fit="contain"
@@ -49,11 +50,12 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
  return (
    <Box style={containerStyle} onClick={onClick}>
      <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
-        <PictureAsPdfIcon 
-          style={{ 
-            fontSize: '2rem', 
-            color: 'var(--mantine-color-gray-6)' 
-          }} 
+        <PictureAsPdfIcon
+          className='ph-no-capture'
+          style={{
+            fontSize: '2rem',
+            color: 'var(--mantine-color-gray-6)'
+          }}
        />
      </Center>
      {children}
@@ -61,4 +63,4 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
  );
 };

-export default DocumentThumbnail;
+export default DocumentThumbnail;
@@ -46,6 +46,13 @@
  background-color: transparent !important;
 }

+/* When all buttons are disabled via context */
+.right-rail--all-disabled .right-rail-icon {
+  color: var(--right-rail-icon-disabled) !important;
+  background-color: transparent !important;
+  pointer-events: none !important;
+}
+
 .right-rail-spacer {
  flex: 1;
 }
@@ -67,7 +74,7 @@
 }

 .right-rail-slot.visible {
-  max-height: 18rem; /* increased to fit additional controls + divider */
+  max-height: 40rem; /* increased to fit additional controls + divider */
  opacity: 1;
 }

@@ -77,14 +84,14 @@
    opacity: 0;
  }
  100% {
-    max-height: 18rem;
+    max-height: 40rem;
    opacity: 1;
  }
 }

@keyframes rightRailShrinkUp {
  0% {
-    max-height: 18rem;
+    max-height: 40rem;
    opacity: 1;
  }
  100% {
@@ -0,0 +1,233 @@
+import React, { useState, useEffect } from 'react';
+import { ActionIcon, Popover } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import LocalIcon from '../LocalIcon';
+import { Tooltip } from '../Tooltip';
+import { ViewerContext } from '../../../contexts/ViewerContext';
+import { useSignature } from '../../../contexts/SignatureContext';
+import { ColorSwatchButton, ColorPicker } from '../../annotation/shared/ColorPicker';
+import { useFileState, useFileContext } from '../../../contexts/FileContext';
+import { generateThumbnailWithMetadata } from '../../../utils/thumbnailUtils';
+import { createProcessedFile } from '../../../contexts/file/fileActions';
+import { createStirlingFile, createNewStirlingFileStub } from '../../../types/fileContext';
+import { useNavigationState } from '../../../contexts/NavigationContext';
+
+interface ViewerAnnotationControlsProps {
+  currentView: string;
+  disabled?: boolean;
+}
+
+export default function ViewerAnnotationControls({ currentView, disabled = false }: ViewerAnnotationControlsProps) {
+  const { t } = useTranslation();
+  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [isHoverColorPickerOpen, setIsHoverColorPickerOpen] = useState(false);
+
+  // Viewer context for PDF controls - safely handle when not available
+  const viewerContext = React.useContext(ViewerContext);
+
+  // Signature context for accessing drawing API
+  const { signatureApiRef, isPlacementMode } = useSignature();
+
+  // File state for save functionality
+  const { state, selectors } = useFileState();
+  const { actions: fileActions } = useFileContext();
+  const activeFiles = selectors.getFiles();
+
+  // Check if we're in sign mode
+  const { selectedTool } = useNavigationState();
+  const isSignMode = selectedTool === 'sign';
+
+  // Turn off annotation mode when switching away from viewer
+  useEffect(() => {
+    if (currentView !== 'viewer' && viewerContext?.isAnnotationMode) {
+      viewerContext.setAnnotationMode(false);
+    }
+  }, [currentView, viewerContext]);
+
+  // Don't show any annotation controls in sign mode
+  if (isSignMode) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Annotation Visibility Toggle */}
+      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position="left" offset={12} arrow portalTarget={document.body}>
+        <ActionIcon
+          variant="subtle"
+          radius="md"
+          className="right-rail-icon"
+          onClick={() => {
+            viewerContext?.toggleAnnotationsVisibility();
+          }}
+          disabled={disabled || currentView !== 'viewer' || viewerContext?.isAnnotationMode || isPlacementMode}
+        >
+          <LocalIcon
+            icon={viewerContext?.isAnnotationsVisible ? "visibility" : "visibility-off-rounded"}
+            width="1.5rem"
+            height="1.5rem"
+          />
+        </ActionIcon>
+      </Tooltip>
+
+      {/* Annotation Mode Toggle with Drawing Controls */}
+      {viewerContext?.isAnnotationMode ? (
+        // When active: Show color picker on hover
+        <div
+          onMouseEnter={() => setIsHoverColorPickerOpen(true)}
+          onMouseLeave={() => setIsHoverColorPickerOpen(false)}
+          style={{ display: 'inline-flex' }}
+        >
+          <Popover
+            opened={isHoverColorPickerOpen}
+            onClose={() => setIsHoverColorPickerOpen(false)}
+            position="left"
+            withArrow
+            shadow="md"
+            offset={8}
+          >
+            <Popover.Target>
+              <ActionIcon
+                variant="filled"
+                color="blue"
+                radius="md"
+                className="right-rail-icon"
+                onClick={() => {
+                  viewerContext?.toggleAnnotationMode();
+                  setIsHoverColorPickerOpen(false); // Close hover color picker when toggling off
+                  // Deactivate drawing tool when exiting annotation mode
+                  if (signatureApiRef?.current) {
+                    try {
+                      signatureApiRef.current.deactivateTools();
+                    } catch (error) {
+                      console.log('Signature API not ready:', error);
+                    }
+                  }
+                }}
+              disabled={disabled}
+                aria-label="Drawing mode active"
+              >
+                <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
+              </ActionIcon>
+            </Popover.Target>
+            <Popover.Dropdown>
+              <div style={{ minWidth: '8rem' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', padding: '0.5rem' }}>
+                  <div style={{ fontSize: '0.8rem', fontWeight: 500 }}>Drawing Color</div>
+                  <ColorSwatchButton
+                    color={selectedColor}
+                    size={32}
+                    onClick={() => {
+                      setIsHoverColorPickerOpen(false); // Close hover picker
+                      setIsColorPickerOpen(true); // Open main color picker modal
+                    }}
+                  />
+                </div>
+              </div>
+            </Popover.Dropdown>
+          </Popover>
+        </div>
+      ) : (
+        // When inactive: Show "Draw" tooltip
+        <Tooltip content={t('rightRail.draw', 'Draw')} position="left" offset={12} arrow portalTarget={document.body}>
+          <ActionIcon
+            variant="subtle"
+            radius="md"
+            className="right-rail-icon"
+            onClick={() => {
+              viewerContext?.toggleAnnotationMode();
+              // Activate ink drawing tool when entering annotation mode
+              if (signatureApiRef?.current && currentView === 'viewer') {
+                try {
+                  signatureApiRef.current.activateDrawMode();
+                  signatureApiRef.current.updateDrawSettings(selectedColor, 2);
+                } catch (error) {
+                  console.log('Signature API not ready:', error);
+                }
+              }
+            }}
+            disabled={disabled}
+            aria-label={typeof t === 'function' ? t('rightRail.draw', 'Draw') : 'Draw'}
+          >
+            <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
+          </ActionIcon>
+        </Tooltip>
+      )}
+
+      {/* Save PDF with Annotations */}
+      <Tooltip content={t('rightRail.save', 'Save')} position="left" offset={12} arrow portalTarget={document.body}>
+        <ActionIcon
+          variant="subtle"
+          radius="md"
+          className="right-rail-icon"
+          onClick={async () => {
+            if (viewerContext?.exportActions?.saveAsCopy && currentView === 'viewer') {
+              try {
+                const pdfArrayBuffer = await viewerContext.exportActions.saveAsCopy();
+                if (pdfArrayBuffer) {
+                  // Create new File object with flattened annotations
+                  const blob = new Blob([pdfArrayBuffer], { type: 'application/pdf' });
+
+                  // Get the original file name or use a default
+                  const originalFileName = activeFiles.length > 0 ? activeFiles[0].name : 'document.pdf';
+                  const newFile = new File([blob], originalFileName, { type: 'application/pdf' });
+
+                  // Replace the current file in context with the saved version (exact same logic as Sign tool)
+                  if (activeFiles.length > 0) {
+                    // Generate thumbnail and metadata for the saved file
+                    const thumbnailResult = await generateThumbnailWithMetadata(newFile);
+                    const processedFileMetadata = createProcessedFile(thumbnailResult.pageCount, thumbnailResult.thumbnail);
+
+                    // Get current file info
+                    const currentFileIds = state.files.ids;
+                    if (currentFileIds.length > 0) {
+                      const currentFileId = currentFileIds[0];
+                      const currentRecord = selectors.getStirlingFileStub(currentFileId);
+
+                      if (!currentRecord) {
+                        console.error('No file record found for:', currentFileId);
+                        return;
+                      }
+
+                      // Create output stub and file (exact same as Sign tool)
+                      const outputStub = createNewStirlingFileStub(newFile, undefined, thumbnailResult.thumbnail, processedFileMetadata);
+                      const outputStirlingFile = createStirlingFile(newFile, outputStub.id);
+
+                      // Replace the original file with the saved version
+                      await fileActions.consumeFiles([currentFileId], [outputStirlingFile], [outputStub]);
+                    }
+                  }
+                }
+              } catch (error) {
+                console.error('Error saving PDF:', error);
+              }
+            }
+          }}
+          disabled={disabled}
+        >
+          <LocalIcon icon="save" width="1.5rem" height="1.5rem" />
+        </ActionIcon>
+      </Tooltip>
+
+      {/* Color Picker Modal */}
+      <ColorPicker
+        isOpen={isColorPickerOpen}
+        onClose={() => setIsColorPickerOpen(false)}
+        selectedColor={selectedColor}
+        onColorChange={(color) => {
+          setSelectedColor(color);
+          // Update drawing tool color if annotation mode is active
+          if (viewerContext?.isAnnotationMode && signatureApiRef?.current && currentView === 'viewer') {
+            try {
+              signatureApiRef.current.updateDrawSettings(color, 2);
+            } catch (error) {
+              console.log('Unable to update drawing settings:', error);
+            }
+          }
+        }}
+        title="Choose Drawing Color"
+      />
+    </>
+  );
+}
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Slider, Text, Group, NumberInput } from '@mantine/core';
+
+interface Props {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export default function SliderWithInput({
+  label,
+  value,
+  onChange,
+  disabled,
+  min = 0,
+  max = 200,
+  step = 1,
+}: Props) {
+  return (
+    <div>
+      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
+      <Group gap="sm" align="center">
+        <div style={{ flex: 1 }}>
+          <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
+        </div>
+        <NumberInput
+          value={value}
+          onChange={(v) => onChange(Number(v) || 0)}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          style={{ width: 90 }}
+        />
+      </Group>
+    </div>
+  );
+}
+
+
@@ -0,0 +1,253 @@
+import React, { useMemo } from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ToolRegistryEntry, getSubcategoryLabel, getSubcategoryColor, getSubcategoryIcon } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
+import { useToolSections } from '../../hooks/useToolSections';
+import NoToolsFound from './shared/NoToolsFound';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import StarRoundedIcon from '@mui/icons-material/StarRounded';
+import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
+import Badge from '../shared/Badge';
+import './ToolPanel.css';
+import DetailedToolItem from './fullscreen/DetailedToolItem';
+import CompactToolItem from './fullscreen/CompactToolItem';
+import { useFavoriteToolItems } from '../../hooks/tools/useFavoriteToolItems';
+
+interface FullscreenToolListProps {
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  searchQuery: string;
+  showDescriptions: boolean;
+  selectedToolKey: string | null;
+  matchedTextMap: Map<string, string>;
+  onSelect: (id: ToolId) => void;
+}
+
+const FullscreenToolList = ({
+  filteredTools,
+  searchQuery,
+  showDescriptions,
+  selectedToolKey,
+  matchedTextMap: _matchedTextMap,
+  onSelect,
+}: FullscreenToolListProps) => {
+  const { t } = useTranslation();
+  const { toolRegistry, favoriteTools } = useToolWorkflow();
+
+  const { sections, searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  const tooltipPortalTarget = typeof document !== 'undefined' ? document.body : undefined;
+
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
+
+  const quickSection = useMemo(() => sections.find(section => section.key === 'quick'), [sections]);
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string, tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string, tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach(sc => sc.tools.forEach(t => items.push(t)));
+    return items;
+  }, [quickSection]);
+
+  // Show recommended/favorites section only when not searching
+  const showRecentFavorites = searchQuery.trim().length === 0 && ((recommendedItems.length > 0) || favoriteToolItems.length > 0);
+
+  const subcategoryGroups = useMemo(() => {
+    if (searchQuery.trim().length > 0) {
+      return searchGroups;
+    }
+    const allSection = sections.find(section => section.key === 'all');
+    return allSection ? allSection.subcategories : [];
+  }, [searchGroups, sections, searchQuery]);
+
+  if (subcategoryGroups.length === 0 && !showRecentFavorites) {
+    return (
+      <div className="tool-panel__fullscreen-empty">
+        <NoToolsFound />
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.fullscreen.noResults', 'Try adjusting your search or toggle descriptions to find what you need.')}
+        </Text>
+      </div>
+    );
+  }
+
+  const containerClass = showDescriptions
+    ? 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--detailed'
+    : 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--compact';
+
+  // Helper function to render a tool item
+  const renderToolItem = (id: ToolId, tool: ToolRegistryEntry) => {
+    const isSelected = selectedToolKey === id;
+
+    const handleClick = () => {
+      if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') return;
+      if (tool.link) {
+        window.open(tool.link, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      onSelect(id as ToolId);
+    };
+
+    if (showDescriptions) {
+      return (
+        <DetailedToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} />
+      );
+    }
+
+    return (
+      <CompactToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} tooltipPortalTarget={tooltipPortalTarget} />
+    );
+  };
+
+  return (
+    <div className={containerClass}>
+      {showRecentFavorites && (
+        <>
+          {favoriteToolItems.length > 0 && (
+            <section 
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-favorites)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-favorites)',
+                    }}
+                    aria-hidden
+                  >
+                    <StarRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.favorites', 'Favourites')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-favorites)"
+                >
+                  {favoriteToolItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {favoriteToolItems.map((item) => item && renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+
+          {recommendedItems.length > 0 && (
+            <section 
+              className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
+              style={{
+                borderColor: 'var(--fullscreen-border-recommended)',
+              }}
+            >
+              <header className="tool-panel__fullscreen-section-header">
+                <div className="tool-panel__fullscreen-section-title">
+                  <span
+                    className="tool-panel__fullscreen-section-icon"
+                    style={{
+                      color: 'var(--special-color-recommended)',
+                    }}
+                    aria-hidden
+                  >
+                    <ThumbUpRoundedIcon />
+                  </span>
+                  <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
+                    {t('toolPanel.fullscreen.recommended', 'Recommended')}
+                  </Text>
+                </div>
+                <Badge
+                  size="sm"
+                  variant="colored"
+                  color="var(--special-color-recommended)"
+                >
+                  {recommendedItems.length}
+                </Badge>
+              </header>
+              {showDescriptions ? (
+                <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              ) : (
+                <div className="tool-panel__fullscreen-list">
+                  {recommendedItems.map((item: any) => renderToolItem(item.id, item.tool))}
+                </div>
+              )}
+            </section>
+          )}
+        </>
+      )}
+
+      {subcategoryGroups.map(({ subcategoryId, tools }) => {
+        const categoryColor = getSubcategoryColor(subcategoryId);
+
+        return (
+          <section
+            key={subcategoryId}
+            className={`tool-panel__fullscreen-group ${showDescriptions ? 'tool-panel__fullscreen-group--detailed' : 'tool-panel__fullscreen-group--compact'}`}
+            style={{
+              borderColor: `color-mix(in srgb, ${categoryColor} 25%, var(--fullscreen-border-subtle-65))`,
+            }}
+          >
+            <header className="tool-panel__fullscreen-section-header">
+              <div className="tool-panel__fullscreen-section-title">
+                <span
+                  className="tool-panel__fullscreen-section-icon"
+                  style={{
+                    color: categoryColor,
+                  }}
+                  aria-hidden
+                >
+                  {getSubcategoryIcon(subcategoryId)}
+                </span>
+                <Text
+                  size="sm"
+                  fw={600}
+                  tt="uppercase"
+                  lts={0.5}
+                  style={{
+                    color: categoryColor,
+                  }}
+                >
+                  {getSubcategoryLabel(t, subcategoryId)}
+                </Text>
+              </div>
+              <Badge
+                size="sm"
+                variant="colored"
+                color={categoryColor}
+              >
+                {tools.length}
+              </Badge>
+            </header>
+
+            {showDescriptions ? (
+              <div className="tool-panel__fullscreen-grid tool-panel__fullscreen-grid--detailed">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            ) : (
+              <div className="tool-panel__fullscreen-list">
+                {tools.map(({ id, tool }) => renderToolItem(id as ToolId, tool))}
+              </div>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FullscreenToolList;
+
+
@@ -0,0 +1,159 @@
+import { useState, useRef } from 'react';
+import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import ToolSearch from './toolPicker/ToolSearch';
+import FullscreenToolList from './FullscreenToolList';
+import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { BASE_PATH } from '../../constants/app';
+import { Tooltip } from '../shared/Tooltip';
+import './ToolPanel.css';
+import { ToolPanelGeometry } from '../../hooks/tools/useToolPanelGeometry';
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '../../styles/zIndex';
+
+interface FullscreenToolSurfaceProps {
+  searchQuery: string;
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  selectedToolKey: string | null;
+  showDescriptions: boolean;
+  matchedTextMap: Map<string, string>;
+  onSearchChange: (value: string) => void;
+  onSelect: (id: ToolId) => void;
+  onToggleDescriptions: () => void;
+  onExitFullscreenMode: () => void;
+  toggleLabel: string;
+  geometry: ToolPanelGeometry | null;
+}
+
+const FullscreenToolSurface = ({
+  searchQuery,
+  toolRegistry,
+  filteredTools,
+  selectedToolKey,
+  showDescriptions,
+  matchedTextMap,
+  onSearchChange,
+  onSelect,
+  onToggleDescriptions,
+  onExitFullscreenMode,
+  toggleLabel,
+  geometry,
+}: FullscreenToolSurfaceProps) => {
+  const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const [isExiting, setIsExiting] = useState(false);
+  const surfaceRef = useRef<HTMLDivElement>(null);
+
+  // Enable focus trap when surface is active
+  useFocusTrap(surfaceRef, !isExiting);
+
+  const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
+  const brandIconSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
+    colorScheme === "dark" ? "Dark" : "Light"
+  }.svg`;
+  const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
+    colorScheme === "dark" ? "White" : "Black"
+  }Text.svg`;
+
+  const handleExit = () => {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      onExitFullscreenMode();
+      return;
+    }
+
+    setIsExiting(true);
+    const el = surfaceRef.current;
+    if (!el) {
+      onExitFullscreenMode();
+      return;
+    }
+    // Rely on CSS animation end rather than duplicating timing in JS
+    el.addEventListener('animationend', () => {
+      onExitFullscreenMode();
+    }, { once: true });
+};
+
+
+  const style = geometry
+    ? {
+        left: `${geometry.left}px`,
+        top: `${geometry.top}px`,
+        width: `${geometry.width}px`,
+        height: `${geometry.height}px`,
+      }
+    : undefined;
+
+  return (
+    <div
+      className="tool-panel__fullscreen-surface"
+      style={style}
+      role="region"
+      aria-label={t('toolPanel.fullscreen.heading', 'All tools (fullscreen view)')}
+    >
+      <div
+        ref={surfaceRef}
+        className={`tool-panel__fullscreen-surface-inner ${isExiting ? 'tool-panel__fullscreen-surface-inner--exiting' : ''}`}
+      >
+        <header className="tool-panel__fullscreen-header">
+          <div className="tool-panel__fullscreen-brand">
+            <img src={brandIconSrc} alt="" className="tool-panel__fullscreen-brand-icon" />
+            <img src={brandTextSrc} alt={brandAltText} className="tool-panel__fullscreen-brand-text" />
+          </div>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <Tooltip content={toggleLabel} position="bottom" arrow={true} openOnFocus={false} containerStyle={{ zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE }}>
+              <ActionIcon
+                variant="subtle"
+                radius="xl"
+                size="md"
+                onClick={handleExit}
+                aria-label={toggleLabel}
+                style={{ color: 'var(--right-rail-icon)' }}
+              >
+                <DoubleArrowIcon fontSize="small" style={{ transform: 'rotate(180deg)' }} />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+        </header>
+
+        <div className="tool-panel__fullscreen-controls">
+          <ToolSearch
+            value={searchQuery}
+            onChange={onSearchChange}
+            toolRegistry={toolRegistry}
+            mode="filter"
+            autoFocus
+          />
+          <Switch
+            checked={showDescriptions}
+            onChange={() => onToggleDescriptions()}
+            size="md"
+            labelPosition="left"
+            label={t('toolPanel.fullscreen.showDetails', 'Show Details')}
+          />
+        </div>
+
+        <div className="tool-panel__fullscreen-body">
+          <ScrollArea className="tool-panel__fullscreen-scroll" offsetScrollbars>
+            <FullscreenToolList
+              filteredTools={filteredTools}
+              searchQuery={searchQuery}
+              showDescriptions={showDescriptions}
+              selectedToolKey={selectedToolKey}
+              matchedTextMap={matchedTextMap}
+              onSelect={onSelect}
+            />
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FullscreenToolSurface;
+
+
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Stack } from '@mantine/core';
 import { getSubcategoryLabel, ToolRegistryEntry } from '../../data/toolsTaxonomy';
+import { ToolId } from '../../types/toolId';
 import ToolButton from './toolPicker/ToolButton';
 import { useTranslation } from 'react-i18next';
 import { useToolSections } from '../../hooks/useToolSections';
@@ -9,7 +10,7 @@ import NoToolsFound from './shared/NoToolsFound';
 import "./toolPicker/ToolPicker.css";

 interface SearchResultsProps {
-  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
  onSelect: (id: string) => void;
  searchQuery?: string;
 }
@@ -40,13 +41,13 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect,
            {group.tools.map(({ id, tool }) => {
              const matchedText = matchedTextMap.get(id);
              // Check if the match was from synonyms and show the actual synonym that matched
-              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym => 
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym =>
                matchedText.toLowerCase().includes(synonym.toLowerCase())
              );
-              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym => 
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym =>
                matchedText.toLowerCase().includes(synonym.toLowerCase())
              ) : undefined;
-              
+
              return (
                <ToolButton
                  key={id}
@@ -0,0 +1,548 @@
+/* CSS Custom Properties for Fullscreen Mode */
+.tool-panel__fullscreen-surface-inner {
+  --fullscreen-bg-surface-1: color-mix(in srgb, var(--bg-toolbar) 96%, transparent);
+  --fullscreen-bg-surface-2: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  --fullscreen-bg-header: var(--bg-toolbar);
+  --fullscreen-bg-controls-1: var(--bg-toolbar);
+  --fullscreen-bg-controls-2: color-mix(in srgb, var(--bg-toolbar) 95%, var(--bg-background));
+  --fullscreen-bg-body-1: color-mix(in srgb, var(--bg-background) 86%, transparent);
+  --fullscreen-bg-body-2: color-mix(in srgb, var(--bg-toolbar) 78%, transparent);
+  --fullscreen-bg-group: color-mix(in srgb, var(--bg-toolbar) 82%, transparent);
+  --fullscreen-bg-item: color-mix(in srgb, var(--bg-toolbar) 88%, transparent);
+  --fullscreen-bg-list-item: color-mix(in srgb, var(--bg-toolbar) 86%, transparent);
+  --fullscreen-bg-icon-detailed: color-mix(in srgb, var(--bg-muted) 75%, transparent);
+  --fullscreen-bg-icon-compact: color-mix(in srgb, var(--bg-muted) 70%, transparent);
+  --fullscreen-border-subtle-75: color-mix(in srgb, var(--border-subtle) 75%, transparent);
+  --fullscreen-border-subtle-70: color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  --fullscreen-border-subtle-65: color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  --fullscreen-border-favorites: color-mix(in srgb, var(--special-color-favorites) 25%, var(--border-subtle));
+  --fullscreen-border-recommended: color-mix(in srgb, var(--special-color-recommended) 25%, var(--border-subtle));
+  --fullscreen-shadow-primary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%, transparent);
+  --fullscreen-shadow-secondary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%, transparent);
+  --fullscreen-shadow-group: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%, transparent);
+  --fullscreen-accent-hover: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-accent-selected: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle));
+  --fullscreen-accent-ring: color-mix(in srgb, var(--text-primary) 15%, transparent);
+  --fullscreen-accent-list-bg: color-mix(in srgb, var(--text-primary) 8%, var(--bg-toolbar));
+  --fullscreen-accent-list-border: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
+  --fullscreen-text-icon: color-mix(in srgb, var(--text-primary) 90%, var(--text-muted));
+  --fullscreen-text-icon-compact: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted));
+}
+
+.tool-panel {
+  position: relative;
+  transition: width 0.3s ease, max-width 0.3s ease;
+}
+
+.tool-panel--fullscreen-active {
+  overflow: visible !important;
+}
+
+.tool-panel__search-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.tool-panel__search-row .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__mode-toggle {
+  transition: transform 0.2s ease;
+}
+
+.tool-panel__mode-toggle:hover {
+  transform: scale(1.04);
+}
+
+.tool-panel--fullscreen {
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.tool-panel__fullscreen-surface {
+  position: fixed;
+  display: flex;
+  pointer-events: none;
+  z-index: var(--z-fullscreen-surface);
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.tool-panel__fullscreen-surface-inner {
+  pointer-events: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+  background:
+    linear-gradient(
+      140deg,
+      var(--fullscreen-bg-surface-1),
+      var(--fullscreen-bg-surface-2)
+    )
+    padding-box;
+  border: 1px solid var(--fullscreen-border-subtle-75);
+  box-shadow: none;
+  backdrop-filter: blur(18px);
+  overflow: hidden;
+  /* Shared animation durations for JS + CSS (sourced from theme.css) */
+  --fullscreen-anim-in-duration: var(--fullscreen-anim-duration-in);
+  --fullscreen-anim-out-duration: var(--fullscreen-anim-duration-out);
+  animation: tool-panel-fullscreen-slide-in var(--fullscreen-anim-in-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-surface-inner--exiting {
+  animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
+}
+
+.tool-panel__fullscreen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-toolbar);
+}
+
+.tool-panel__fullscreen-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.tool-panel__fullscreen-brand-icon {
+  height: 1.75rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-brand-text {
+  height: 1.25rem;
+  width: auto;
+}
+
+.tool-panel__fullscreen-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1.75rem;
+  border-bottom: 1px solid var(--tool-panel-search-border-bottom);
+  background: var(--tool-panel-search-bg);
+}
+
+.tool-panel__fullscreen-controls .search-input-container {
+  flex: 1 1 auto;
+}
+
+.tool-panel__fullscreen-body {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+}
+
+.tool-panel__fullscreen-scroll {
+  height: 100%;
+}
+
+/* fullscreen group layout */
+.tool-panel__fullscreen-groups {
+  padding: 1.5rem 1.75rem;
+  column-width: 18rem;
+  column-gap: 1.5rem;
+}
+
+.tool-panel__fullscreen-groups--compact {
+  column-width: 17rem;
+}
+
+.tool-panel__fullscreen-groups--detailed {
+  column-width: auto;
+}
+
+.tool-panel__fullscreen-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  margin: 0 0 1.5rem;
+  padding: 0.65rem 0.75rem 1rem;
+  border-radius: 1rem;
+  background: var(--fullscreen-bg-group);
+  border: 1px solid var(--fullscreen-border-subtle-65);
+  box-shadow: 0 14px 32px var(--fullscreen-shadow-group);
+  break-inside: avoid;
+  backdrop-filter: blur(10px);
+}
+
+.tool-panel__fullscreen-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.1rem 0.15rem 0.35rem;
+}
+
+.tool-panel__fullscreen-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tool-panel__fullscreen-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+}
+
+.tool-panel__fullscreen-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.tool-panel__fullscreen-grid--detailed {
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.tool-panel__fullscreen-item {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid var(--fullscreen-border-subtle-70);
+  border-radius: 0.95rem;
+  background: var(--fullscreen-bg-item);
+  backdrop-filter: blur(6px);
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  /* Allow flex children to shrink without forcing horizontal overflow */
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-item:focus-visible {
+  outline: 2px solid var(--fullscreen-accent-selected);
+  outline-offset: 3px;
+}
+
+.tool-panel__fullscreen-item[aria-disabled="true"],
+.tool-panel__fullscreen-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]):not(:disabled) {
+  transform: translateY(-2px);
+  border-color: var(--fullscreen-accent-hover);
+  box-shadow: var(--shadow-xl, 0 18px 34px rgba(15, 23, 42, 0.14));
+}
+
+.tool-panel__fullscreen-item--selected {
+  border-color: var(--fullscreen-accent-selected);
+  box-shadow: 0 0 0 2px var(--fullscreen-accent-ring);
+}
+
+.tool-panel__fullscreen-item--detailed {
+  min-height: 7.5rem;
+}
+
+.tool-panel__fullscreen-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-item:hover .tool-panel__fullscreen-star {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-item--with-star {
+  position: relative;
+}
+
+.tool-panel__fullscreen-star-compact {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 2;
+}
+
+.tool-panel__fullscreen-list-item:hover .tool-panel__fullscreen-star-compact {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-group--special {
+  border-width: 1px;
+}
+
+.tool-panel__fullscreen-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: var(--fullscreen-bg-icon-detailed);
+  color: var(--fullscreen-text-icon);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 12%, transparent),
+    color-mix(in srgb, var(--text-primary) 4%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.75rem;
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon {
+  transform: scale(1.08);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 15%, transparent);
+}
+
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-icon svg {
+  font-size: 1.65rem;
+  position: relative;
+  z-index: var(--z-fullscreen-icon-svg);
+}
+
+.tool-panel__fullscreen-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  text-align: left;
+  /* Prevent long content (names, descriptions, shortcuts) from overflowing */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.tool-panel__fullscreen-name {
+  color: var(--text-primary);
+}
+
+.tool-panel__fullscreen-description {
+  line-height: 1.45;
+}
+
+/* Ensure long words or unbroken strings wrap instead of overflowing */
+.tool-panel__fullscreen-name,
+.tool-panel__fullscreen-description,
+.tool-panel__fullscreen-match {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.tool-panel__fullscreen-match {
+  font-style: italic;
+}
+
+.tool-panel__fullscreen-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
+  /* Allow hotkey chips to wrap on small widths to avoid overflow */
+  flex-wrap: wrap;
+  row-gap: 0.25rem;
+}
+
+.tool-panel__fullscreen-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.tool-panel__fullscreen-list-item {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.55rem 0.5rem 0.55rem 0.65rem;
+  border-radius: 0.65rem;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease;
+  background: var(--fullscreen-bg-list-item);
+  border: 1px solid transparent;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.tool-panel__fullscreen-list-item[aria-disabled="true"],
+.tool-panel__fullscreen-list-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]):not(:disabled),
+.tool-panel__fullscreen-list-item--selected {
+  background: var(--fullscreen-accent-list-bg);
+  border-color: var(--fullscreen-accent-list-border);
+}
+
+.tool-panel__fullscreen-list-item--selected {
+  transform: translateX(2px);
+}
+
+.tool-panel__fullscreen-list-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 0.6rem;
+  background: var(--fullscreen-bg-icon-compact);
+  color: var(--fullscreen-text-icon-compact);
+  flex-shrink: 0;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tool-panel__fullscreen-list-icon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg,
+    color-mix(in srgb, var(--text-primary) 10%, transparent),
+    color-mix(in srgb, var(--text-primary) 3%, transparent)
+  );
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 0.6rem;
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon {
+  transform: scale(1.06);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 12%, transparent);
+}
+
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon::before {
+  opacity: 1;
+}
+
+.tool-panel__fullscreen-list-icon svg {
+  position: relative;
+  z-index: 1;
+}
+
+.tool-panel__fullscreen-list-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  text-align: left;
+}
+
+.tool-panel__fullscreen-empty {
+  padding: 2rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@keyframes tool-panel-fullscreen-slide-in {
+  from {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+}
+
+@keyframes tool-panel-fullscreen-slide-out {
+  from {
+    transform: translateX(0) scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-6%) scaleX(0.85);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-panel__fullscreen-surface-inner {
+    animation: none !important;
+  }
+
+  .tool-panel__mode-toggle {
+    transition: none;
+  }
+
+  .tool-panel__fullscreen-item,
+  .tool-panel__fullscreen-list-item {
+    transition: none;
+  }
+}
+
+@media (max-width: 1440px) {
+  .tool-panel__fullscreen-content {
+    padding-inline: 1.5rem;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 15rem;
+  }
+}
+
+@media (max-width: 1280px) {
+  .tool-panel__fullscreen-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .tool-panel__fullscreen-controls .mantine-Switch-root {
+    justify-content: flex-end;
+  }
+
+  .tool-panel__fullscreen-grid--compact {
+    column-width: 14rem;
+  }
+}
+
+
+
@@ -1,3 +1,4 @@
+import React, { useEffect, useMemo } from 'react';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import ToolPicker from './ToolPicker';
@@ -6,18 +7,27 @@ import ToolRenderer from './ToolRenderer';
 import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
-import { ScrollArea } from '@mantine/core';
+import { ActionIcon, ScrollArea } from '@mantine/core';
 import { ToolId } from '../../types/toolId';
+import { useMediaQuery } from '@mantine/hooks';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useTranslation } from 'react-i18next';
+import FullscreenToolSurface from './FullscreenToolSurface';
+import { useToolPanelGeometry } from '../../hooks/tools/useToolPanelGeometry';
+import { useLocalStorageState } from '../../hooks/tools/useJsonLocalStorageState';
+import { useRightRail } from '../../contexts/RightRailContext';
+import { Tooltip } from '../shared/Tooltip';
+import './ToolPanel.css';

 // No props needed - component uses context

 export default function ToolPanel() {
+  const { t } = useTranslation();
  const { isRainbowMode } = useRainbowThemeContext();
  const { sidebarRefs } = useSidebarContext();
-  const { toolPanelRef } = sidebarRefs;
+  const { toolPanelRef, quickAccessRef, rightRailRef } = sidebarRefs;
+  const isMobile = useMediaQuery('(max-width: 1024px)');

-
-  // Use context-based hooks to eliminate prop drilling
  const {
    leftPanelView,
    isPanelVisible,
@@ -25,84 +35,181 @@ export default function ToolPanel() {
    filteredTools,
    toolRegistry,
    setSearchQuery,
+    selectedToolKey,
+    handleToolSelect,
+    setPreviewFile,
+    toolPanelMode,
+    setToolPanelMode,
+    setLeftPanelView,
+    readerMode,
  } = useToolWorkflow();

-  const { selectedToolKey, handleToolSelect } = useToolWorkflow();
-  const { setPreviewFile } = useToolWorkflow();
+  const { setAllRightRailButtonsDisabled } = useRightRail();
+
+  const isFullscreenMode = toolPanelMode === 'fullscreen';
+  const toolPickerVisible = !readerMode;
+  const fullscreenExpanded = isFullscreenMode && leftPanelView === 'toolPicker' && !isMobile && toolPickerVisible;
+
+
+  // Disable right rail buttons when fullscreen mode is active
+  useEffect(() => {
+    setAllRightRailButtonsDisabled(fullscreenExpanded);
+  }, [fullscreenExpanded, setAllRightRailButtonsDisabled]);
+
+  // Use custom hooks for state management
+  const [showLegacyDescriptions, setShowLegacyDescriptions] = useLocalStorageState('legacyToolDescriptions', false);
+  const fullscreenGeometry = useToolPanelGeometry({
+    enabled: fullscreenExpanded,
+    toolPanelRef,
+    quickAccessRef,
+    rightRailRef,
+  });
+
+  const toggleLabel = isFullscreenMode
+    ? t('toolPanel.toggle.sidebar', 'Switch to sidebar mode')
+    : t('toolPanel.toggle.fullscreen', 'Switch to fullscreen mode');
+
+  const handleModeToggle = () => {
+    const nextMode = isFullscreenMode ? 'sidebar' : 'fullscreen';
+    setToolPanelMode(nextMode);
+
+    if (nextMode === 'fullscreen' && leftPanelView !== 'toolPicker') {
+      setLeftPanelView('toolPicker');
+    }
+  };
+
+  const computedWidth = () => {
+    if (isMobile) {
+      return '100%';
+    }
+
+    if (!isPanelVisible) {
+      return '0';
+    }
+
+    return '18.5rem';
+  };
+
+  const matchedTextMap = useMemo(() => {
+    const map = new Map<string, string>();
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) {
+        map.set(id, matchedText);
+      }
+    });
+    return map;
+  }, [filteredTools]);

  return (
    <div
      ref={toolPanelRef}
      data-sidebar="tool-panel"
-      className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
+      className={`tool-panel flex flex-col ${fullscreenExpanded ? 'tool-panel--fullscreen-active' : 'overflow-hidden'} bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
        isRainbowMode ? rainbowStyles.rainbowPaper : ''
-      }`}
+      } ${isMobile ? 'h-full border-r-0' : 'h-screen'} ${fullscreenExpanded ? 'tool-panel--fullscreen' : ''}`}
      style={{
-        width: isPanelVisible ? '18.5rem' : '0',
+        width: computedWidth(),
        padding: '0'
      }}
    >
-      <div
-        style={{
-          opacity: isPanelVisible ? 1 : 0,
-          transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        {/* Search Bar - Always visible at the top */}
+      {!fullscreenExpanded && (
        <div
          style={{
-            backgroundColor: 'var(--tool-panel-search-bg)',
-            borderBottom: '1px solid var(--tool-panel-search-border-bottom)',
-            padding: '0.75rem 1rem',
+            opacity: isMobile || isPanelVisible ? 1 : 0,
+            transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
          }}
        >
-          <ToolSearch
-            value={searchQuery}
-            onChange={setSearchQuery}
-            toolRegistry={toolRegistry}
-            mode="filter"
-          />
-        </div>
-
-        {searchQuery.trim().length > 0 ? (
-          // Searching view (replaces both picker and content)
-          <div className="flex-1 flex flex-col overflow-y-auto">
-              <SearchResults
-                filteredTools={filteredTools}
-                onSelect={(id) => handleToolSelect(id as ToolId)}
-                searchQuery={searchQuery}
-              />
-          </div>
-        ) : leftPanelView === 'toolPicker' ? (
-          // Tool Picker View
-          <div className="flex-1 flex flex-col overflow-auto">
-            <ToolPicker
-              selectedToolKey={selectedToolKey}
-              onSelect={(id) => handleToolSelect(id as ToolId)}
-              filteredTools={filteredTools}
-              isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+          <div
+            className="tool-panel__search-row"
+            style={{
+              backgroundColor: 'var(--tool-panel-search-bg)',
+              borderBottom: '1px solid var(--tool-panel-search-border-bottom)'
+            }}
+          >
+            <ToolSearch
+              value={searchQuery}
+              onChange={setSearchQuery}
+              toolRegistry={toolRegistry}
+              mode="filter"
            />
+            {!isMobile && leftPanelView === 'toolPicker' && (
+              <Tooltip 
+                content={toggleLabel}
+                position="bottom"
+                arrow={true}
+                openOnFocus={false}
+              >
+                <ActionIcon
+                  variant="subtle"
+                  radius="xl"
+                  style={{ color: 'var(--right-rail-icon)' }}
+                  onClick={handleModeToggle}
+                  aria-label={toggleLabel}
+                  className="tool-panel__mode-toggle"
+                >
+                  <DoubleArrowIcon fontSize="small" />
+                </ActionIcon>
+              </Tooltip>
+            )}
          </div>
-        ) : (
-          // Selected Tool Content View
-          <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Tool content */}
-            <div className="flex-1 min-h-0 overflow-hidden">
-              <ScrollArea h="100%">
-                {selectedToolKey && (
-                  <ToolRenderer
-                    selectedToolKey={selectedToolKey}
-                    onPreviewFile={setPreviewFile}
-                  />
-                )}
-              </ScrollArea>
+
+                {searchQuery.trim().length > 0 ? (
+                  <div className="flex-1 flex flex-col overflow-y-auto">
+                    <SearchResults
+                      filteredTools={filteredTools}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      searchQuery={searchQuery}
+                    />
+                  </div>
+                ) : leftPanelView === 'toolPicker' ? (
+                  <div className="flex-1 flex flex-col overflow-auto">
+                    <ToolPicker
+                      selectedToolKey={selectedToolKey}
+                      onSelect={(id) => handleToolSelect(id as ToolId)}
+                      filteredTools={filteredTools}
+                      isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+                    />
+                  </div>
+          ) : (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <div className="flex-1 min-h-0 overflow-hidden">
+                <ScrollArea h="100%">
+                  {selectedToolKey ? (
+                    <ToolRenderer
+                      selectedToolKey={selectedToolKey}
+                      onPreviewFile={setPreviewFile}
+                    />
+                  ) : (
+                    <div className="tool-panel__placeholder">
+                      {t('toolPanel.placeholder', 'Choose a tool to get started')}
+                    </div>
+                  )}
+                </ScrollArea>
+              </div>
            </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      )}
+
+      {fullscreenExpanded && (
+        <FullscreenToolSurface
+          searchQuery={searchQuery}
+          toolRegistry={toolRegistry}
+          filteredTools={filteredTools}
+          selectedToolKey={selectedToolKey}
+          showDescriptions={showLegacyDescriptions}
+          matchedTextMap={matchedTextMap}
+          onSearchChange={setSearchQuery}
+          onSelect={(id: ToolId) => handleToolSelect(id)}
+          onToggleDescriptions={() => setShowLegacyDescriptions((prev) => !prev)}
+          onExitFullscreenMode={() => setToolPanelMode('sidebar')}
+          toggleLabel={toggleLabel}
+          geometry={fullscreenGeometry}
+        />
+      )}
    </div>
  );
 }
@@ -0,0 +1,200 @@
+.tool-panel-mode-prompt__modal {
+  background: color-mix(in srgb, var(--bg-toolbar) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  box-shadow: 0 32px 64px color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%, transparent);
+  max-width: min(46rem, 100%);
+}
+
+.tool-panel-mode-prompt__options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.tool-panel-mode-prompt__card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: linear-gradient(145deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--bg-muted) 70%, transparent)
+  );
+  width: 100%;
+  max-width: 19rem;
+}
+
+.tool-panel-mode-prompt__card--sidebar {
+  border: 1px solid color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 18%, var(--border-subtle));
+  background: linear-gradient(165deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 8%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__preview {
+  border-radius: 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-muted) 82%, transparent), transparent 75%);
+  padding: 0.75rem;
+  width: 100%;
+  display: flex;
+  gap: 0.65rem;
+  min-height: 6.5rem;
+  margin-top: auto;
+}
+
+.tool-panel-mode-prompt__preview--sidebar {
+  align-items: stretch;
+}
+
+.tool-panel-mode-prompt__sidebar-panel {
+  width: 3rem;
+  border-radius: 0.65rem;
+  padding: 0.45rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-muted) 72%, transparent)
+  );
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-search {
+  height: 0.5rem;
+  border-radius: 0.4rem;
+  background: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__sidebar-item {
+  height: 0.55rem;
+  border-radius: 0.35rem;
+  background: color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 32%, var(--bg-muted));
+}
+
+.tool-panel-mode-prompt__sidebar-item--muted {
+  background: color-mix(in srgb, var(--bg-background) 88%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace {
+  flex: 1;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
+  padding: 0.5rem;
+  display: grid;
+  gap: 0.35rem;
+  grid-template-rows: 1.4fr 0.6fr;
+  background: linear-gradient(160deg,
+    color-mix(in srgb, var(--bg-background) 94%, transparent),
+    color-mix(in srgb, var(--bg-muted) 68%, transparent)
+  );
+}
+
+.tool-panel-mode-prompt__workspace-page {
+  border-radius: 0.45rem;
+  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-background) 60%, transparent);
+}
+
+.tool-panel-mode-prompt__workspace-page--secondary {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--legacy {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__legacy-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__legacy-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__legacy-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__legacy-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__preview--fullscreen {
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0.65rem 0.6rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-columns {
+  width: 100%;
+  display: flex;
+  gap: 0.45rem;
+  justify-content: space-between;
+}
+
+.tool-panel-mode-prompt__fullscreen-column {
+  flex: 1;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card {
+  border-radius: 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
+  background: linear-gradient(150deg,
+    color-mix(in srgb, var(--bg-muted) 88%, transparent),
+    color-mix(in srgb, var(--bg-background) 76%, transparent)
+  );
+  height: 1.2rem;
+}
+
+.tool-panel-mode-prompt__fullscreen-card--muted {
+  opacity: 0.55;
+}
+
+.tool-panel-mode-prompt__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.tool-panel-mode-prompt__action {
+  box-shadow: none;
+}
+
+.tool-panel-mode-prompt__action:hover {
+  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 25%, transparent);
+}
+
+.tool-panel-mode-prompt__maybe-later {
+  color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-muted));
+}
+
+.tool-panel-mode-prompt__maybe-later:hover {
+  background: color-mix(in srgb, var(--bg-muted) 78%, transparent);
+}
+
+@media (max-width: 600px) {
+  .tool-panel-mode-prompt__options {
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+  }
+}
@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react';
+import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import './ToolPanelModePrompt.css';
+import { useToolPanelModePreference } from '../../hooks/useToolPanelModePreference';
+import { ToolPanelMode } from 'src/contexts/toolWorkflow/toolWorkflowState';
+
+// type moved to hook
+
+const ToolPanelModePrompt = () => {
+  const { t } = useTranslation();
+  const { toolPanelMode, setToolPanelMode } = useToolWorkflow();
+  const [opened, setOpened] = useState(false);
+  const { hydrated, shouldShowPrompt, markPromptSeen, setPreferredMode } = useToolPanelModePreference();
+
+  useEffect(() => {
+    if (shouldShowPrompt) {
+      setOpened(true);
+    }
+  }, [shouldShowPrompt]);
+
+  const handleSelect = (mode: ToolPanelMode) => {
+    setToolPanelMode(mode);
+    setPreferredMode(mode);
+    markPromptSeen();
+    setOpened(false);
+  };
+
+  const handleDismiss = () => {
+    markPromptSeen();
+    setOpened(false);
+  };
+
+  if (!hydrated) {
+    return null;
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleDismiss}
+      centered
+      size="xl"
+      radius="lg"
+      overlayProps={{ blur: 6, opacity: 0.35 }}
+      classNames={{ content: 'tool-panel-mode-prompt__modal' }}
+      title={t('toolPanel.modePrompt.title', 'Choose how you browse tools')}
+    >
+      <Stack gap="lg">
+        <Text size="sm" c="dimmed">
+          {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
+        </Text>
+        <div className="tool-panel-mode-prompt__options">
+          <Card withBorder radius="lg" shadow="sm" padding="lg" className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Group justify="space-between">
+                <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
+                </Text>
+                </Stack>
+                <Badge color="blue" variant="filled">
+                  {t('toolPanel.modePrompt.recommended', 'Recommended')}
+                </Badge>
+              </Group>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--sidebar" aria-hidden>
+                <div className="tool-panel-mode-prompt__sidebar-panel">
+                  <span className="tool-panel-mode-prompt__sidebar-search" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item" />
+                  <span className="tool-panel-mode-prompt__sidebar-item tool-panel-mode-prompt__sidebar-item--muted" />
+                </div>
+                <div className="tool-panel-mode-prompt__workspace" aria-hidden>
+                  <div className="tool-panel-mode-prompt__workspace-page" />
+                  <div className="tool-panel-mode-prompt__workspace-page tool-panel-mode-prompt__workspace-page--secondary" />
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'sidebar' ? 'filled' : 'light'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('sidebar')}
+              >
+                {t('toolPanel.modePrompt.chooseSidebar', 'Use sidebar mode')}
+              </Button>
+            </Stack>
+          </Card>
+          <Card withBorder radius="lg" shadow="xs" padding="lg" className="tool-panel-mode-prompt__card">
+            <Stack gap="md" className="tool-panel-mode-prompt__card-content">
+              <Stack gap={2}>
+                <Text fw={600}>{t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
+                </Text>
+              </Stack>
+              <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--fullscreen" aria-hidden>
+                <div className="tool-panel-mode-prompt__fullscreen-columns">
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                  <div className="tool-panel-mode-prompt__fullscreen-column">
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card" />
+                    <span className="tool-panel-mode-prompt__fullscreen-card tool-panel-mode-prompt__fullscreen-card--muted" />
+                  </div>
+                </div>
+              </div>
+              <Button
+                variant={toolPanelMode === 'fullscreen' ? 'filled' : 'outline'}
+                color="blue"
+                radius="md"
+                className="tool-panel-mode-prompt__action"
+                onClick={() => handleSelect('fullscreen')}
+              >
+                {t('toolPanel.modePrompt.chooseFullscreen', 'Use fullscreen mode')}
+              </Button>
+            </Stack>
+          </Card>
+        </div>
+        <Button
+          variant="subtle"
+          color="gray"
+          radius="md"
+          className="tool-panel-mode-prompt__maybe-later"
+          onClick={handleDismiss}
+        >
+          {t('toolPanel.modePrompt.dismiss', 'Maybe later')}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ToolPanelModePrompt;
@@ -4,13 +4,20 @@ import { useTranslation } from "react-i18next";
 import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
 import "./toolPicker/ToolPicker.css";
 import { useToolSections } from "../../hooks/useToolSections";
+import type { SubcategoryGroup } from "../../hooks/useToolSections";
+import { useFavoriteToolItems } from "../../hooks/tools/useFavoriteToolItems";
 import NoToolsFound from "./shared/NoToolsFound";
 import { renderToolButtons } from "./shared/renderToolButtons";
+import Badge from "../shared/Badge";
+import SubcategoryHeader from "./shared/SubcategoryHeader";
+import ToolButton from "./toolPicker/ToolButton";
+import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
+import { ToolId } from "../../types/toolId";

 interface ToolPickerProps {
  selectedToolKey: string | null;
  onSelect: (id: string) => void;
-  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
  isSearching?: boolean;
 }

@@ -61,11 +68,23 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
  }, []);

  const { sections: visibleSections } = useToolSections(filteredTools);
+  const { favoriteTools, toolRegistry } = useToolWorkflow();
+
+  const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);

  const quickSection = useMemo(
    () => visibleSections.find(s => s.key === 'quick'),
    [visibleSections]
  );
+
+  const recommendedItems = useMemo(() => {
+    if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string; tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach((sc: SubcategoryGroup) => sc.tools.forEach((toolEntry) => items.push(toolEntry)));
+    return items;
+  }, [quickSection]);
+
+  const recommendedCount = useMemo(() => favoriteToolItems.length + recommendedItems.length, [favoriteToolItems.length, recommendedItems.length]);
  const allSection = useMemo(
    () => visibleSections.find(s => s.key === 'all'),
    [visibleSections]
@@ -87,7 +106,9 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
  };

  // Build flat list by subcategory for search mode
-  const { searchGroups } = useToolSections(isSearching ? filteredTools : []);
+  const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
+  const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
+  const { searchGroups } = useToolSections(effectiveFilteredForSearch);

  return (
    <Box
@@ -115,7 +136,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
            {searchGroups.length === 0 ? (
              <NoToolsFound />
            ) : (
-              searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect))
+                      searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true))
            )}
          </Stack>
        ) : (
@@ -142,24 +163,46 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
              onClick={() => scrollTo(quickAccessRef)}
            >
              <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
-              <span
-                style={{
-                  background: "var(--tool-header-badge-bg)",
-                  color: "var(--tool-header-badge-text)",
-                  borderRadius: ".5rem",
-                  padding: "0.125rem 0.5rem",
-                  fontSize: ".75rem",
-                  fontWeight: 700
-                }}
-              >
-                {quickSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-              </span>
+              <Badge>
+                {recommendedCount}
+              </Badge>
            </div>

            <Box ref={quickAccessRef} w="100%" my="sm">
              <Stack p="sm" gap="xs">
-                {quickSection?.subcategories.map(sc =>
-                  renderToolButtons(t, sc, selectedToolKey, onSelect, false)
+                {favoriteToolItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.favorites', 'Favourites')} mt={0} />
+                    <div>
+                      {favoriteToolItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`fav-${id}`}
+                          id={id}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
+                )}
+                {recommendedItems.length > 0 && (
+                  <Box w="100%">
+                    <SubcategoryHeader label={t('toolPanel.fullscreen.recommended', 'Recommended')} />
+                    <div>
+                      {recommendedItems.map(({ id, tool }) => (
+                        <ToolButton
+                          key={`rec-${id}`}
+                          id={id as ToolId}
+                          tool={tool}
+                          isSelected={selectedToolKey === id}
+                          onSelect={onSelect}
+                          hasStars
+                        />
+                      ))}
+                    </div>
+                  </Box>
                )}
              </Stack>
            </Box>
@@ -188,25 +231,16 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
              onClick={() => scrollTo(allToolsRef)}
            >
              <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
-              <span
-                style={{
-                  background: "var(--tool-header-badge-bg)",
-                  color: "var(--tool-header-badge-text)",
-                  borderRadius: ".5rem",
-                  padding: "0.125rem 0.5rem",
-                  fontSize: ".75rem",
-                  fontWeight: 700
-                }}
-              >
+              <Badge>
                {allSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
-              </span>
+              </Badge>
            </div>

            <Box ref={allToolsRef} w="100%">
              <Stack p="sm" gap="xs">
-                {allSection?.subcategories.map(sc =>
-                  renderToolButtons(t, sc, selectedToolKey, onSelect, true)
-                )}
+                        {allSection?.subcategories.map((sc: SubcategoryGroup) =>
+                          renderToolButtons(t, sc, selectedToolKey, onSelect, true, false, undefined, true)
+                        )}
              </Stack>
            </Box>
          </>
@@ -1,10 +1,11 @@
 import { Suspense } from "react";
 import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
 import { BaseToolProps } from "../../types/tool";
+import { ToolId } from "../../types/toolId";
 import ToolLoadingFallback from "./ToolLoadingFallback";

 interface ToolRendererProps extends BaseToolProps {
-  selectedToolKey: string;
+  selectedToolKey: ToolId;
 }


@@ -16,7 +17,14 @@ const ToolRenderer = ({
 }: ToolRendererProps) => {
  // Get the tool from context (instead of direct hook call)
  const { toolRegistry } = useToolWorkflow();
-  const selectedTool = toolRegistry[selectedToolKey];
+  const selectedTool = (selectedToolKey in toolRegistry)
+    ? toolRegistry[selectedToolKey as ToolId]
+    : undefined;
+
+  // Handle tools that only work in workbenches (read, multiTool)
+  if (selectedTool && !selectedTool.component && selectedTool.workbench) {
+    return null; // These tools render in their workbench, not in the sidebar
+  }

  if (!selectedTool || !selectedTool.component) {
    return <div>Tool not found: {selectedToolKey}</div>;
@@ -0,0 +1,119 @@
+/**
+ * AddAttachmentsSettings - Shared settings component for both tool UI and automation
+ *
+ * Allows selecting files to attach to PDFs.
+ */
+
+import { Stack, Text, Group, ActionIcon, Alert, ScrollArea, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddAttachmentsParameters } from "../../../hooks/tools/addAttachments/useAddAttachmentsParameters";
+import LocalIcon from "../../shared/LocalIcon";
+
+interface AddAttachmentsSettingsProps {
+  parameters: AddAttachmentsParameters;
+  onParameterChange: <K extends keyof AddAttachmentsParameters>(key: K, value: AddAttachmentsParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = false }: AddAttachmentsSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Alert color="blue" variant="light">
+        <Text size="sm">
+          {t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.")}
+        </Text>
+      </Alert>
+
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>
+          {t("AddAttachmentsRequest.selectFiles", "Select Files to Attach")}
+        </Text>
+        <input
+          type="file"
+          multiple
+          onChange={(e) => {
+            const files = Array.from(e.target.files || []);
+            // Append to existing attachments instead of replacing
+            const newAttachments = [...(parameters.attachments || []), ...files];
+            onParameterChange('attachments', newAttachments);
+            // Reset the input so the same file can be selected again
+            e.target.value = '';
+          }}
+          disabled={disabled}
+          style={{ display: 'none' }}
+          id="attachments-input"
+        />
+        <Button
+          size="xs"
+          color="blue"
+          component="label"
+          htmlFor="attachments-input"
+          disabled={disabled}
+          leftSection={<LocalIcon icon="plus" width="14" height="14" />}
+        >
+          {parameters.attachments?.length > 0
+            ? t("AddAttachmentsRequest.addMoreFiles", "Add more files...")
+            : t("AddAttachmentsRequest.placeholder", "Choose files...")
+          }
+        </Button>
+      </Stack>
+
+      {parameters.attachments?.length > 0 && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>
+            {t("AddAttachmentsRequest.selectedFiles", "Selected Files")} ({parameters.attachments.length})
+          </Text>
+          <ScrollArea.Autosize mah={300} type="scroll" offsetScrollbars styles={{ viewport: { overflowX: 'hidden' } }}>
+            <Stack gap="xs">
+              {parameters.attachments.map((file, index) => (
+                <Group key={index} justify="space-between" p="xs" style={{ border: '1px solid var(--mantine-color-gray-3)', borderRadius: 'var(--mantine-radius-sm)', alignItems: 'flex-start' }}>
+                  <Group gap="xs" style={{ flex: 1, minWidth: 0, alignItems: 'flex-start' }}>
+                    {/* Filename (two-line clamp, wraps, no icon on the left) */}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div
+                        style={{
+                          fontSize: 'var(--mantine-font-size-sm)',
+                          fontWeight: 400,
+                          lineHeight: 1.2,
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2 as any,
+                          WebkitBoxOrient: 'vertical' as any,
+                          overflow: 'hidden',
+                          whiteSpace: 'normal',
+                          wordBreak: 'break-word',
+                        }}
+                        title={file.name}
+                      >
+                        {file.name}
+                      </div>
+                    </div>
+                    <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                      ({(file.size / 1024).toFixed(1)} KB)
+                    </Text>
+                  </Group>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    color="red"
+                    style={{ flexShrink: 0 }}
+                    onClick={() => {
+                      const newAttachments = (parameters.attachments || []).filter((_, i) => i !== index);
+                      onParameterChange('attachments', newAttachments);
+                    }}
+                    disabled={disabled}
+                  >
+                    <LocalIcon icon="close-rounded" width="14" height="14" />
+                  </ActionIcon>
+                </Group>
+              ))}
+            </Stack>
+          </ScrollArea.Autosize>
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default AddAttachmentsSettings;
@@ -0,0 +1,77 @@
+/**
+ * AddPageNumbersAppearanceSettings - Customize Appearance step
+ */
+
+import { Stack, Select, TextInput, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import { Tooltip } from "../../shared/Tooltip";
+
+interface AddPageNumbersAppearanceSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAppearanceSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAppearanceSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Tooltip content={t('marginTooltip', 'Distance between the page number and the edge of the page.')}>
+        <Select
+          label={t('addPageNumbers.selectText.2', 'Margin')}
+          value={parameters.customMargin}
+          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          data={[
+            { value: 'small', label: t('sizes.small', 'Small') },
+            { value: 'medium', label: t('sizes.medium', 'Medium') },
+            { value: 'large', label: t('sizes.large', 'Large') },
+            { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontSizeTooltip', 'Size of the page number text in points. Larger numbers create bigger text.')}>
+        <NumberInput
+          label={t('addPageNumbers.fontSize', 'Font Size')}
+          value={parameters.fontSize}
+          onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 12)}
+          min={1}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontTypeTooltip', 'Font family for the page numbers. Choose based on your document style.')}>
+        <Select
+          label={t('addPageNumbers.fontName', 'Font Type')}
+          value={parameters.fontType}
+          onChange={(v) => onParameterChange('fontType', (v as any) || 'Times')}
+          data={[
+            { value: 'Times', label: 'Times Roman' },
+            { value: 'Helvetica', label: 'Helvetica' },
+            { value: 'Courier', label: 'Courier New' },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('customTextTooltip', 'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.')}>
+        <TextInput
+          label={t('addPageNumbers.selectText.6', 'Custom Text Format')}
+          value={parameters.customText || ''}
+          onChange={(e) => onParameterChange('customText', e.currentTarget.value)}
+          placeholder={t('addPageNumbers.customNumberDesc', 'e.g., "Page {n}" or leave blank for just numbers')}
+          disabled={disabled}
+        />
+      </Tooltip>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAppearanceSettings;
@@ -0,0 +1,55 @@
+/**
+ * AddPageNumbersAutomationSettings - Used for automation only
+ *
+ * Combines both position and appearance settings into a single view
+ */
+
+import { Stack, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import AddPageNumbersPositionSettings from "./AddPageNumbersPositionSettings";
+import AddPageNumbersAppearanceSettings from "./AddPageNumbersAppearanceSettings";
+
+interface AddPageNumbersAutomationSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAutomationSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAutomationSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position & Pages Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.positionAndPages", "Position & Pages")}</Text>
+        <AddPageNumbersPositionSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+          file={null}
+          showQuickGrid={true}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Appearance Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.customize", "Customize Appearance")}</Text>
+        <AddPageNumbersAppearanceSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAutomationSettings;
@@ -0,0 +1,70 @@
+/**
+ * AddPageNumbersPositionSettings - Position & Pages step
+ */
+
+import { Stack, TextInput, NumberInput, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import { Tooltip } from "../../shared/Tooltip";
+import PageNumberPreview from "./PageNumberPreview";
+
+interface AddPageNumbersPositionSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+  file?: File | null;
+  showQuickGrid?: boolean;
+}
+
+const AddPageNumbersPositionSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  file = null,
+  showQuickGrid = true
+}: AddPageNumbersPositionSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position Selection */}
+      <Stack gap="md">
+        <PageNumberPreview
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          file={file}
+          showQuickGrid={showQuickGrid}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Pages & Starting Number Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
+
+        <Tooltip content={t('pageSelectionPrompt', 'Specify which pages to add numbers to. Examples: "1,3,5" for specific pages, "1-5" for ranges, "2n" for even pages, or leave blank for all pages.')}>
+          <TextInput
+            label={t('addPageNumbers.selectText.5', 'Pages to Number')}
+            value={parameters.pagesToNumber || ''}
+            onChange={(e) => onParameterChange('pagesToNumber', e.currentTarget.value)}
+            placeholder={t('addPageNumbers.numberPagesDesc', 'e.g., 1,3,5-8 or leave blank for all pages')}
+            disabled={disabled}
+          />
+        </Tooltip>
+
+        <Tooltip content={t('startingNumberTooltip', 'The first number to display. Subsequent pages will increment from this number.')}>
+          <NumberInput
+            label={t('addPageNumbers.selectText.4', 'Starting Number')}
+            value={parameters.startingNumber}
+            onChange={(v) => onParameterChange('startingNumber', typeof v === 'number' ? v : 1)}
+            min={1}
+            disabled={disabled}
+          />
+        </Tooltip>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersPositionSettings;
@@ -200,7 +200,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
          <img
            src={pageThumbnail}
            alt="page preview"
-            className={styles.pageThumbnail}
+            className={`${styles.pageThumbnail} ph-no-capture`}
            draggable={false}
          />
        )}
@@ -238,4 +238,4 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
      </div>
    </div>
  );
-}
+}
@@ -0,0 +1,43 @@
+/**
+ * AddStampAutomationSettings - Used for automation only
+ *
+ * This component combines all stamp settings into a single step interface
+ * for use in the automation system. It includes setup and formatting
+ * settings in one unified component.
+ */
+
+import { Stack } from "@mantine/core";
+import { AddStampParameters } from "./useAddStampParameters";
+import StampSetupSettings from "./StampSetupSettings";
+import StampPositionFormattingSettings from "./StampPositionFormattingSettings";
+
+interface AddStampAutomationSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddStampAutomationSettings = ({ parameters, onParameterChange, disabled = false }: AddStampAutomationSettingsProps) => {
+  return (
+    <Stack gap="lg">
+      {/* Stamp Setup (Type, Text/Image, Page Selection) */}
+      <StampSetupSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+
+      {/* Position and Formatting Settings */}
+      {parameters.stampType && (
+        <StampPositionFormattingSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+          showPositionGrid={true}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default AddStampAutomationSettings;
@@ -0,0 +1,201 @@
+import { useTranslation } from "react-i18next";
+import { Group, Select, Stack, ColorInput, Button, Slider, Text, NumberInput } from "@mantine/core";
+import { AddStampParameters } from "./useAddStampParameters";
+import LocalIcon from "../../shared/LocalIcon";
+import styles from "./StampPreview.module.css";
+import { Tooltip } from "../../shared/Tooltip";
+
+interface StampPositionFormattingSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+  showPositionGrid?: boolean; // When true, show the 9-position grid for automation
+}
+
+const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabled = false, showPositionGrid = false }: StampPositionFormattingSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md" justify="space-between">
+      {/* Position Grid - shown in automation settings */}
+      {showPositionGrid && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>{t('AddStampRequest.position', 'Stamp Position')}</Text>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: '0.5rem',
+            maxWidth: '200px'
+          }}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx;
+              return (
+                <Button
+                  key={idx}
+                  variant={selected ? 'filled' : 'outline'}
+                  onClick={() => {
+                    onParameterChange('position', idx);
+                    // Ensure we're using grid positioning, not custom overrides
+                    onParameterChange('overrideX', -1 as any);
+                    onParameterChange('overrideY', -1 as any);
+                  }}
+                  disabled={disabled}
+                  styles={{
+                    root: {
+                      height: '50px',
+                      padding: '0',
+                    }
+                  }}
+                >
+                  {idx}
+                </Button>
+              );
+            })}
+          </div>
+        </Stack>
+      )}
+      {/* Icon pill buttons row */}
+      <div className="flex justify-between gap-[0.5rem]">
+        <Tooltip content={t('AddStampRequest.rotation', 'Rotation')} position="top">
+          <Button
+            variant={parameters._activePill === 'rotation' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'rotation')}
+          >
+            <LocalIcon icon="rotate-right-rounded" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+        <Tooltip content={t('AddStampRequest.opacity', 'Opacity')} position="top">
+          <Button
+            variant={parameters._activePill === 'opacity' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'opacity')}
+          >
+            <LocalIcon icon="opacity" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+        <Tooltip content={parameters.stampType === 'image' ? t('AddStampRequest.imageSize', 'Image Size') : t('AddStampRequest.fontSize', 'Font Size')} position="top">
+          <Button
+            variant={parameters._activePill === 'fontSize' ? 'filled' : 'outline'}
+            className="flex-1"
+            onClick={() => onParameterChange('_activePill', 'fontSize')}
+          >
+            <LocalIcon icon="zoom-in-map-rounded" width="1.1rem" height="1.1rem" />
+          </Button>
+        </Tooltip>
+      </div>
+
+      {/* Single slider bound to selected pill */}
+      {parameters._activePill === 'fontSize' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>
+            {parameters.stampType === 'image'
+              ? t('AddStampRequest.imageSize', 'Image Size')
+              : t('AddStampRequest.fontSize', 'Font Size')
+            }
+          </Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.fontSize}
+              onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 1)}
+              min={1}
+              max={400}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.fontSize}
+              onChange={(v) => onParameterChange('fontSize', v as number)}
+              min={1}
+              max={400}
+              step={1}
+              className={styles.slider}
+            />
+          </Group>
+        </Stack>
+      )}
+      {parameters._activePill === 'rotation' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>{t('AddStampRequest.rotation', 'Rotation')}</Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.rotation}
+              onChange={(v) => onParameterChange('rotation', typeof v === 'number' ? v : 0)}
+              min={-180}
+              max={180}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              hideControls
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.rotation}
+              onChange={(v) => onParameterChange('rotation', v as number)}
+              min={-180}
+              max={180}
+              step={1}
+              className={styles.sliderWide}
+            />
+          </Group>
+        </Stack>
+      )}
+      {parameters._activePill === 'opacity' && (
+        <Stack gap="xs">
+          <Text className={styles.labelText}>{t('AddStampRequest.opacity', 'Opacity')}</Text>
+          <Group className={styles.sliderGroup} align="center">
+            <NumberInput
+              value={parameters.opacity}
+              onChange={(v) => onParameterChange('opacity', typeof v === 'number' ? v : 0)}
+              min={0}
+              max={100}
+              step={1}
+              size="sm"
+              className={styles.numberInput}
+              disabled={disabled}
+            />
+            <Slider
+              value={parameters.opacity}
+              onChange={(v) => onParameterChange('opacity', v as number)}
+              min={0}
+              max={100}
+              step={1}
+              className={styles.slider}
+            />
+          </Group>
+        </Stack>
+      )}
+
+      {parameters.stampType !== 'image' && (
+        <ColorInput
+          label={t('AddStampRequest.customColor', 'Custom Text Color')}
+          value={parameters.customColor}
+          onChange={(value) => onParameterChange('customColor', value)}
+          format="hex"
+          disabled={disabled}
+        />
+      )}
+
+      {/* Margin selection for text stamps */}
+      {parameters.stampType === 'text' && (
+        <Select
+          label={t('AddStampRequest.margin', 'Margin')}
+          value={parameters.customMargin}
+          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          data={[
+            { value: 'small', label: t('margin.small', 'Small') },
+            { value: 'medium', label: t('margin.medium', 'Medium') },
+            { value: 'large', label: t('margin.large', 'Large') },
+            { value: 'x-large', label: t('margin.xLarge', 'Extra Large') },
+          ]}
+          disabled={disabled}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default StampPositionFormattingSettings;
@@ -0,0 +1,112 @@
+import { useTranslation } from "react-i18next";
+import { Stack, Textarea, TextInput, Select, Button, Text, Divider } from "@mantine/core";
+import { AddStampParameters } from "./useAddStampParameters";
+import ButtonSelector from "../../shared/ButtonSelector";
+import styles from "./StampPreview.module.css";
+import { getDefaultFontSizeForAlphabet } from "./StampPreviewUtils";
+
+interface StampSetupSettingsProps {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const StampSetupSettings = ({ parameters, onParameterChange, disabled = false }: StampSetupSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <TextInput
+        label={t('pageSelectionPrompt', 'Page Selection (e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)')}
+        value={parameters.pageNumbers}
+        onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
+        disabled={disabled}
+      />
+      <Divider/>
+      <div>
+        <Text size="sm" fw={500} mb="xs">{t('AddStampRequest.stampType', 'Stamp Type')}</Text>
+        <ButtonSelector
+          value={parameters.stampType}
+          onChange={(v: 'text' | 'image') => onParameterChange('stampType', v)}
+          options={[
+            { value: 'text', label: t('watermark.type.1', 'Text') },
+            { value: 'image', label: t('watermark.type.2', 'Image') },
+          ]}
+          disabled={disabled}
+          buttonClassName={styles.modeToggleButton}
+          textClassName={styles.modeToggleButtonText}
+        />
+      </div>
+
+      {parameters.stampType === 'text' && (
+        <>
+          <Textarea
+            label={t('AddStampRequest.stampText', 'Stamp Text')}
+            value={parameters.stampText}
+            onChange={(e) => onParameterChange('stampText', e.currentTarget.value)}
+            autosize
+            minRows={2}
+            disabled={disabled}
+          />
+          <Select
+            label={t('AddStampRequest.alphabet', 'Alphabet')}
+            value={parameters.alphabet}
+            onChange={(v) => {
+              const nextAlphabet = (v as any) || 'roman';
+              onParameterChange('alphabet', nextAlphabet);
+              const nextDefault = getDefaultFontSizeForAlphabet(nextAlphabet);
+              onParameterChange('fontSize', nextDefault);
+            }}
+            data={[
+              { value: 'roman', label: 'Roman' },
+              { value: 'arabic', label: 'العربية' },
+              { value: 'japanese', label: '日本語' },
+              { value: 'korean', label: '한국어' },
+              { value: 'chinese', label: '简体中文' },
+              { value: 'thai', label: 'ไทย' },
+            ]}
+            disabled={disabled}
+          />
+        </>
+      )}
+
+      {parameters.stampType === 'image' && (
+        <Stack gap="xs">
+          <input
+            type="file"
+            accept=".png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.webp"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) onParameterChange('stampImage', file);
+            }}
+            disabled={disabled}
+            style={{ display: 'none' }}
+            id="stamp-image-input"
+          />
+          <Button
+            size="xs"
+            component="label"
+            htmlFor="stamp-image-input"
+            disabled={disabled}
+          >
+            {t('chooseFile', 'Choose File')}
+          </Button>
+          {parameters.stampImage && (
+            <Stack gap="xs">
+              <img
+                src={URL.createObjectURL(parameters.stampImage)}
+                alt="Selected stamp image"
+                className="max-h-24 w-full object-contain border border-gray-200 rounded bg-gray-50"
+              />
+              <Text size="xs" c="dimmed">
+                {parameters.stampImage.name}
+              </Text>
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default StampSetupSettings;
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Stack } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function AdjustContrastBasicSettings({ parameters, onParameterChange, disabled }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <SliderWithInput label={t('adjustContrast.contrast', 'Contrast')} value={parameters.contrast} onChange={(v) => onParameterChange('contrast', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.brightness', 'Brightness')} value={parameters.brightness} onChange={(v) => onParameterChange('brightness', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.saturation', 'Saturation')} value={parameters.saturation} onChange={(v) => onParameterChange('saturation', v as any)} disabled={disabled} />
+    </Stack>
+  );
+}
+
+
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Stack } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import SliderWithInput from '../../shared/sliderWithInput/SliderWithInput';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+export default function AdjustContrastColorSettings({ parameters, onParameterChange, disabled }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <SliderWithInput label={t('adjustContrast.red', 'Red')} value={parameters.red} onChange={(v) => onParameterChange('red', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.green', 'Green')} value={parameters.green} onChange={(v) => onParameterChange('green', v as any)} disabled={disabled} />
+      <SliderWithInput label={t('adjustContrast.blue', 'Blue')} value={parameters.blue} onChange={(v) => onParameterChange('blue', v as any)} disabled={disabled} />
+    </Stack>
+  );
+}
+
+
@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import { useThumbnailGeneration } from '../../../hooks/useThumbnailGeneration';
+import ObscuredOverlay from '../../shared/ObscuredOverlay';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { applyAdjustmentsToCanvas } from './utils';
+
+interface Props {
+  file: File | null;
+  parameters: AdjustContrastParameters;
+}
+
+export default function AdjustContrastPreview({ file, parameters }: Props) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [thumb, setThumb] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+
+  useEffect(() => {
+    let active = true;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') { setThumb(null); return; }
+      const id = `${file.name}:${file.size}:${file.lastModified}:page:1`;
+      const tUrl = await requestThumbnail(id, file, 1);
+      if (active) setThumb(tUrl || null);
+    };
+    load();
+    return () => { active = false; };
+  }, [file, requestThumbnail]);
+
+  useEffect(() => {
+    const revoked: string | null = null;
+    const render = async () => {
+      if (!thumb || !canvasRef.current) return;
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.src = thumb;
+      await new Promise<void>((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject();
+      });
+
+      // Draw thumbnail to a source canvas
+      const src = document.createElement('canvas');
+      src.width = img.naturalWidth;
+      src.height = img.naturalHeight;
+      const sctx = src.getContext('2d');
+      if (!sctx) return;
+      sctx.drawImage(img, 0, 0);
+
+      // Apply accurate pixel adjustments
+      const adjusted = applyAdjustmentsToCanvas(src, parameters);
+
+      // Draw adjusted onto display canvas
+      const display = canvasRef.current;
+      display.width = adjusted.width;
+      display.height = adjusted.height;
+      const dctx = display.getContext('2d');
+      if (!dctx) return;
+      dctx.clearRect(0, 0, display.width, display.height);
+      dctx.drawImage(adjusted, 0, 0);
+    };
+    render();
+    return () => {
+      if (revoked) URL.revokeObjectURL(revoked);
+    };
+  }, [thumb, parameters]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
+        <div style={{ fontSize: 12, color: 'var(--text-color-muted)' }}>{t('common.preview', 'Preview')}</div>
+        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
+      </div>
+      <ObscuredOverlay
+        obscured={!thumb}
+        overlayMessage={<Text size="sm" c="white" fw={600}>{t('adjustContrast.noPreview', 'Select a PDF to preview')}</Text>}
+        borderRadius={6}
+      >
+        <div ref={containerRef} style={{ aspectRatio: '8.5/11', width: '100%', border: '1px solid var(--border-color)', borderRadius: 8, overflow: 'hidden' }}>
+          {thumb && (
+            <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
+          )}
+        </div>
+      </ObscuredOverlay>
+    </div>
+  );
+}
+
+
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Stack } from '@mantine/core';
+import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+import AdjustContrastBasicSettings from './AdjustContrastBasicSettings';
+import AdjustContrastColorSettings from './AdjustContrastColorSettings';
+
+interface Props {
+  parameters: AdjustContrastParameters;
+  onParameterChange: <K extends keyof AdjustContrastParameters>(key: K, value: AdjustContrastParameters[K]) => void;
+  disabled?: boolean;
+}
+
+// Single-step settings used by Automate to configure Adjust Contrast in one panel
+export default function AdjustContrastSingleStepSettings({ parameters, onParameterChange, disabled }: Props) {
+  return (
+    <Stack gap="lg">
+      <AdjustContrastBasicSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+      <AdjustContrastColorSettings
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+}
+
+
@@ -0,0 +1,79 @@
+import { AdjustContrastParameters } from '../../../hooks/tools/adjustContrast/useAdjustContrastParameters';
+
+export function applyAdjustmentsToCanvas(src: HTMLCanvasElement, params: AdjustContrastParameters): HTMLCanvasElement {
+  const out = document.createElement('canvas');
+  out.width = src.width;
+  out.height = src.height;
+  const ctx = out.getContext('2d');
+  if (!ctx) return src;
+  ctx.drawImage(src, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, out.width, out.height);
+  const data = imageData.data;
+
+  const contrast = params.contrast / 100; // 0..2
+  const brightness = params.brightness / 100; // 0..2
+  const saturation = params.saturation / 100; // 0..2
+  const redMul = params.red / 100; // 0..2
+  const greenMul = params.green / 100; // 0..2
+  const blueMul = params.blue / 100; // 0..2
+
+  const clamp = (v: number) => Math.min(255, Math.max(0, v));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i] * redMul;
+    let g = data[i + 1] * greenMul;
+    let b = data[i + 2] * blueMul;
+
+    // Contrast (centered at 128)
+    r = clamp((r - 128) * contrast + 128);
+    g = clamp((g - 128) * contrast + 128);
+    b = clamp((b - 128) * contrast + 128);
+
+    // Brightness
+    r = clamp(r * brightness);
+    g = clamp(g * brightness);
+    b = clamp(b * brightness);
+
+    // Saturation via HSL
+    const rn = r / 255, gn = g / 255, bn = b / 255;
+    const max = Math.max(rn, gn, bn); const min = Math.min(rn, gn, bn);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case rn: h = (gn - bn) / d + (gn < bn ? 6 : 0); break;
+        case gn: h = (bn - rn) / d + 2; break;
+        default: h = (rn - gn) / d + 4; break;
+      }
+      h /= 6;
+    }
+    s = Math.min(1, Math.max(0, s * saturation));
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1; if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    };
+    let r2: number, g2: number, b2: number;
+    if (s === 0) { r2 = g2 = b2 = l; }
+    else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r2 = hue2rgb(p, q, h + 1/3);
+      g2 = hue2rgb(p, q, h);
+      b2 = hue2rgb(p, q, h - 1/3);
+    }
+    data[i] = clamp(Math.round(r2 * 255));
+    data[i + 1] = clamp(Math.round(g2 * 255));
+    data[i + 2] = clamp(Math.round(b2 * 255));
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  return out;
+}
+
+
@@ -10,6 +10,7 @@ import {
  Divider,
  Modal
 } from '@mantine/core';
+import { Z_INDEX_AUTOMATE_MODAL } from '../../../styles/zIndex';
 import CheckIcon from '@mui/icons-material/Check';
 import { ToolRegistry } from '../../../data/toolsTaxonomy';
 import ToolConfigurationModal from './ToolConfigurationModal';
@@ -221,6 +222,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
        onClose={handleCancelBack}
        title={t('automate.creation.unsavedChanges.title', 'Unsaved Changes')}
        centered
+        zIndex={Z_INDEX_AUTOMATE_MODAL}
      >
        <Stack gap="md">
          <Text>
--- a/Show More
+++ b/Show More