feat: add digital signature PDF tool

- Add new tool to apply cryptographic signatures to PDFs using X.509 certificates - Support PKCS#12 (.pfx, .p12) and PEM certificate formats - Create PKCS#7 detached signatures compatible with all major PDF viewers - Optional visible signature with customizable position, image, and text overlay - Add translations for English, German, Vietnamese, and Chinese
2026-01-03 20:47:50 +05:30
parent d694a674ac
commit 771de32cf0
144 changed files with 1943 additions and 275 deletions
--- a/src/js/config/tools.ts
+++ b/src/js/config/tools.ts
@@ -720,6 +720,12 @@ export const categories = [
        icon: 'ph-shield-check',
        subtitle: 'Set or change user permissions on a PDF.',
      },
+      {
+        href: import.meta.env.BASE_URL + 'digital-sign-pdf.html',
+        name: 'Digital Signature',
+        icon: 'ph-certificate',
+        subtitle: 'Add a cryptographic digital signature using X.509 certificates.',
+      },
    ],
  },
 ];
--- a/src/js/logic/add-stamps.ts
+++ b/src/js/logic/add-stamps.ts
@@ -35,8 +35,7 @@ function resetState() {
    viewerContainer.style.aspectRatio = ''
  }

-  // Revert container width only if NOT in full width mode
-  const isFullWidth = localStorage.getItem('fullWidthMode') === 'true'
+  const isFullWidth = localStorage.getItem('fullWidthMode') !== 'false'
  if (toolUploader && !isFullWidth) {
    toolUploader.classList.remove('max-w-6xl')
    toolUploader.classList.add('max-w-2xl')
@@ -56,8 +55,8 @@ function updateFileList() {
  fileListDiv.classList.remove('hidden')
  fileListDiv.innerHTML = ''

-  // Expand container width for viewer if NOT in full width mode
-  const isFullWidth = localStorage.getItem('fullWidthMode') === 'true'
+  // Expand container width for viewer if NOT in full width mode (default to true if not set)
+  const isFullWidth = localStorage.getItem('fullWidthMode') !== 'false'
  if (toolUploader && !isFullWidth) {
    toolUploader.classList.remove('max-w-2xl')
    toolUploader.classList.add('max-w-6xl')
--- a/src/js/logic/digital-sign-pdf-page.ts
+++ b/src/js/logic/digital-sign-pdf-page.ts
@@ -0,0 +1,669 @@
+import { createIcons, icons } from 'lucide';
+import { showAlert, showLoader, hideLoader } from '../ui.js';
+import { readFileAsArrayBuffer, formatBytes, downloadFile, getPDFDocument } from '../utils/helpers.js';
+import {
+    signPdf,
+    parsePfxFile,
+    parseCombinedPem,
+    getCertificateInfo,
+    type CertificateData,
+    type SignatureInfo,
+    type VisibleSignatureOptions,
+} from './digital-sign-pdf.js';
+
+interface DigitalSignState {
+    pdfFile: File | null;
+    pdfBytes: Uint8Array | null;
+    certFile: File | null;
+    certData: CertificateData | null;
+    sigImageData: ArrayBuffer | null;
+    sigImageType: 'png' | 'jpeg' | 'webp' | null;
+}
+
+const state: DigitalSignState = {
+    pdfFile: null,
+    pdfBytes: null,
+    certFile: null,
+    certData: null,
+    sigImageData: null,
+    sigImageType: null,
+};
+
+function resetState(): void {
+    state.pdfFile = null;
+    state.pdfBytes = null;
+    state.certFile = null;
+    state.certData = null;
+    state.sigImageData = null;
+    state.sigImageType = null;
+
+    const fileDisplayArea = getElement<HTMLDivElement>('file-display-area');
+    if (fileDisplayArea) fileDisplayArea.innerHTML = '';
+
+    const certDisplayArea = getElement<HTMLDivElement>('cert-display-area');
+    if (certDisplayArea) certDisplayArea.innerHTML = '';
+
+    const fileInput = getElement<HTMLInputElement>('file-input');
+    if (fileInput) fileInput.value = '';
+
+    const certInput = getElement<HTMLInputElement>('cert-input');
+    if (certInput) certInput.value = '';
+
+    const sigImageInput = getElement<HTMLInputElement>('sig-image-input');
+    if (sigImageInput) sigImageInput.value = '';
+
+    const sigImagePreview = getElement<HTMLDivElement>('sig-image-preview');
+    if (sigImagePreview) sigImagePreview.classList.add('hidden');
+
+    const certSection = getElement<HTMLDivElement>('certificate-section');
+    if (certSection) certSection.classList.add('hidden');
+
+    hidePasswordSection();
+    hideSignatureOptions();
+    hideCertInfo();
+    updateProcessButton();
+}
+
+function getElement<T extends HTMLElement>(id: string): T | null {
+    return document.getElementById(id) as T | null;
+}
+
+function initializePage(): void {
+    createIcons({ icons });
+
+    const fileInput = getElement<HTMLInputElement>('file-input');
+    const dropZone = getElement<HTMLDivElement>('drop-zone');
+    const certInput = getElement<HTMLInputElement>('cert-input');
+    const certDropZone = getElement<HTMLDivElement>('cert-drop-zone');
+    const certPassword = getElement<HTMLInputElement>('cert-password');
+    const processBtn = getElement<HTMLButtonElement>('process-btn');
+    const backBtn = getElement<HTMLButtonElement>('back-to-tools');
+
+    if (fileInput) {
+        fileInput.addEventListener('change', handlePdfUpload);
+        fileInput.addEventListener('click', () => {
+            fileInput.value = '';
+        });
+    }
+
+    if (dropZone) {
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('bg-gray-700');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('bg-gray-700');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('bg-gray-700');
+            const droppedFiles = e.dataTransfer?.files;
+            if (droppedFiles && droppedFiles.length > 0) {
+                handlePdfFile(droppedFiles[0]);
+            }
+        });
+    }
+
+    if (certInput) {
+        certInput.addEventListener('change', handleCertUpload);
+        certInput.addEventListener('click', () => {
+            certInput.value = '';
+        });
+    }
+
+    if (certDropZone) {
+        certDropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            certDropZone.classList.add('bg-gray-700');
+        });
+
+        certDropZone.addEventListener('dragleave', () => {
+            certDropZone.classList.remove('bg-gray-700');
+        });
+
+        certDropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            certDropZone.classList.remove('bg-gray-700');
+            const droppedFiles = e.dataTransfer?.files;
+            if (droppedFiles && droppedFiles.length > 0) {
+                handleCertFile(droppedFiles[0]);
+            }
+        });
+    }
+
+    if (certPassword) {
+        certPassword.addEventListener('input', handlePasswordInput);
+        certPassword.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                handlePasswordInput();
+            }
+        });
+    }
+
+    if (processBtn) {
+        processBtn.addEventListener('click', processSignature);
+    }
+
+    if (backBtn) {
+        backBtn.addEventListener('click', () => {
+            window.location.href = import.meta.env.BASE_URL;
+        });
+    }
+
+    const enableVisibleSig = getElement<HTMLInputElement>('enable-visible-sig');
+    const visibleSigOptions = getElement<HTMLDivElement>('visible-sig-options');
+    const sigPage = getElement<HTMLSelectElement>('sig-page');
+    const customPageWrapper = getElement<HTMLDivElement>('custom-page-wrapper');
+    const sigImageInput = getElement<HTMLInputElement>('sig-image-input');
+    const sigImagePreview = getElement<HTMLDivElement>('sig-image-preview');
+    const sigImageThumb = getElement<HTMLImageElement>('sig-image-thumb');
+    const removeSigImage = getElement<HTMLButtonElement>('remove-sig-image');
+    const enableSigText = getElement<HTMLInputElement>('enable-sig-text');
+    const sigTextOptions = getElement<HTMLDivElement>('sig-text-options');
+
+    if (enableVisibleSig && visibleSigOptions) {
+        enableVisibleSig.addEventListener('change', () => {
+            if (enableVisibleSig.checked) {
+                visibleSigOptions.classList.remove('hidden');
+            } else {
+                visibleSigOptions.classList.add('hidden');
+            }
+        });
+    }
+
+    if (sigPage && customPageWrapper) {
+        sigPage.addEventListener('change', () => {
+            if (sigPage.value === 'custom') {
+                customPageWrapper.classList.remove('hidden');
+            } else {
+                customPageWrapper.classList.add('hidden');
+            }
+        });
+    }
+
+    if (sigImageInput) {
+        sigImageInput.addEventListener('change', async (e) => {
+            const input = e.target as HTMLInputElement;
+            if (input.files && input.files.length > 0) {
+                const file = input.files[0];
+                const validTypes = ['image/png', 'image/jpeg', 'image/webp'];
+                if (!validTypes.includes(file.type)) {
+                    showAlert('Invalid Image', 'Please select a PNG, JPG, or WebP image.');
+                    return;
+                }
+                state.sigImageData = await readFileAsArrayBuffer(file) as ArrayBuffer;
+                state.sigImageType = file.type.replace('image/', '') as 'png' | 'jpeg' | 'webp';
+
+                if (sigImageThumb && sigImagePreview) {
+                    const url = URL.createObjectURL(file);
+                    sigImageThumb.src = url;
+                    sigImagePreview.classList.remove('hidden');
+                }
+            }
+        });
+    }
+
+    if (removeSigImage && sigImagePreview) {
+        removeSigImage.addEventListener('click', () => {
+            state.sigImageData = null;
+            state.sigImageType = null;
+            sigImagePreview.classList.add('hidden');
+            if (sigImageInput) sigImageInput.value = '';
+        });
+    }
+
+    if (enableSigText && sigTextOptions) {
+        enableSigText.addEventListener('change', () => {
+            if (enableSigText.checked) {
+                sigTextOptions.classList.remove('hidden');
+            } else {
+                sigTextOptions.classList.add('hidden');
+            }
+        });
+    }
+}
+
+function handlePdfUpload(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+        handlePdfFile(input.files[0]);
+    }
+}
+
+async function handlePdfFile(file: File): Promise<void> {
+    if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
+        showAlert('Invalid File', 'Please select a PDF file.');
+        return;
+    }
+
+    state.pdfFile = file;
+    state.pdfBytes = new Uint8Array(await readFileAsArrayBuffer(file) as ArrayBuffer);
+
+    updatePdfDisplay();
+    showCertificateSection();
+}
+
+async function updatePdfDisplay(): Promise<void> {
+    const fileDisplayArea = getElement<HTMLDivElement>('file-display-area');
+
+    if (!fileDisplayArea || !state.pdfFile) return;
+
+    fileDisplayArea.innerHTML = '';
+
+    const fileDiv = document.createElement('div');
+    fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
+
+    const infoContainer = document.createElement('div');
+    infoContainer.className = 'flex flex-col flex-1 min-w-0';
+
+    const nameSpan = document.createElement('div');
+    nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
+    nameSpan.textContent = state.pdfFile.name;
+
+    const metaSpan = document.createElement('div');
+    metaSpan.className = 'text-xs text-gray-400';
+    metaSpan.textContent = `${formatBytes(state.pdfFile.size)} • Loading pages...`;
+
+    infoContainer.append(nameSpan, metaSpan);
+
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
+    removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
+    removeBtn.onclick = () => {
+        state.pdfFile = null;
+        state.pdfBytes = null;
+        fileDisplayArea.innerHTML = '';
+        hideCertificateSection();
+        updateProcessButton();
+    };
+
+    fileDiv.append(infoContainer, removeBtn);
+    fileDisplayArea.appendChild(fileDiv);
+    createIcons({ icons });
+
+    try {
+        if (state.pdfBytes) {
+            const pdfDoc = await getPDFDocument({ data: state.pdfBytes.slice() }).promise;
+            metaSpan.textContent = `${formatBytes(state.pdfFile.size)} • ${pdfDoc.numPages} pages`;
+        }
+    } catch (error) {
+        console.error('Error loading PDF:', error);
+        metaSpan.textContent = `${formatBytes(state.pdfFile.size)}`;
+    }
+}
+
+function showCertificateSection(): void {
+    const certSection = getElement<HTMLDivElement>('certificate-section');
+    if (certSection) {
+        certSection.classList.remove('hidden');
+    }
+}
+
+function hideCertificateSection(): void {
+    const certSection = getElement<HTMLDivElement>('certificate-section');
+    const signatureOptions = getElement<HTMLDivElement>('signature-options');
+
+    if (certSection) {
+        certSection.classList.add('hidden');
+    }
+    if (signatureOptions) {
+        signatureOptions.classList.add('hidden');
+    }
+
+    state.certFile = null;
+    state.certData = null;
+
+    const certDisplayArea = getElement<HTMLDivElement>('cert-display-area');
+    if (certDisplayArea) {
+        certDisplayArea.innerHTML = '';
+    }
+
+    const certInfo = getElement<HTMLDivElement>('cert-info');
+    if (certInfo) {
+        certInfo.classList.add('hidden');
+    }
+
+    const certPasswordSection = getElement<HTMLDivElement>('cert-password-section');
+    if (certPasswordSection) {
+        certPasswordSection.classList.add('hidden');
+    }
+}
+
+function handleCertUpload(e: Event): void {
+    const input = e.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+        handleCertFile(input.files[0]);
+    }
+}
+
+async function handleCertFile(file: File): Promise<void> {
+    const validExtensions = ['.pfx', '.p12', '.pem'];
+    const hasValidExtension = validExtensions.some(ext =>
+        file.name.toLowerCase().endsWith(ext)
+    );
+
+    if (!hasValidExtension) {
+        showAlert('Invalid Certificate', 'Please select a .pfx, .p12, or .pem certificate file.');
+        return;
+    }
+
+    state.certFile = file;
+    state.certData = null;
+
+    updateCertDisplay();
+
+    const isPemFile = file.name.toLowerCase().endsWith('.pem');
+
+    if (isPemFile) {
+        try {
+            const pemContent = await file.text();
+            const isEncrypted = pemContent.includes('ENCRYPTED');
+
+            if (isEncrypted) {
+                showPasswordSection();
+                updatePasswordLabel('Private Key Password');
+            } else {
+                state.certData = parseCombinedPem(pemContent);
+                updateCertInfo();
+                showSignatureOptions();
+
+                const certStatus = getElement<HTMLDivElement>('cert-status');
+                if (certStatus) {
+                    certStatus.innerHTML = 'Certificate loaded <i data-lucide="check" class="inline w-4 h-4"></i>';
+                    createIcons({ icons });
+                    certStatus.className = 'text-xs text-green-400';
+                }
+            }
+        } catch (error) {
+            const certStatus = getElement<HTMLDivElement>('cert-status');
+            if (certStatus) {
+                certStatus.textContent = 'Failed to parse PEM file';
+                certStatus.className = 'text-xs text-red-400';
+            }
+        }
+    } else {
+        showPasswordSection();
+        updatePasswordLabel('Certificate Password');
+    }
+
+    hideSignatureOptions();
+    updateProcessButton();
+}
+
+function updateCertDisplay(): void {
+    const certDisplayArea = getElement<HTMLDivElement>('cert-display-area');
+
+    if (!certDisplayArea || !state.certFile) return;
+
+    certDisplayArea.innerHTML = '';
+
+    const certDiv = document.createElement('div');
+    certDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
+
+    const infoContainer = document.createElement('div');
+    infoContainer.className = 'flex flex-col flex-1 min-w-0';
+
+    const nameSpan = document.createElement('div');
+    nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
+    nameSpan.textContent = state.certFile.name;
+
+    const metaSpan = document.createElement('div');
+    metaSpan.className = 'text-xs text-gray-400';
+    metaSpan.id = 'cert-status';
+    metaSpan.textContent = 'Enter password to unlock';
+
+    infoContainer.append(nameSpan, metaSpan);
+
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
+    removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
+    removeBtn.onclick = () => {
+        state.certFile = null;
+        state.certData = null;
+        certDisplayArea.innerHTML = '';
+        hidePasswordSection();
+        hideCertInfo();
+        hideSignatureOptions();
+        updateProcessButton();
+    };
+
+    certDiv.append(infoContainer, removeBtn);
+    certDisplayArea.appendChild(certDiv);
+    createIcons({ icons });
+}
+
+function showPasswordSection(): void {
+    const certPasswordSection = getElement<HTMLDivElement>('cert-password-section');
+    if (certPasswordSection) {
+        certPasswordSection.classList.remove('hidden');
+    }
+
+    const certPassword = getElement<HTMLInputElement>('cert-password');
+    if (certPassword) {
+        certPassword.value = '';
+        certPassword.focus();
+    }
+}
+
+function updatePasswordLabel(labelText: string): void {
+    const label = document.querySelector('label[for="cert-password"]');
+    if (label) {
+        label.textContent = labelText;
+    }
+}
+
+function hidePasswordSection(): void {
+    const certPasswordSection = getElement<HTMLDivElement>('cert-password-section');
+    if (certPasswordSection) {
+        certPasswordSection.classList.add('hidden');
+    }
+}
+
+function showSignatureOptions(): void {
+    const signatureOptions = getElement<HTMLDivElement>('signature-options');
+    if (signatureOptions) {
+        signatureOptions.classList.remove('hidden');
+    }
+    const visibleSigSection = getElement<HTMLDivElement>('visible-signature-section');
+    if (visibleSigSection) {
+        visibleSigSection.classList.remove('hidden');
+    }
+}
+
+function hideSignatureOptions(): void {
+    const signatureOptions = getElement<HTMLDivElement>('signature-options');
+    if (signatureOptions) {
+        signatureOptions.classList.add('hidden');
+    }
+    const visibleSigSection = getElement<HTMLDivElement>('visible-signature-section');
+    if (visibleSigSection) {
+        visibleSigSection.classList.add('hidden');
+    }
+}
+
+function hideCertInfo(): void {
+    const certInfo = getElement<HTMLDivElement>('cert-info');
+    if (certInfo) {
+        certInfo.classList.add('hidden');
+    }
+}
+
+async function handlePasswordInput(): Promise<void> {
+    const certPassword = getElement<HTMLInputElement>('cert-password');
+    const password = certPassword?.value ?? '';
+
+    if (!state.certFile || !password) {
+        return;
+    }
+
+    try {
+        const isPemFile = state.certFile.name.toLowerCase().endsWith('.pem');
+
+        if (isPemFile) {
+            const pemContent = await state.certFile.text();
+            state.certData = parseCombinedPem(pemContent, password);
+        } else {
+            const certBytes = await readFileAsArrayBuffer(state.certFile) as ArrayBuffer;
+            state.certData = parsePfxFile(certBytes, password);
+        }
+
+        updateCertInfo();
+        showSignatureOptions();
+        updateProcessButton();
+
+        const certStatus = getElement<HTMLDivElement>('cert-status');
+        if (certStatus) {
+            certStatus.innerHTML = 'Certificate unlocked <i data-lucide="check-circle" class="inline w-4 h-4"></i>';
+            createIcons({ icons });
+            certStatus.className = 'text-xs text-green-400';
+        }
+    } catch (error) {
+        state.certData = null;
+        hideSignatureOptions();
+        updateProcessButton();
+
+        const certStatus = getElement<HTMLDivElement>('cert-status');
+        if (certStatus) {
+            const errorMessage = error instanceof Error ? error.message : 'Invalid password or certificate';
+            certStatus.textContent = errorMessage.includes('password')
+                ? 'Incorrect password'
+                : 'Failed to parse certificate';
+            certStatus.className = 'text-xs text-red-400';
+        }
+    }
+}
+
+function updateCertInfo(): void {
+    if (!state.certData) return;
+
+    const certInfo = getElement<HTMLDivElement>('cert-info');
+    const certSubject = getElement<HTMLSpanElement>('cert-subject');
+    const certIssuer = getElement<HTMLSpanElement>('cert-issuer');
+    const certValidity = getElement<HTMLSpanElement>('cert-validity');
+
+    if (!certInfo) return;
+
+    const info = getCertificateInfo(state.certData.certificate);
+
+    if (certSubject) {
+        certSubject.textContent = info.subject;
+    }
+    if (certIssuer) {
+        certIssuer.textContent = info.issuer;
+    }
+    if (certValidity) {
+        const formatDate = (date: Date) => date.toLocaleDateString();
+        certValidity.textContent = `${formatDate(info.validFrom)} - ${formatDate(info.validTo)}`;
+    }
+
+    certInfo.classList.remove('hidden');
+}
+
+function updateProcessButton(): void {
+    const processBtn = getElement<HTMLButtonElement>('process-btn');
+    if (!processBtn) return;
+
+    const canProcess = state.pdfBytes !== null && state.certData !== null;
+
+    if (canProcess) {
+        processBtn.style.display = '';
+    } else {
+        processBtn.style.display = 'none';
+    }
+}
+
+async function processSignature(): Promise<void> {
+    if (!state.pdfBytes || !state.certData) {
+        showAlert('Missing Data', 'Please upload both a PDF and a valid certificate.');
+        return;
+    }
+
+    const reason = getElement<HTMLInputElement>('sign-reason')?.value ?? '';
+    const location = getElement<HTMLInputElement>('sign-location')?.value ?? '';
+    const contactInfo = getElement<HTMLInputElement>('sign-contact')?.value ?? '';
+
+    const signatureInfo: SignatureInfo = {};
+    if (reason) signatureInfo.reason = reason;
+    if (location) signatureInfo.location = location;
+    if (contactInfo) signatureInfo.contactInfo = contactInfo;
+
+    let visibleSignature: VisibleSignatureOptions | undefined;
+
+    const enableVisibleSig = getElement<HTMLInputElement>('enable-visible-sig');
+    if (enableVisibleSig?.checked) {
+        const sigX = parseInt(getElement<HTMLInputElement>('sig-x')?.value ?? '25', 10);
+        const sigY = parseInt(getElement<HTMLInputElement>('sig-y')?.value ?? '700', 10);
+        const sigWidth = parseInt(getElement<HTMLInputElement>('sig-width')?.value ?? '150', 10);
+        const sigHeight = parseInt(getElement<HTMLInputElement>('sig-height')?.value ?? '50', 10);
+
+        const sigPageSelect = getElement<HTMLSelectElement>('sig-page');
+        let sigPage: number | string = 0;
+        if (sigPageSelect) {
+            if (sigPageSelect.value === 'last') {
+                sigPage = 'last';
+            } else if (sigPageSelect.value === 'all') {
+                sigPage = 'all';
+            } else if (sigPageSelect.value === 'custom') {
+                sigPage = parseInt(getElement<HTMLInputElement>('sig-custom-page')?.value ?? '1', 10) - 1;
+            } else {
+                sigPage = parseInt(sigPageSelect.value, 10);
+            }
+        }
+
+        const enableSigText = getElement<HTMLInputElement>('enable-sig-text');
+        let sigText = enableSigText?.checked ? getElement<HTMLInputElement>('sig-text')?.value : undefined;
+        const sigTextColor = getElement<HTMLInputElement>('sig-text-color')?.value ?? '#000000';
+        const sigTextSize = parseInt(getElement<HTMLInputElement>('sig-text-size')?.value ?? '12', 10);
+
+        if (!state.sigImageData && !sigText && state.certData) {
+            const certInfo = getCertificateInfo(state.certData.certificate);
+            const date = new Date().toLocaleDateString();
+            sigText = `Digitally signed by ${certInfo.subject}\n${date}`;
+        }
+
+        visibleSignature = {
+            enabled: true,
+            x: sigX,
+            y: sigY,
+            width: sigWidth,
+            height: sigHeight,
+            page: sigPage,
+            imageData: state.sigImageData ?? undefined,
+            imageType: state.sigImageType ?? undefined,
+            text: sigText,
+            textColor: sigTextColor,
+            textSize: sigTextSize,
+        };
+    }
+
+    showLoader('Applying digital signature...');
+
+    try {
+        const signedPdfBytes = await signPdf(state.pdfBytes, state.certData, {
+            signatureInfo,
+            visibleSignature,
+        });
+
+        const blob = new Blob([signedPdfBytes.slice().buffer], { type: 'application/pdf' });
+        const originalName = state.pdfFile?.name ?? 'document.pdf';
+        const signedName = originalName.replace(/\.pdf$/i, '_signed.pdf');
+
+        downloadFile(blob, signedName);
+
+        hideLoader();
+        showAlert('Success', 'PDF signed successfully! The signature can be verified in any PDF reader.', 'success', () => { resetState(); });
+    } catch (error) {
+        hideLoader();
+        console.error('Signing error:', error);
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+        showAlert('Signing Failed', `Failed to sign PDF: ${errorMessage}`);
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializePage);
+} else {
+    initializePage();
+}
--- a/src/js/logic/digital-sign-pdf.ts
+++ b/src/js/logic/digital-sign-pdf.ts
@@ -0,0 +1,194 @@
+import { PdfSigner, type SignOption } from 'zgapdfsigner';
+import forge from 'node-forge';
+
+export interface SignatureInfo {
+    reason?: string;
+    location?: string;
+    contactInfo?: string;
+    name?: string;
+}
+
+export interface CertificateData {
+    p12Buffer: ArrayBuffer;
+    password: string;
+    certificate: forge.pki.Certificate;
+}
+
+export interface SignPdfOptions {
+    signatureInfo?: SignatureInfo;
+    visibleSignature?: VisibleSignatureOptions;
+}
+
+export interface VisibleSignatureOptions {
+    enabled: boolean;
+    imageData?: ArrayBuffer;
+    imageType?: 'png' | 'jpeg' | 'webp';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    page: number | string;
+    text?: string;
+    textColor?: string;
+    textSize?: number;
+}
+
+export function parsePfxFile(pfxBytes: ArrayBuffer, password: string): CertificateData {
+    const pfxAsn1 = forge.asn1.fromDer(forge.util.createBuffer(new Uint8Array(pfxBytes)));
+    const pfx = forge.pkcs12.pkcs12FromAsn1(pfxAsn1, password);
+
+    const certBags = pfx.getBags({ bagType: forge.pki.oids.certBag });
+    const keyBags = pfx.getBags({ bagType: forge.pki.oids.pkcs8ShroudedKeyBag });
+
+    const certBagArray = certBags[forge.pki.oids.certBag];
+    const keyBagArray = keyBags[forge.pki.oids.pkcs8ShroudedKeyBag];
+
+    if (!certBagArray || certBagArray.length === 0) {
+        throw new Error('No certificate found in PFX file');
+    }
+
+    if (!keyBagArray || keyBagArray.length === 0) {
+        throw new Error('No private key found in PFX file');
+    }
+
+    const certificate = certBagArray[0].cert;
+
+    if (!certificate) {
+        throw new Error('Failed to extract certificate from PFX file');
+    }
+
+    return { p12Buffer: pfxBytes, password, certificate };
+}
+
+export function parsePemFiles(
+    certPem: string,
+    keyPem: string,
+    keyPassword?: string
+): CertificateData {
+    const certificate = forge.pki.certificateFromPem(certPem);
+
+    let privateKey: forge.pki.PrivateKey;
+    if (keyPem.includes('ENCRYPTED')) {
+        if (!keyPassword) {
+            throw new Error('Password required for encrypted private key');
+        }
+        privateKey = forge.pki.decryptRsaPrivateKey(keyPem, keyPassword);
+        if (!privateKey) {
+            throw new Error('Failed to decrypt private key');
+        }
+    } else {
+        privateKey = forge.pki.privateKeyFromPem(keyPem);
+    }
+
+    const p12Password = keyPassword || 'temp-password';
+    const p12Asn1 = forge.pkcs12.toPkcs12Asn1(
+        privateKey,
+        [certificate],
+        p12Password,
+        { algorithm: '3des' }
+    );
+    const p12Der = forge.asn1.toDer(p12Asn1).getBytes();
+    const p12Buffer = new Uint8Array(p12Der.length);
+    for (let i = 0; i < p12Der.length; i++) {
+        p12Buffer[i] = p12Der.charCodeAt(i);
+    }
+
+    return { p12Buffer: p12Buffer.buffer, password: p12Password, certificate };
+}
+
+export function parseCombinedPem(pemContent: string, password?: string): CertificateData {
+    const certMatch = pemContent.match(/-----BEGIN CERTIFICATE-----[\s\S]*?-----END CERTIFICATE-----/);
+    const keyMatch = pemContent.match(/-----BEGIN (RSA |EC |ENCRYPTED )?PRIVATE KEY-----[\s\S]*?-----END (RSA |EC |ENCRYPTED )?PRIVATE KEY-----/);
+
+    if (!certMatch) {
+        throw new Error('No certificate found in PEM file');
+    }
+
+    if (!keyMatch) {
+        throw new Error('No private key found in PEM file');
+    }
+
+    return parsePemFiles(certMatch[0], keyMatch[0], password);
+}
+
+export async function signPdf(
+    pdfBytes: Uint8Array,
+    certificateData: CertificateData,
+    options: SignPdfOptions = {}
+): Promise<Uint8Array> {
+    const signatureInfo = options.signatureInfo ?? {};
+
+    const signOptions: SignOption = {
+        p12cert: certificateData.p12Buffer,
+        pwd: certificateData.password,
+    };
+
+    if (signatureInfo.reason) {
+        signOptions.reason = signatureInfo.reason;
+    }
+
+    if (signatureInfo.location) {
+        signOptions.location = signatureInfo.location;
+    }
+
+    if (signatureInfo.contactInfo) {
+        signOptions.contact = signatureInfo.contactInfo;
+    }
+
+    if (options.visibleSignature?.enabled) {
+        const vs = options.visibleSignature;
+
+        const drawinf = {
+            area: {
+                x: vs.x,
+                y: vs.y,
+                w: vs.width,
+                h: vs.height,
+            },
+            pageidx: vs.page,
+            imgInfo: undefined as { imgData: ArrayBuffer; imgType: string } | undefined,
+            textInfo: undefined as { text: string; size: number; color: string } | undefined,
+        };
+
+        if (vs.imageData && vs.imageType) {
+            drawinf.imgInfo = {
+                imgData: vs.imageData,
+                imgType: vs.imageType,
+            };
+        }
+
+        if (vs.text) {
+            drawinf.textInfo = {
+                text: vs.text,
+                size: vs.textSize ?? 12,
+                color: vs.textColor ?? '#000000',
+            };
+        }
+
+        signOptions.drawinf = drawinf as SignOption['drawinf'];
+    }
+
+    const signer = new PdfSigner(signOptions);
+    const signedPdfBytes = await signer.sign(pdfBytes);
+
+    return new Uint8Array(signedPdfBytes);
+}
+
+export function getCertificateInfo(certificate: forge.pki.Certificate): {
+    subject: string;
+    issuer: string;
+    validFrom: Date;
+    validTo: Date;
+    serialNumber: string;
+} {
+    const subjectCN = certificate.subject.getField('CN');
+    const issuerCN = certificate.issuer.getField('CN');
+
+    return {
+        subject: subjectCN?.value as string ?? 'Unknown',
+        issuer: issuerCN?.value as string ?? 'Unknown',
+        validFrom: certificate.validity.notBefore,
+        validTo: certificate.validity.notAfter,
+        serialNumber: certificate.serialNumber,
+    };
+}
--- a/src/js/logic/form-filler-page.ts
+++ b/src/js/logic/form-filler-page.ts
@@ -85,7 +85,7 @@ function resetState() {
    }

    const toolUploader = document.getElementById('tool-uploader');
-    const isFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+    const isFullWidth = localStorage.getItem('fullWidthMode') !== 'false';
    if (toolUploader && !isFullWidth) {
        toolUploader.classList.remove('max-w-6xl');
        toolUploader.classList.add('max-w-2xl');
@@ -139,7 +139,8 @@ async function setupFormViewer() {
    }

    const toolUploader = document.getElementById('tool-uploader');
-    const isFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+    // Default to true if not set
+    const isFullWidth = localStorage.getItem('fullWidthMode') !== 'false';
    if (toolUploader && !isFullWidth) {
        toolUploader.classList.remove('max-w-2xl');
        toolUploader.classList.add('max-w-6xl');
--- a/src/js/main.ts
+++ b/src/js/main.ts
@@ -321,30 +321,63 @@ const init = async () => {
    const searchBar = document.getElementById('search-bar');
    const categoryGroups = dom.toolGrid.querySelectorAll('.category-group');

+    const searchResultsContainer = document.createElement('div');
+    searchResultsContainer.id = 'search-results';
+    searchResultsContainer.className = 'hidden grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6 col-span-full';
+    dom.toolGrid.insertBefore(searchResultsContainer, dom.toolGrid.firstChild);
+
    searchBar.addEventListener('input', () => {
      // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
      const searchTerm = searchBar.value.toLowerCase().trim();

+      if (!searchTerm) {
+        searchResultsContainer.classList.add('hidden');
+        searchResultsContainer.innerHTML = '';
+        categoryGroups.forEach((group) => {
+          (group as HTMLElement).style.display = '';
+          const toolCards = group.querySelectorAll('.tool-card');
+          toolCards.forEach((card) => {
+            (card as HTMLElement).style.display = '';
+          });
+        });
+        return;
+      }
+
+      categoryGroups.forEach((group) => {
+        (group as HTMLElement).style.display = 'none';
+      });
+
+      searchResultsContainer.innerHTML = '';
+      searchResultsContainer.classList.remove('hidden');
+
+      const seenToolIds = new Set<string>();
+      const allTools: HTMLElement[] = [];
+
      categoryGroups.forEach((group) => {
        const toolCards = Array.from(group.querySelectorAll('.tool-card'));

-        let visibleToolsInCategory = 0;
-
        toolCards.forEach((card) => {
          const toolName = (card.querySelector('h3')?.textContent || '').toLowerCase();
          const toolSubtitle = (card.querySelector('p')?.textContent || '').toLowerCase();
+          const toolHref = (card as HTMLAnchorElement).href || (card as HTMLElement).dataset.toolId || '';

-          const isMatch = !searchTerm || toolName.includes(searchTerm) || toolSubtitle.includes(searchTerm);
+          const toolId = toolHref.split('/').pop()?.replace('.html', '') || toolName;

-          (card as HTMLElement).style.display = isMatch ? '' : 'none';
+          const isMatch = toolName.includes(searchTerm) || toolSubtitle.includes(searchTerm);
+          const isDuplicate = seenToolIds.has(toolId);

-          if (isMatch) {
-            visibleToolsInCategory++;
+          if (isMatch && !isDuplicate) {
+            seenToolIds.add(toolId);
+            allTools.push(card.cloneNode(true) as HTMLElement);
          }
        });
-
-        (group as HTMLElement).style.display = visibleToolsInCategory === 0 ? 'none' : '';
      });
+
+      allTools.forEach((tool) => {
+        searchResultsContainer.appendChild(tool);
+      });
+
+      createIcons({ icons });
    });

    window.addEventListener('keydown', function (e) {
@@ -465,8 +498,7 @@ const init = async () => {
  const fullWidthToggle = document.getElementById('full-width-toggle') as HTMLInputElement;
  const toolInterface = document.getElementById('tool-interface');

-  // Load saved preference
-  const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+  const savedFullWidth = localStorage.getItem('fullWidthMode') !== 'false';
  if (fullWidthToggle) {
    fullWidthToggle.checked = savedFullWidth;
    applyFullWidthMode(savedFullWidth);
--- a/src/js/utils/full-width.ts
+++ b/src/js/utils/full-width.ts
@@ -2,7 +2,7 @@
 // This script applies the full-width preference from localStorage to page uploaders

 export function initFullWidthMode() {
-    const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+    const savedFullWidth = localStorage.getItem('fullWidthMode') !== 'false';

    if (savedFullWidth) {
        applyFullWidthMode(true);
--- a/src/pages/.backup-related-tools-fix/compress-pdf.html
+++ b/src/pages/.backup-related-tools-fix/compress-pdf.html
@@ -57,7 +57,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -391,7 +391,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/edit-pdf.html
+++ b/src/pages/.backup-related-tools-fix/edit-pdf.html
@@ -60,7 +60,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -264,7 +264,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/excel-to-pdf.html
+++ b/src/pages/.backup-related-tools-fix/excel-to-pdf.html
@@ -60,7 +60,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -277,7 +277,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/merge-pdf.html
+++ b/src/pages/.backup-related-tools-fix/merge-pdf.html
@@ -56,7 +56,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -322,7 +322,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/organize-pdf.html
+++ b/src/pages/.backup-related-tools-fix/organize-pdf.html
@@ -59,7 +59,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -235,7 +235,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/.backup-related-tools-fix/pdf-to-docx.html
+++ b/src/pages/.backup-related-tools-fix/pdf-to-docx.html
@@ -58,7 +58,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -272,7 +272,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/pdf-to-jpg.html
+++ b/src/pages/.backup-related-tools-fix/pdf-to-jpg.html
@@ -59,7 +59,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -283,7 +283,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/rotate-pdf.html
+++ b/src/pages/.backup-related-tools-fix/rotate-pdf.html
@@ -62,7 +62,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -286,7 +286,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/.backup-related-tools-fix/split-pdf.html
+++ b/src/pages/.backup-related-tools-fix/split-pdf.html
@@ -60,7 +60,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -400,7 +400,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">
--- a/src/pages/.backup-related-tools-fix/word-to-pdf.html
+++ b/src/pages/.backup-related-tools-fix/word-to-pdf.html
@@ -60,7 +60,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -295,7 +295,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/add-attachments.html
+++ b/src/pages/add-attachments.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -312,7 +312,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/add-blank-page.html
+++ b/src/pages/add-blank-page.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -305,7 +305,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/add-stamps.html
+++ b/src/pages/add-stamps.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -277,7 +277,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/add-watermark.html
+++ b/src/pages/add-watermark.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -349,7 +349,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/alternate-merge.html
+++ b/src/pages/alternate-merge.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -279,7 +279,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/background-color.html
+++ b/src/pages/background-color.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -279,7 +279,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/bmp-to-pdf.html
+++ b/src/pages/bmp-to-pdf.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -282,7 +282,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/bookmark.html
+++ b/src/pages/bookmark.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -573,7 +573,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/cbz-to-pdf.html
+++ b/src/pages/cbz-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/change-permissions.html
+++ b/src/pages/change-permissions.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -335,7 +335,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/combine-single-page.html
+++ b/src/pages/combine-single-page.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -322,7 +322,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/compare-pdfs.html
+++ b/src/pages/compare-pdfs.html
@@ -102,7 +102,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -369,7 +369,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/compress-pdf.html
+++ b/src/pages/compress-pdf.html
@@ -67,7 +67,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -391,7 +391,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">
--- a/src/pages/crop-pdf.html
+++ b/src/pages/crop-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -315,7 +315,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/csv-to-pdf.html
+++ b/src/pages/csv-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/decrypt-pdf.html
+++ b/src/pages/decrypt-pdf.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -280,7 +280,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/delete-pages.html
+++ b/src/pages/delete-pages.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -239,7 +239,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/digital-sign-pdf.html
+++ b/src/pages/digital-sign-pdf.html
@@ -0,0 +1,598 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Digital Signature PDF Online Free - Add Cryptographic Signature | BentoPDF</title>
+    <meta name="title" content="Digital Signature PDF Online Free - Add Cryptographic Signature | BentoPDF">
+    <meta name="description"
+        content="★ Add digital signature to PDF online free ★ Use X.509 certificates ★ PKCS#7 signatures ★ No signup ★ Privacy-first ★ Works in browser">
+    <meta name="keywords"
+        content="digital signature pdf, pkcs7 signature, x509 certificate, sign pdf certificate, cryptographic signature">
+    <meta name="author" content="BentoPDF">
+    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
+
+    <link rel="canonical" href="https://www.bentopdf.com/digital-sign-pdf">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://www.bentopdf.com/digital-sign-pdf">
+    <meta property="og:title" content="Digital Signature PDF Online Free - Add Cryptographic Signature | BentoPDF">
+    <meta property="og:description"
+        content="★ Add digital signature to PDF online free ★ Use X.509 certificates ★ PKCS#7 signatures ★ No signup ★ Privacy-first ★ Works in browser">
+    <meta property="og:image" content="https://www.bentopdf.com/images/og-digital-sign-pdf.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:site_name" content="BentoPDF">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://www.bentopdf.com/digital-sign-pdf">
+    <meta name="twitter:title" content="Digital Signature PDF Free">
+    <meta name="twitter:description"
+        content="★ Add digital signature to PDF online free ★ Use X.509 certificates ★ PKCS#7 signatures ★ Privacy-first">
+    <meta name="twitter:image" content="https://www.bentopdf.com/images/twitter-digital-sign-pdf.png">
+    <meta name="twitter:site" content="@BentoPDF">
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Digital Sign PDF">
+
+    <link rel="alternate" hreflang="en" href="/en/digital-sign-pdf.html" />
+    <link rel="alternate" hreflang="de" href="/de/digital-sign-pdf.html" />
+    <link rel="alternate" hreflang="vi" href="/vi/digital-sign-pdf.html" />
+    <link rel="alternate" hreflang="x-default" href="/en/digital-sign-pdf.html" />
+    <link href="/src/css/styles.css" rel="stylesheet" />
+
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/images/favicon-512x512.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+</head>
+
+<body class="antialiased bg-gray-900">
+    <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
+        <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <span class="text-white font-bold text-xl ml-2">
+                        <a href="/">BentoPDF</a>
+                    </span>
+                </div>
+
+                <div class="hidden md:flex items-center space-x-8 text-white">
+                    <a href="/" class="nav-link" data-i18n="nav.home">Home</a>
+                    <a href="/about.html" class="nav-link">About</a>
+                    <a href="/contact.html" class="nav-link">Contact</a>
+                    <a href="/" class="nav-link" data-i18n="nav.allTools">All Tools</a>
+                </div>
+
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" type="button"
+                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 transition-colors"
+                        aria-controls="mobile-menu" aria-expanded="false">
+                        <span class="sr-only">Open main menu</span>
+                        <svg id="menu-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                        <svg id="close-icon" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div id="mobile-menu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
+            <div class="px-2 pt-2 pb-3 space-y-1 text-center">
+                <a href="/" class="mobile-nav-link" data-i18n="nav.home">Home</a>
+                <a href="/about.html" class="mobile-nav-link">About</a>
+                <a href="/contact.html" class="mobile-nav-link">Contact</a>
+                <a href="/" class="mobile-nav-link" data-i18n="nav.allTools">All Tools</a>
+            </div>
+        </div>
+    </nav>
+
+    <div id="uploader" class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900">
+        <div id="tool-uploader"
+            class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
+            <button id="back-to-tools"
+                class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold">
+                <i data-lucide="arrow-left" class="cursor-pointer"></i>
+                <span class="cursor-pointer" data-i18n="tools.backToTools"> Back to Tools </span>
+            </button>
+
+            <h1 class="text-2xl font-bold text-white mb-2" data-i18n="tools:digitalSignPdf.name">Digital Signature PDF
+            </h1>
+            <p class="text-gray-400 mb-6" data-i18n="tools:digitalSignPdf.subtitle">
+                Add a cryptographic digital signature to your PDF using X.509 certificates. Supports PKCS#12 (.pfx,
+                .p12) and PEM formats. Your private key never leaves your browser.
+            </p>
+
+            <div id="drop-zone"
+                class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
+                <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                    <i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
+                    <p class="mb-2 text-sm text-gray-400"><span class="font-semibold"
+                            data-i18n="upload.clickToSelect">Click to
+                            select a file</span> <span data-i18n="upload.orDragAndDrop">or drag and drop</span></p>
+                    <p class="text-xs text-gray-500">PDF Documents</p>
+                    <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">Your files never leave your
+                        device.</p>
+                </div>
+                <input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+                    accept="application/pdf">
+            </div>
+
+            <div id="file-display-area" class="mt-4 space-y-2"></div>
+
+            <div id="certificate-section" class="hidden mt-6 space-y-4">
+                <h2 class="text-lg font-semibold text-white">Certificate</h2>
+
+                <div id="cert-drop-zone"
+                    class="relative flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
+                    <div class="flex flex-col items-center justify-center py-4">
+                        <i data-lucide="key" class="w-8 h-8 mb-2 text-gray-400"></i>
+                        <p class="text-sm text-gray-400">Upload certificate (.pfx, .p12, .pem)</p>
+                    </div>
+                    <input id="cert-input" type="file"
+                        class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" accept=".pfx,.p12,.pem">
+                </div>
+
+                <div id="cert-display-area" class="space-y-2"></div>
+
+                <div id="cert-password-section" class="hidden">
+                    <label for="cert-password" class="block text-sm font-medium text-gray-300 mb-2">Certificate
+                        Password</label>
+                    <input type="password" id="cert-password"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="Enter certificate password">
+                </div>
+
+                <div id="cert-info" class="hidden bg-gray-700 rounded-lg p-4">
+                    <h3 class="text-sm font-semibold text-white mb-2">Certificate Information</h3>
+                    <div class="text-sm text-gray-300 space-y-1">
+                        <p><span class="text-gray-400">Subject:</span> <span id="cert-subject">-</span></p>
+                        <p><span class="text-gray-400">Issuer:</span> <span id="cert-issuer">-</span></p>
+                        <p><span class="text-gray-400">Valid:</span> <span id="cert-validity">-</span></p>
+                    </div>
+                </div>
+            </div>
+
+            <div id="signature-options" class="hidden mt-6 space-y-4">
+                <h2 class="text-lg font-semibold text-white">Signature Details (Optional)</h2>
+
+                <div>
+                    <label for="sign-reason" class="block text-sm font-medium text-gray-300 mb-2">Reason</label>
+                    <input type="text" id="sign-reason"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., I approve this document">
+                </div>
+
+                <div>
+                    <label for="sign-location" class="block text-sm font-medium text-gray-300 mb-2">Location</label>
+                    <input type="text" id="sign-location"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., New York, USA">
+                </div>
+
+                <div>
+                    <label for="sign-contact" class="block text-sm font-medium text-gray-300 mb-2">Contact Info</label>
+                    <input type="text" id="sign-contact"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                        placeholder="e.g., email@example.com">
+                </div>
+            </div>
+
+            <div id="visible-signature-section" class="hidden mt-6 space-y-4">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-lg font-semibold text-white">Visible Signature</h2>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" id="enable-visible-sig" class="sr-only peer">
+                        <div
+                            class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600">
+                        </div>
+                    </label>
+                </div>
+                <p class="text-xs text-gray-500">When enabled, a visible signature box appears on the PDF. You can
+                    upload an image/logo or add text. If neither is provided, the signer's name from the certificate
+                    will be shown automatically.</p>
+
+                <div id="visible-sig-options" class="hidden space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">Signature Image/Logo
+                            (Optional)</label>
+                        <div id="sig-image-drop-zone"
+                            class="relative flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
+                            <div class="flex flex-col items-center justify-center py-2">
+                                <i data-lucide="image" class="w-6 h-6 mb-1 text-gray-400"></i>
+                                <p class="text-xs text-gray-400">Upload image (PNG, JPG, WebP)</p>
+                            </div>
+                            <input id="sig-image-input" type="file"
+                                class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
+                                accept="image/png,image/jpeg,image/webp">
+                        </div>
+                        <div id="sig-image-preview" class="hidden mt-2 flex items-center gap-2">
+                            <img id="sig-image-thumb" class="h-12 w-auto rounded border border-gray-600"
+                                alt="Signature preview">
+                            <button id="remove-sig-image"
+                                class="text-red-400 hover:text-red-300 text-sm">Remove</button>
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="sig-page" class="block text-sm font-medium text-gray-300 mb-2">Page</label>
+                            <select id="sig-page"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                                <option value="0">First page</option>
+                                <option value="last">Last page</option>
+                                <option value="all">All pages</option>
+                                <option value="custom">Custom page #</option>
+                            </select>
+                        </div>
+                        <div id="custom-page-wrapper" class="hidden">
+                            <label for="sig-custom-page" class="block text-sm font-medium text-gray-300 mb-2">Page
+                                #</label>
+                            <input type="number" id="sig-custom-page" min="1" value="1"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="sig-x" class="block text-sm font-medium text-gray-300 mb-2">X Position
+                                (left)</label>
+                            <input type="number" id="sig-x" min="0" value="25"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label for="sig-y" class="block text-sm font-medium text-gray-300 mb-2">Y Position
+                                (top)</label>
+                            <input type="number" id="sig-y" min="0" value="700"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="sig-width" class="block text-sm font-medium text-gray-300 mb-2">Width</label>
+                            <input type="number" id="sig-width" min="20" value="150"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label for="sig-height" class="block text-sm font-medium text-gray-300 mb-2">Height</label>
+                            <input type="number" id="sig-height" min="20" value="50"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                        </div>
+                    </div>
+
+                    <div class="border-t border-gray-700 pt-4">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input type="checkbox" id="enable-sig-text"
+                                class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
+                            <span class="text-sm font-medium text-gray-300">Add text overlay</span>
+                        </label>
+                    </div>
+
+                    <div id="sig-text-options" class="hidden space-y-4">
+                        <div>
+                            <label for="sig-text" class="block text-sm font-medium text-gray-300 mb-2">Text</label>
+                            <input type="text" id="sig-text"
+                                class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                                placeholder="e.g., Digitally signed by John Doe">
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="sig-text-color" class="block text-sm font-medium text-gray-300 mb-2">Text
+                                    Color</label>
+                                <input type="color" id="sig-text-color" value="#000000"
+                                    class="w-full h-10 bg-gray-700 border border-gray-600 rounded-lg cursor-pointer">
+                            </div>
+                            <div>
+                                <label for="sig-text-size" class="block text-sm font-medium text-gray-300 mb-2">Font
+                                    Size</label>
+                                <input type="number" id="sig-text-size" min="6" max="72" value="12"
+                                    class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <button id="process-btn" class="btn-gradient w-full mt-6" style="display: none;">
+                Apply Digital Signature
+            </button>
+        </div>
+    </div>
+
+    <div id="loader-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+        <div class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl">
+            <div class="solid-spinner"></div>
+            <p id="loader-text" class="text-white text-lg font-medium">
+                Processing...
+            </p>
+        </div>
+    </div>
+
+    <div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700">
+            <h3 id="alert-title" class="text-xl font-bold text-white mb-2" data-i18n="alert.title">
+                Alert</h3>
+            <p id="alert-message" class="text-gray-300 mb-6"></p>
+            <button id="alert-ok"
+                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
+                OK
+            </button>
+        </div>
+    </div>
+
+    <section class="max-w-4xl mx-auto px-4 py-12">
+        <h2 class="text-2xl md:text-3xl font-bold text-white mb-8 text-center">How It Works</h2>
+        <div class="space-y-6">
+            <div class="flex items-start gap-4">
+                <div
+                    class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
+                    1
+                </div>
+                <div class="flex-1">
+                    <h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
+                    <p class="text-gray-400">Select the PDF document you want to sign</p>
+                </div>
+            </div>
+            <div class="flex items-start gap-4">
+                <div
+                    class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
+                    2
+                </div>
+                <div class="flex-1">
+                    <h3 class="text-lg font-semibold text-white mb-1">Upload Certificate</h3>
+                    <p class="text-gray-400">Provide your .pfx or .p12 certificate file and password</p>
+                </div>
+            </div>
+            <div class="flex items-start gap-4">
+                <div
+                    class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold">
+                    3
+                </div>
+                <div class="flex-1">
+                    <h3 class="text-lg font-semibold text-white mb-1">Sign & Download</h3>
+                    <p class="text-gray-400">Apply the digital signature and download your signed PDF</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="max-w-6xl mx-auto px-4 py-12">
+        <h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Related PDF Tools</h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+            <a href="/encrypt-pdf.html"
+                class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
+                <h3 class="text-white font-semibold mb-1">Encrypt PDF</h3>
+                <p class="text-gray-400 text-sm">Password protect your PDF</p>
+            </a>
+            <a href="/decrypt-pdf.html"
+                class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
+                <h3 class="text-white font-semibold mb-1">Decrypt PDF</h3>
+                <p class="text-gray-400 text-sm">Remove PDF password</p>
+            </a>
+            <a href="/flatten-pdf.html"
+                class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
+                <h3 class="text-white font-semibold mb-1">Flatten PDF</h3>
+                <p class="text-gray-400 text-sm">Make annotations permanent</p>
+            </a>
+            <a href="/sanitize-pdf.html"
+                class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
+                <h3 class="text-white font-semibold mb-1">Sanitize PDF</h3>
+                <p class="text-gray-400 text-sm">Remove hidden data</p>
+            </a>
+            <a href="/change-permissions.html"
+                class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700">
+                <h3 class="text-white font-semibold mb-1">Change Permissions</h3>
+                <p class="text-gray-400 text-sm">Set PDF permissions</p>
+            </a>
+        </div>
+    </section>
+
+    <section class="max-w-4xl mx-auto px-4 py-12">
+        <h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-center">Frequently Asked Questions</h2>
+        <div class="space-y-4">
+            <details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
+                <summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
+                    What is a digital signature?
+                    <i data-lucide="chevron-down" class="w-5 h-5"></i>
+                </summary>
+                <p class="mt-3 text-gray-400">A digital signature is a cryptographic mechanism that verifies the
+                    authenticity and integrity of a document. Unlike a drawn signature, it uses public key cryptography
+                    (X.509 certificates) to prove the signer's identity.</p>
+            </details>
+            <details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
+                <summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
+                    What certificate formats are supported?
+                    <i data-lucide="chevron-down" class="w-5 h-5"></i>
+                </summary>
+                <p class="mt-3 text-gray-400">We support PKCS#12 format certificates (.pfx, .p12) which contain both
+                    your certificate and private key in a single encrypted file. These are commonly issued by
+                    certificate authorities.</p>
+            </details>
+            <details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
+                <summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
+                    Is my private key safe?
+                    <i data-lucide="chevron-down" class="w-5 h-5"></i>
+                </summary>
+                <p class="mt-3 text-gray-400">Yes! All processing happens entirely in your browser. Your certificate,
+                    private key, and PDF files never leave your device or get uploaded to any server.</p>
+            </details>
+            <details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
+                <summary class="cursor-pointer font-semibold text-white flex items-center justify-between">
+                    Will the signature be valid in PDF readers?
+                    <i data-lucide="chevron-down" class="w-5 h-5"></i>
+                </summary>
+                <p class="mt-3 text-gray-400">Yes, the tool creates standard PKCS#7 detached signatures that are
+                    recognized by all major PDF viewers. For full validation, use a certificate
+                    from a trusted Certificate Authority.</p>
+            </details>
+        </div>
+    </section>
+
+    <footer class="mt-16 border-t-2 border-gray-700 py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
+                <div class="mb-8 md:mb-0">
+                    <div class="flex items-center justify-center md:justify-start mb-4">
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <span class="text-xl font-bold text-white">BentoPDF</span>
+                    </div>
+                    <p class="text-gray-400 text-sm">
+                        &copy; 2026 BentoPDF. All rights reserved.
+                    </p>
+                    <p class="text-gray-500 text-xs mt-2">
+                        Version <span id="app-version"></span>
+                    </p>
+                </div>
+
+                <div>
+                    <h3 class="font-bold text-white mb-4">Company</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="/about.html" class="hover:text-indigo-400">About Us</a></li>
+                        <li><a href="/faq.html" class="hover:text-indigo-400">FAQ</a></li>
+                        <li><a href="/contact.html" class="hover:text-indigo-400">Contact Us</a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <h3 class="font-bold text-white mb-4">Legal</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="/licensing.html" class="hover:text-indigo-400">Licensing</a></li>
+                        <li><a href="/terms.html" class="hover:text-indigo-400">Terms and Conditions</a></li>
+                        <li><a href="/privacy.html" class="hover:text-indigo-400">Privacy Policy</a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <h3 class="font-bold text-white mb-4">Follow Us</h3>
+                    <div class="flex justify-center md:justify-start space-x-4">
+                        <a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener noreferrer"
+                            class="text-gray-400 hover:text-indigo-400" title="GitHub">
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                        <a href="https://discord.gg/Bgq3Ay3f2w" target="_blank" rel="noopener noreferrer"
+                            class="text-gray-400 hover:text-indigo-400" title="Discord">
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
+                            </svg>
+                        </a>
+                        <a href="https://www.instagram.com/thebentopdf/" class="text-gray-400 hover:text-indigo-400"
+                            title="Instagram">
+                            <i data-lucide="instagram"></i>
+                        </a>
+                        <a href="https://www.linkedin.com/company/bentopdf/" class="text-gray-400 hover:text-indigo-400"
+                            title="LinkedIn">
+                            <i data-lucide="linkedin"></i>
+                        </a>
+                        <a href="https://x.com/BentoPDF" class="text-gray-400 hover:text-indigo-400"
+                            title="X (Twitter)">
+                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script type="module" src="/src/js/utils/lucide-init.ts"></script>
+    <script type="module" src="/src/js/utils/full-width.ts"></script>
+    <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
+    <script type="module" src="/src/version.ts"></script>
+    <script type="module" src="/src/js/logic/digital-sign-pdf-page.ts"></script>
+    <script type="module" src="/src/js/mobileMenu.ts"></script>
+    <script type="module" src="/src/js/main.ts"></script>
+
+    <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "Digital Signature PDF - BentoPDF",
+    "applicationCategory": "PDF Tool",
+    "operatingSystem": "Any - Web Browser",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "aggregateRating": {
+      "@type": "AggregateRating",
+      "ratingValue": "4.9",
+      "ratingCount": "2150"
+    }
+  }
+  </script>
+
+    <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    "name": "How to add digital signature to PDF",
+    "description": "Learn how to add a cryptographic digital signature to PDF using BentoPDF",
+    "step": [
+      {
+        "@type": "HowToStep",
+        "position": 1,
+        "name": "Upload PDF",
+        "text": "Select the PDF document you want to sign"
+      },
+      {
+        "@type": "HowToStep",
+        "position": 2,
+        "name": "Upload Certificate",
+        "text": "Provide your .pfx or .p12 certificate file and password"
+      },
+      {
+        "@type": "HowToStep",
+        "position": 3,
+        "name": "Sign & Download",
+        "text": "Apply the digital signature and download your signed PDF"
+      }
+    ]
+  }
+  </script>
+
+    <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://www.bentopdf.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Digital Signature PDF",
+        "item": "https://www.bentopdf.com/digital-sign-pdf"
+      }
+    ]
+  }
+  </script>
+</body>
+
+</html>
--- a/src/pages/divide-pages.html
+++ b/src/pages/divide-pages.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -300,7 +300,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/edit-attachments.html
+++ b/src/pages/edit-attachments.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -274,7 +274,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/edit-metadata.html
+++ b/src/pages/edit-metadata.html
@@ -72,7 +72,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -333,7 +333,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/edit-pdf.html
+++ b/src/pages/edit-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -274,7 +274,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/encrypt-pdf.html
+++ b/src/pages/encrypt-pdf.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -296,7 +296,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/epub-to-pdf.html
+++ b/src/pages/epub-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -285,7 +285,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/excel-to-pdf.html
+++ b/src/pages/excel-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -287,7 +287,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/extract-attachments.html
+++ b/src/pages/extract-attachments.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -270,7 +270,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/extract-images.html
+++ b/src/pages/extract-images.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -290,7 +290,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/extract-pages.html
+++ b/src/pages/extract-pages.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/extract-tables.html
+++ b/src/pages/extract-tables.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -286,7 +286,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/fb2-to-pdf.html
+++ b/src/pages/fb2-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -283,7 +283,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/fix-page-size.html
+++ b/src/pages/fix-page-size.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -355,7 +355,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/flatten-pdf.html
+++ b/src/pages/flatten-pdf.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -290,7 +290,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/form-creator.html
+++ b/src/pages/form-creator.html
@@ -66,7 +66,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -480,7 +480,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">
--- a/src/pages/form-filler.html
+++ b/src/pages/form-filler.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -288,7 +288,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/header-footer.html
+++ b/src/pages/header-footer.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -340,7 +340,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/heic-to-pdf.html
+++ b/src/pages/heic-to-pdf.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -282,7 +282,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/image-to-pdf.html
+++ b/src/pages/image-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -288,7 +288,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/invert-colors.html
+++ b/src/pages/invert-colors.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -274,7 +274,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/jpg-to-pdf.html
+++ b/src/pages/jpg-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -302,7 +302,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/json-to-pdf.html
+++ b/src/pages/json-to-pdf.html
@@ -66,7 +66,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -263,7 +263,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/linearize-pdf.html
+++ b/src/pages/linearize-pdf.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -290,7 +290,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/markdown-to-pdf.html
+++ b/src/pages/markdown-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -237,7 +237,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/merge-pdf.html
+++ b/src/pages/merge-pdf.html
@@ -66,7 +66,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -332,7 +332,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/mobi-to-pdf.html
+++ b/src/pages/mobi-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -283,7 +283,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/n-up-pdf.html
+++ b/src/pages/n-up-pdf.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -334,7 +334,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/ocr-pdf.html
+++ b/src/pages/ocr-pdf.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -388,7 +388,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/odg-to-pdf.html
+++ b/src/pages/odg-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -295,7 +295,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/odp-to-pdf.html
+++ b/src/pages/odp-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -295,7 +295,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/ods-to-pdf.html
+++ b/src/pages/ods-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -295,7 +295,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/odt-to-pdf.html
+++ b/src/pages/odt-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/organize-pdf.html
+++ b/src/pages/organize-pdf.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -245,7 +245,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/page-dimensions.html
+++ b/src/pages/page-dimensions.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -294,7 +294,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/page-numbers.html
+++ b/src/pages/page-numbers.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -311,7 +311,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pages-to-pdf.html
+++ b/src/pages/pages-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -294,7 +294,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-booklet.html
+++ b/src/pages/pdf-booklet.html
@@ -69,7 +69,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -418,7 +418,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-layers.html
+++ b/src/pages/pdf-layers.html
@@ -184,7 +184,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -421,7 +421,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-multi-tool.html
+++ b/src/pages/pdf-multi-tool.html
@@ -94,7 +94,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
--- a/src/pages/pdf-to-bmp.html
+++ b/src/pages/pdf-to-bmp.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -273,7 +273,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-csv.html
+++ b/src/pages/pdf-to-csv.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -255,7 +255,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-to-docx.html
+++ b/src/pages/pdf-to-docx.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -282,7 +282,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-excel.html
+++ b/src/pages/pdf-to-excel.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -255,7 +255,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-to-greyscale.html
+++ b/src/pages/pdf-to-greyscale.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -274,7 +274,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-jpg.html
+++ b/src/pages/pdf-to-jpg.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -293,7 +293,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-json.html
+++ b/src/pages/pdf-to-json.html
@@ -67,7 +67,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -258,7 +258,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-markdown.html
+++ b/src/pages/pdf-to-markdown.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-to-pdfa.html
+++ b/src/pages/pdf-to-pdfa.html
@@ -66,7 +66,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -292,7 +292,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-png.html
+++ b/src/pages/pdf-to-png.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -282,7 +282,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-svg.html
+++ b/src/pages/pdf-to-svg.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -284,7 +284,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-text.html
+++ b/src/pages/pdf-to-text.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -292,7 +292,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-to-tiff.html
+++ b/src/pages/pdf-to-tiff.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2"><a href="/">BentoPDF</a></span>
        </div>
        <div class="hidden md:flex items-center space-x-8 text-white">
@@ -256,7 +256,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pdf-to-webp.html
+++ b/src/pages/pdf-to-webp.html
@@ -69,7 +69,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -282,7 +282,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/pdf-to-zip.html
+++ b/src/pages/pdf-to-zip.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -277,7 +277,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/png-to-pdf.html
+++ b/src/pages/png-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -302,7 +302,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/posterize-pdf.html
+++ b/src/pages/posterize-pdf.html
@@ -68,7 +68,7 @@
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-                    <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+                    <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
                    <span class="text-white font-bold text-xl ml-2">
                        <a href="/">BentoPDF</a>
                    </span>
@@ -398,7 +398,7 @@
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start mb-4">
-                        <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+                        <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
                        <span class="text-xl font-bold text-white">BentoPDF</span>
                    </div>
                    <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/powerpoint-to-pdf.html
+++ b/src/pages/powerpoint-to-pdf.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -287,7 +287,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/prepare-pdf-for-ai.html
+++ b/src/pages/prepare-pdf-for-ai.html
@@ -66,7 +66,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -291,7 +291,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/psd-to-pdf.html
+++ b/src/pages/psd-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -277,7 +277,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/pub-to-pdf.html
+++ b/src/pages/pub-to-pdf.html
@@ -71,7 +71,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -287,7 +287,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/rasterize-pdf.html
+++ b/src/pages/rasterize-pdf.html
@@ -66,7 +66,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -309,7 +309,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">
--- a/src/pages/remove-annotations.html
+++ b/src/pages/remove-annotations.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -274,7 +274,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/remove-blank-pages.html
+++ b/src/pages/remove-blank-pages.html
@@ -70,7 +70,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -291,7 +291,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/remove-metadata.html
+++ b/src/pages/remove-metadata.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -279,7 +279,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/src/pages/remove-restrictions.html
+++ b/src/pages/remove-restrictions.html
@@ -68,7 +68,7 @@
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex-shrink-0 flex items-center cursor-pointer" id="home-logo">
-          <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8" />
+          <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-8 w-8" />
          <span class="text-white font-bold text-xl ml-2">
            <a href="/">BentoPDF</a>
          </span>
@@ -288,7 +288,7 @@
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left">
        <div class="mb-8 md:mb-0">
          <div class="flex items-center justify-center md:justify-start mb-4">
-            <img src="/images/favicon.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
+            <img src="/images/favicon-no-bg.svg" alt="Bento PDF Logo" class="h-10 w-10 mr-3" />
            <span class="text-xl font-bold text-white">BentoPDF</span>
          </div>
          <p class="text-gray-400 text-sm">&copy; 2026 BentoPDF. All rights reserved.</p>
--- a/Show More
+++ b/Show More