From c5764e417238653751b9e0d89e3c1e140c9ce5ea Mon Sep 17 00:00:00 2001
From: abdullahalam123 <adullah.alam.tapadar2000@gmail.com>
Date: Mon, 1 Dec 2025 12:44:34 +0530
Subject: [PATCH] feat(favicon,repair-pdf): Add favicon support and implement
 PDF repair tool

- Add favicon.ico to public directory for browser tab display
- Update favicon references across all HTML pages with proper link tags for SVG, PNG, and ICO formats
- Add Apple touch icon support for iOS devices
- Create new repair-pdf.ts logic module for PDF repair functionality
- Create new repair-pdf-page.ts utility module for page-level repair operations
- Add repair-pdf.html page with UI for PDF repair tool
- Register repair PDF tool in tools configuration and PDF tools registry
- Update UI rendering utilities to support new repair tool
- Improve favicon handling with multiple format fallbacks for cross-browser compatibility
- Standardize favicon paths to use absolute URLs for consistency
- Clean up whitespace and formatting in licensing.html for code consistency
---
 about.html                       |   5 +-
 contact.html                     |   5 +-
 faq.html                         |   5 +-
 index.html                       |   5 +-
 licensing.html                   |  20 +-
 privacy.html                     |   5 +-
 public/favicon.ico               | Bin 0 -> 113875 bytes
 public/images/favicon.png        | Bin 2771 -> 4505 bytes
 public/images/favicon.svg        |   4 +-
 src/css/styles.css               |   3 -
 src/js/config/pdf-tools.ts       |   1 +
 src/js/config/tools.ts           |   6 +
 src/js/logic/bookmark-pdf.ts     | 549 +++++++++++--------------------
 src/js/logic/cropper.ts          |   6 +-
 src/js/logic/index.ts            |   2 +
 src/js/logic/merge.ts            |   2 +-
 src/js/logic/pdf-multi-tool.ts   |  26 +-
 src/js/logic/repair-pdf-page.ts  |  92 ++++++
 src/js/logic/repair-pdf.ts       | 128 +++++++
 src/js/logic/reverse-pages.ts    |   2 +-
 src/js/ui.ts                     |  20 +-
 src/js/utils/render-utils.ts     |   6 +-
 src/pages/add-stamps.html        |   5 +-
 src/pages/bookmark.html          |  14 +-
 src/pages/form-creator.html      |   5 +-
 src/pages/json-to-pdf.html       |   5 +-
 src/pages/pdf-multi-tool.html    |   5 +-
 src/pages/pdf-to-json.html       |   5 +-
 src/pages/repair-pdf.html        | 221 +++++++++++++
 src/pages/table-of-contents.html |   5 +-
 terms.html                       |   5 +-
 vite.config.ts                   |   1 +
 32 files changed, 759 insertions(+), 404 deletions(-)
 create mode 100644 public/favicon.ico
 create mode 100644 src/js/logic/repair-pdf-page.ts
 create mode 100644 src/js/logic/repair-pdf.ts
 create mode 100644 src/pages/repair-pdf.html

diff --git a/about.html b/about.html
index 7eeaf15..3aca48d 100644
--- a/about.html
+++ b/about.html
@@ -13,7 +13,10 @@
     <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" />
+          <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+          <link rel="icon" type="image/png" href="/images/favicon.png" />
+          <link rel="apple-touch-icon" href="/images/favicon.png" />
+          <link rel="icon" href="/favicon.ico" sizes="any" />
           <span class="text-white font-bold text-xl ml-2">
             <a href="index.html">BentoPDF</a>
           </span>
diff --git a/contact.html b/contact.html
index 40b4b05..3d05fc1 100644
--- a/contact.html
+++ b/contact.html
@@ -13,7 +13,10 @@
     <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" />
+          <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+          <link rel="icon" type="image/png" href="/images/favicon.png" />
+          <link rel="apple-touch-icon" href="/images/favicon.png" />
+          <link rel="icon" href="/favicon.ico" sizes="any" />
           <span class="text-white font-bold text-xl ml-2">
             <a href="index.html">BentoPDF</a>
           </span>
diff --git a/faq.html b/faq.html
index 05813e4..15750c5 100644
--- a/faq.html
+++ b/faq.html
@@ -13,7 +13,10 @@
     <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" />
+          <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+          <link rel="icon" type="image/png" href="/images/favicon.png" />
+          <link rel="apple-touch-icon" href="/images/favicon.png" />
+          <link rel="icon" href="/favicon.ico" sizes="any" />
           <span class="text-white font-bold text-xl ml-2">
             <a href="index.html">BentoPDF</a>
           </span>
diff --git a/index.html b/index.html
index 70bb536..f63bbc8 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>BentoPDF - The Privacy First PDF Toolkit</title>
-  <link rel="icon" type="image/png" href="./images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="/src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/licensing.html b/licensing.html
index be1bf22..c74ebce 100644
--- a/licensing.html
+++ b/licensing.html
@@ -13,7 +13,10 @@
         <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" />
+                    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+                    <link rel="icon" type="image/png" href="/images/favicon.png" />
+                    <link rel="apple-touch-icon" href="/images/favicon.png" />
+                    <link rel="icon" href="/favicon.ico" sizes="any" />
                     <span class="text-white font-bold text-xl ml-2">
                         <a href="index.html">BentoPDF</a>
                     </span>
@@ -192,7 +195,8 @@
                     <div
                         class="mt-8 bg-gradient-to-r from-indigo-900/40 to-purple-900/40 rounded-lg p-6 border border-indigo-500/50">
                         <div class="text-center">
-                            <div class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-3 animate-pulse">
+                            <div
+                                class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-3 animate-pulse">
                                 LIMITED TIME OFFER
                             </div>
                             <p class="text-white text-2xl font-bold mb-2">Lifetime License</p>
@@ -202,7 +206,7 @@
                                 <span class="text-lg font-normal text-gray-400">one-time</span>
                             </div>
                             <p class="text-gray-300 text-sm mb-4">Includes all feature updates forever</p>
-                            
+
                             <!-- Unlimited Usage Info -->
                             <div class="bg-indigo-900/30 rounded-lg p-4 mb-4 border border-indigo-500/30">
                                 <div class="flex items-start gap-3 text-left">
@@ -210,12 +214,18 @@
                                     <div>
                                         <h4 class="text-white font-semibold text-sm mb-2">Unlimited Usage</h4>
                                         <p class="text-gray-300 text-xs leading-relaxed">
-                                            The BentoPDF commercial license permits use on an <strong class="text-white">unrestricted, unlimited number of devices, servers, and user machines</strong> within your organization. There are <strong class="text-white">no per-user, per-machine, or per-seat limitations</strong>. Once you purchase the license, all your internal users may use BentoPDF through your browser-based system without requiring additional licenses.
+                                            The BentoPDF commercial license permits use on an <strong
+                                                class="text-white">unrestricted, unlimited number of devices, servers,
+                                                and user machines</strong> within your organization. There are <strong
+                                                class="text-white">no per-user, per-machine, or per-seat
+                                                limitations</strong>. Once you purchase the license, all your internal
+                                            users may use BentoPDF through your browser-based system without requiring
+                                            additional licenses.
                                         </p>
                                     </div>
                                 </div>
                             </div>
-                            
+
                             <a href="https://ko-fi.com/s/f32ca4cb75" target="_blank" rel="noopener noreferrer"
                                 class="inline-block px-8 py-3 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-colors shadow-lg hover:shadow-indigo-500/50 transform hover:scale-105 transition-all duration-200">
                                 Purchase Lifetime License
diff --git a/privacy.html b/privacy.html
index 7143771..1fa39fe 100644
--- a/privacy.html
+++ b/privacy.html
@@ -13,7 +13,10 @@
     <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" />
+          <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+          <link rel="icon" type="image/png" href="/images/favicon.png" />
+          <link rel="apple-touch-icon" href="/images/favicon.png" />
+          <link rel="icon" href="/favicon.ico" sizes="any" />
           <span class="text-white font-bold text-xl ml-2">
             <a href="index.html">BentoPDF</a>
           </span>
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..fbb45f6833e985018d249e87458070622155f093
GIT binary patch
literal 113875
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
W3P1rU00p1`6o3Ly019-D0{;UVbH#fA

literal 0
HcmV?d00001

diff --git a/public/images/favicon.png b/public/images/favicon.png
index 1d0f3e956502892f7c5656c8a385c4377e2d82ca..a5fa7be9d336ec112ebe8b2cd2147f79331f5474 100644
GIT binary patch
literal 4505
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

literal 2771
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
Z{tsX^ZDdPS((3>K002ovPDHLkV1g4KN|68n

diff --git a/public/images/favicon.svg b/public/images/favicon.svg
index 81cc658..01d9df7 100644
--- a/public/images/favicon.svg
+++ b/public/images/favicon.svg
@@ -1,5 +1,7 @@
-<svg width="86" height="166" viewBox="0 0 86 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(40, 0)">
 <path d="M56.7848 80.9116L0 25.6211L24.8434 1.43151C26.8037 -0.47717 29.9814 -0.47717 31.9414 1.43151L85.177 53.2662L56.7848 80.9116Z" fill="#A5B4FC"/>
 <path d="M-1.30805e-05 80.7335L21.2939 101.467L42.5878 80.7335L21.2939 60L-1.30805e-05 80.7335Z" fill="#E0E7FF"/>
 <path d="M56.7848 83L81.6279 107.19C83.5881 109.098 83.5881 112.192 81.6279 114.101L28.3925 165.936L0 138.29L56.7848 83Z" fill="#6366F1"/>
+</g>
 </svg>
diff --git a/src/css/styles.css b/src/css/styles.css
index c40a2b0..baaf42b 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -291,9 +291,6 @@ footer a {
   box-shadow:
     0 10px 15px -3px rgba(79, 70, 229, 0.3),
     0 4px 6px -4px rgba(79, 70, 229, 0.3);
-  /* hover:shadow-xl hover:shadow-indigo-500/30 */
-  transform: translateY(-0.25rem);
-  /* hover:-translate-y-1 */
 }
 
 .btn-gradient:focus {
diff --git a/src/js/config/pdf-tools.ts b/src/js/config/pdf-tools.ts
index 27c568a..8fae854 100644
--- a/src/js/config/pdf-tools.ts
+++ b/src/js/config/pdf-tools.ts
@@ -69,4 +69,5 @@ export const multiFileTools = [
   'compress',
   'extract-attachments',
   'flatten',
+  'repair-pdf',
 ];
diff --git a/src/js/config/tools.ts b/src/js/config/tools.ts
index 346c951..35aef9a 100644
--- a/src/js/config/tools.ts
+++ b/src/js/config/tools.ts
@@ -468,6 +468,12 @@ export const categories = [
         subtitle:
           'Remove password protection and security restrictions associated with digitally signed PDF files.',
       },
+      {
+        href: '/src/pages/repair-pdf.html',
+        name: 'Repair PDF',
+        icon: 'wrench',
+        subtitle: 'Recover data from corrupted or damaged PDF files.',
+      },
     ],
   },
   {
diff --git a/src/js/logic/bookmark-pdf.ts b/src/js/logic/bookmark-pdf.ts
index 186f580..2347f46 100644
--- a/src/js/logic/bookmark-pdf.ts
+++ b/src/js/logic/bookmark-pdf.ts
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // TODO: @ALAM - remove ts-nocheck and fix types later, possibly convert this into an npm package
 
-import { PDFDocument, PDFName, PDFString, PDFNumber, PDFArray } from 'pdf-lib';
+import { PDFDocument, PDFName, PDFString, PDFNumber, PDFArray, PDFHexString } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import Sortable from 'sortablejs';
 import { createIcons, icons } from 'lucide';
@@ -37,19 +37,19 @@ function showInputModal(title, fields = [], defaultValues = {}) {
       .map((field) => {
         if (field.type === 'text') {
           return `
-                            <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
-                                <input type="text" id="modal-${field.name}" value="${escapeHTML(defaultValues[field.name] || '')}" 
-                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg" 
-                                    placeholder="${field.placeholder || ''}" />
-                            </div>
-                        `;
+  <div class="mb-4">
+    <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
+      <input type="text" id="modal-${field.name}" value="${escapeHTML(defaultValues[field.name] || '')}"
+class="w-full px-3 py-2 border border-gray-300 rounded-lg"
+placeholder="${field.placeholder || ''}" />
+  </div>
+    `;
         } else if (field.type === 'select') {
           return `
-                            <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
-                                <select id="modal-${field.name}" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
-                                    ${field.options
+  <div class="mb-4">
+    <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
+      <select id="modal-${field.name}" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
+        ${field.options
               .map(
                 (opt) => `
                                         <option value="${opt.value}" ${defaultValues[field.name] === opt.value ? 'selected' : ''}>
@@ -57,91 +57,92 @@ function showInputModal(title, fields = [], defaultValues = {}) {
                                         </option>
                                     `
               )
-              .join('')}
-                                </select>
+              .join('')
+            }
+</select>
                                 ${field.name === 'color' ? '<input type="color" id="modal-color-picker" class="hidden w-full h-10 mt-2 rounded cursor-pointer border border-gray-300" value="#000000" />' : ''}
-                            </div>
-                        `;
+</div>
+  `;
         } else if (field.type === 'destination') {
           const hasDestination =
             defaultValues.destX !== null && defaultValues.destX !== undefined;
           return `
-                            <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
-                                <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 space-y-2">
-                                    <div class="flex items-center gap-2">
-                                        <label class="flex items-center gap-1 text-xs">
-                                            <input type="checkbox" id="modal-use-destination" class="w-4 h-4" ${hasDestination ? 'checked' : ''}>
-                                            <span>Set custom destination</span>
-                                        </label>
-                                    </div>
-                                    <div id="destination-controls" class="${hasDestination ? '' : 'hidden'} space-y-2">
-                                        <div class="grid grid-cols-2 gap-2">
-                                            <div>
-                                                <label class="text-xs text-gray-600">Page</label>
-                                                <input type="number" id="modal-dest-page" min="1" max="${field.maxPages || 1}" value="${defaultValues.destPage || field.page || 1}" 
-                                                    class="w-full px-2 py-1 border border-gray-300 rounded text-sm" step="1" />
-                                            </div>
-                                            <div>
-                                                <label class="text-xs text-gray-600">Zoom (%)</label>
-                                                <select id="modal-dest-zoom" class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
-                                                    <option value="">Inherit</option>
-                                                    <option value="0">Fit Page</option>
-                                                    <option value="50">50%</option>
-                                                    <option value="75">75%</option>
-                                                    <option value="100">100%</option>
-                                                    <option value="125">125%</option>
-                                                    <option value="150">150%</option>
-                                                    <option value="200">200%</option>
-                                                </select>
-                                            </div>
-                                        </div>
-                                        <div class="grid grid-cols-2 gap-2">
-                                            <div>
-                                                <label class="text-xs text-gray-600">X Position</label>
-                                                <input type="number" id="modal-dest-x" value="0" step="10"
-                                                    class="w-full px-2 py-1 border border-gray-300 rounded text-sm" />
-                                            </div>
-                                            <div>
-                                                <label class="text-xs text-gray-600">Y Position</label>
-                                                <input type="number" id="modal-dest-y" value="0" step="10"
-                                                    class="w-full px-2 py-1 border border-gray-300 rounded text-sm" />
-                                            </div>
-                                        </div>
-                                        <button id="modal-pick-destination" class="w-full px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center gap-1">
-                                            <i data-lucide="crosshair" class="w-3 h-3"></i> Click on PDF to Pick Location
-                                        </button>
-                                        <p class="text-xs text-gray-500 italic">Click the button above, then click on the PDF where you want the bookmark to jump to</p>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
+  <div class="mb-4">
+    <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
+      <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 space-y-2">
+        <div class="flex items-center gap-2">
+          <label class="flex items-center gap-1 text-xs">
+            <input type="checkbox" id="modal-use-destination" class="w-4 h-4" ${hasDestination ? 'checked' : ''}>
+              <span>Set custom destination </span>
+                </label>
+                </div>
+                <div id="destination-controls" class="${hasDestination ? '' : 'hidden'} space-y-2">
+                  <div class="grid grid-cols-2 gap-2">
+                    <div>
+                    <label class="text-xs text-gray-600">Page</label>
+                      <input type="number" id="modal-dest-page" min="1" max="${field.maxPages || 1}" value="${defaultValues.destPage || field.page || 1}"
+class="w-full px-2 py-1 border border-gray-300 rounded text-sm" step="1" />
+  </div>
+  <div>
+  <label class="text-xs text-gray-600">Zoom(%)</label>
+    <select id="modal-dest-zoom" class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
+      <option value="">Inherit</option>
+        <option value="0">Fit Page</option>
+          <option value="50">50%</option>
+            <option value="75">75%</option>
+              <option value="100">100%</option>
+                <option value="125">125%</option>
+                  <option value="150">150%</option>
+                    <option value="200">200%</option>
+                      </select>
+                      </div>
+                      </div>
+                      <div class="grid grid-cols-2 gap-2">
+                        <div>
+                        <label class="text-xs text-gray-600">X Position</label>
+                          <input type="number" id="modal-dest-x" value="0" step="10"
+class="w-full px-2 py-1 border border-gray-300 rounded text-sm" />
+  </div>
+  <div>
+  <label class="text-xs text-gray-600">Y Position</label>
+    <input type="number" id="modal-dest-y" value="0" step="10"
+class="w-full px-2 py-1 border border-gray-300 rounded text-sm" />
+  </div>
+  </div>
+  <button id="modal-pick-destination" class="w-full px-3 py-2 btn-gradient text-white rounded text-xs !flex items-center justify-center gap-1">
+    <i data-lucide="crosshair" class="w-3 h-3"></i> Click on PDF to Pick Location
+      </button>
+      <p class="text-xs text-gray-500 italic">Click the button above, then click on the PDF where you want the bookmark to jump to</p>
+        </div>
+        </div>
+        </div>
+          `;
         } else if (field.type === 'preview') {
           return `
-                            <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
-                                <div id="modal-preview" class="style-preview bg-gray-50">
-                                    <span id="preview-text" style="font-size: 16px;">Preview Text</span>
-                                </div>
-                            </div>
-                        `;
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-gray-700 mb-2">${field.label}</label>
+            <div id="modal-preview" class="style-preview bg-gray-50">
+              <span id="preview-text" style="font-size: 16px;">Preview Text</span>
+                </div>
+                </div>
+                  `;
         }
         return '';
       })
       .join('');
 
     modal.innerHTML = `
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold text-gray-800 mb-4">${title}</h3>
-                        <div class="mb-6">
-                            ${fieldsHTML}
-                        </div>
-                        <div class="flex gap-2 justify-end">
-                            <button id="modal-cancel" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
-                            <button id="modal-confirm" class="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white">Confirm</button>
-                        </div>
-                    </div>
-                `;
+                <div class="p-6">
+                  <h3 class="text-xl font-bold text-gray-800 mb-4">${title}</h3>
+                    <div class="mb-6">
+                      ${fieldsHTML}
+</div>
+  <div class="flex gap-2 justify-end">
+    <button id="modal-cancel" class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300">Cancel</button>
+      <button id="modal-confirm" class="px-4 py-2 rounded btn-gradient text-white">Confirm</button>
+        </div>
+        </div>
+          `;
 
     overlay.appendChild(modal);
     modalContainer.appendChild(overlay);
@@ -476,7 +477,7 @@ document.addEventListener('DOMContentLoaded', () => {
       canvasWrapper.appendChild(coordTooltip);
     }
 
-    coordTooltip.textContent = `X: ${Math.round(x)}, Y: ${Math.round(y)}`;
+    coordTooltip.textContent = `X: ${Math.round(x)}, Y: ${Math.round(y)} `;
     coordTooltip.style.left = e.clientX - rect.left + 15 + 'px';
     coordTooltip.style.top = e.clientY - rect.top + 15 + 'px';
   });
@@ -525,12 +526,12 @@ document.addEventListener('DOMContentLoaded', () => {
     destinationMarker = document.createElement('div');
     destinationMarker.className = 'destination-marker';
     destinationMarker.innerHTML = `
-                    <svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">
-                        <circle cx="12" cy="12" r="10" fill="#3b82f6" fill-opacity="0.2"/>
-                        <path d="M12 2 L12 22 M2 12 L22 12"/>
-                        <circle cx="12" cy="12" r="2" fill="#3b82f6"/>
-                    </svg>
-                `;
+  <svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2">
+    <circle cx="12" cy="12" r="10" fill="#3b82f6" fill-opacity="0.2" />
+      <path d="M12 2 L12 22 M2 12 L22 12" />
+        <circle cx="12" cy="12" r="2" fill="#3b82f6" />
+          </svg>
+            `;
     const canvasRect = canvas.getBoundingClientRect();
     const wrapperRect = canvasWrapper.getBoundingClientRect();
     destinationMarker.style.position = 'absolute';
@@ -549,7 +550,7 @@ document.addEventListener('DOMContentLoaded', () => {
       canvasX + canvasRect.left - wrapperRect.left + 20 + 'px';
     coordDisplay.style.top =
       canvasY + canvasRect.top - wrapperRect.top - 30 + 'px';
-    coordDisplay.textContent = `X: ${Math.round(pdfX)}, Y: ${Math.round(pdfY)}`;
+    coordDisplay.textContent = `X: ${Math.round(pdfX)}, Y: ${Math.round(pdfY)} `;
     canvasWrapper.appendChild(coordDisplay);
 
     // Call callback with PDF coordinates
@@ -577,14 +578,14 @@ function showConfirmModal(message) {
     modal.className = 'modal-content';
 
     modal.innerHTML = `
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold text-gray-800 mb-4">Confirm Action</h3>
-                        <p class="text-gray-600 mb-6">${message}</p>
-                        <div class="flex gap-2 justify-end">
-                            <button id="modal-cancel" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
-                            <button id="modal-confirm" class="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white">Confirm</button>
-                        </div>
-                    </div>
+  <div class="p-6">
+    <h3 class="text-xl font-bold text-gray-800 mb-4">Confirm Action</h3>
+      <p class="text-gray-600 mb-6">${message}</p>
+        <div class="flex gap-2 justify-end">
+          <button id="modal-cancel" class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300">Cancel</button>
+            <button id="modal-confirm" class="px-4 py-2 rounded btn-gradient text-white">Confirm</button>
+              </div>
+              </div>
                 `;
 
     overlay.appendChild(modal);
@@ -618,14 +619,14 @@ function showAlertModal(title, message) {
     modal.className = 'modal-content';
 
     modal.innerHTML = `
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold text-gray-800 mb-4">${title}</h3>
-                        <p class="text-gray-600 mb-6">${message}</p>
-                        <div class="flex justify-end">
-                            <button id="modal-ok" class="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white">OK</button>
+              <div class="p-6">
+                <h3 class="text-xl font-bold text-gray-800 mb-4">${title}</h3>
+                  <p class="text-gray-600 mb-6">${message}</p>
+                    <div class="flex justify-end">
+                      <button id="modal-ok" class="px-4 py-2 rounded btn-gradient text-white">OK</button>
                         </div>
-                    </div>
-                `;
+                        </div>
+                          `;
 
     overlay.appendChild(modal);
     modalContainer.appendChild(overlay);
@@ -832,7 +833,7 @@ deleteAllBtn.addEventListener('click', async () => {
   }
 
   const confirmed = await showConfirmModal(
-    `Delete all ${bookmarkTree.length} bookmark(s)?`
+    `Delete all ${bookmarkTree.length} bookmark(s) ? `
   );
   if (confirmed) {
     bookmarkTree = [];
@@ -949,7 +950,7 @@ batchDeleteBtn.addEventListener('click', async () => {
   if (selectedBookmarks.size === 0) return;
 
   const confirmed = await showConfirmModal(
-    `Delete ${selectedBookmarks.size} bookmark(s)?`
+    `Delete ${selectedBookmarks.size} bookmark(s) ? `
   );
   if (!confirmed) return;
 
@@ -1173,7 +1174,7 @@ async function renderPage(num, zoom = null, destX = null, destY = null) {
     ctx.stroke();
 
     // Draw coordinate text background
-    const text = `X: ${Math.round(destX)}, Y: ${Math.round(destY)}`;
+    const text = `X: ${Math.round(destX)}, Y: ${Math.round(destY)} `;
     ctx.font = 'bold 12px monospace';
     const textMetrics = ctx.measureText(text);
     const textWidth = textMetrics.width;
@@ -1532,7 +1533,7 @@ function createNodeElement(node, level = 0) {
     if (result && result.title) {
       node.children.push({
         id: Date.now() + Math.random(),
-        title: result.title,
+        title: cleanTitle(result.title),
         page: currentPage,
         children: [],
         color: null,
@@ -1608,7 +1609,7 @@ function createNodeElement(node, level = 0) {
     );
 
     if (result) {
-      node.title = result.title;
+      node.title = cleanTitle(result.title);
       node.color = result.color || null;
       node.style = result.style || null;
 
@@ -1756,7 +1757,7 @@ function parseCSV(text) {
     const [, title, page, level] = match;
     const bookmark = {
       id: Date.now() + Math.random(),
-      title: title.replace(/""/g, '"'),
+      title: cleanTitle(title.replace(/""/g, '"')),
       page: parseInt(page),
       children: [],
       color: null,
@@ -1787,6 +1788,15 @@ jsonImportHidden.addEventListener('change', async (e) => {
   const text = await file.text();
   try {
     const imported = JSON.parse(text);
+    // Recursively clean titles in imported JSON
+    function cleanImportedTree(nodes) {
+      if (!nodes) return;
+      for (const node of nodes) {
+        if (node.title) node.title = cleanTitle(node.title);
+        if (node.children) cleanImportedTree(node.children);
+      }
+    }
+    cleanImportedTree(imported);
     bookmarkTree = imported;
     saveState();
     renderBookmarkTree();
@@ -1834,254 +1844,84 @@ extractExistingBtn.addEventListener('click', async () => {
   }
 });
 
+// function cleanTitle(title) {
+//   // @TODO@ALAM: visit this for encoding issues later
+//   if (typeof title === 'string') {
+//     if (title.includes('€') && !title.includes(' ')) {
+//       return title.replace(/€/g, ' ');
+//     }
+//     return title.replace(/[\x00-\x1F\x7F-\x9F]/g, '').trim();
+//   }
+//   return title;
+// }
+
+function cleanTitle(title) {
+  // @TODO@ALAM: check for other encoding issues
+  if (typeof title === 'string') {
+    return title.replace(/[\x00-\x1F\x7F-\x9F]/g, '').trim();
+  }
+  return title;
+}
+
 async function extractExistingBookmarks(doc) {
   try {
-    const outlines = doc.catalog.lookup(PDFName.of('Outlines'));
-    if (!outlines) return [];
-
-    const pages = doc.getPages();
-
-    // Helper to resolve references
-    function resolveRef(obj) {
-      if (!obj) return null;
-      if (obj.lookup) return obj;
-      if (obj.objectNumber !== undefined && doc.context) {
-        return doc.context.lookup(obj);
-      }
-      return obj;
-    }
-
-    // Build named destinations map (support full name-tree with Kids and Catalog-level Dests)
-    const namedDests = new Map();
-    try {
-      function addNamePair(nameObj, destObj) {
-        try {
-          const key = nameObj.decodeText
-            ? nameObj.decodeText()
-            : String(nameObj);
-          namedDests.set(key, resolveRef(destObj));
-        } catch (_) {
-          // ignore malformed entry
-        }
-      }
-
-      function traverseNamesNode(node) {
-        if (!node) return;
-        node = resolveRef(node);
-        if (!node) return;
-
-        const namesArray = node.lookup
-          ? node.lookup(PDFName.of('Names'))
-          : null;
-        if (namesArray && namesArray.array) {
-          for (let i = 0; i < namesArray.array.length; i += 2) {
-            const n = namesArray.array[i];
-            const d = namesArray.array[i + 1];
-            addNamePair(n, d);
-          }
-        }
-
-        const kidsArray = node.lookup ? node.lookup(PDFName.of('Kids')) : null;
-        if (kidsArray && kidsArray.array) {
-          for (const kid of kidsArray.array) traverseNamesNode(kid);
-        }
-      }
-
-      // Names tree under Catalog/Names/Dests
-      const names = doc.catalog.lookup(PDFName.of('Names'));
-      if (names) {
-        const destsTree = names.lookup(PDFName.of('Dests'));
-        if (destsTree) traverseNamesNode(destsTree);
-      }
-
-      // Some PDFs store Dests directly under the Catalog's Dests as a dictionary
-      const catalogDests = doc.catalog.lookup(PDFName.of('Dests'));
-      if (catalogDests && catalogDests.dict) {
-        const entries = catalogDests.dict.entries();
-        for (const [key, value] of entries) {
-          // keys are PDFName; convert to string
-          const keyStr = key.decodeText ? key.decodeText() : key.toString();
-          namedDests.set(keyStr, resolveRef(value));
-        }
-      }
-    } catch (e) {
-      console.error('Error building named destinations:', e);
-    }
-
-    function findPageIndex(pageRef, resolvedPageRef = null) {
-      if (!pageRef) return 0;
-
-      try {
-        // Method 1: Try the resolved page ref first (if provided)
-        if (resolvedPageRef) {
-          // Check if resolved is a page dictionary - compare to each page's dictionary
-          for (let i = 0; i < pages.length; i++) {
-            const pageDict = doc.context.lookup(pages[i].ref);
-            if (pageDict === resolvedPageRef) {
-              return i;
-            }
-          }
-        }
-
-        // Method 2: Direct PDFRef comparison
-        const directMatch = pages.findIndex((p) => p.ref === pageRef);
-        if (directMatch !== -1) {
-          return directMatch;
-        }
-
-        // Method 3: Try resolving if not already resolved
-        if (!resolvedPageRef) {
-          const resolved = resolveRef(pageRef);
-          if (resolved) {
-            // Check if the resolved object matches any page's dictionary
-            for (let i = 0; i < pages.length; i++) {
-              const pageDict = doc.context.lookup(pages[i].ref);
-              if (pageDict === resolved) {
-                return i;
-              }
-            }
-          }
-        }
-
-        // Method 4: Compare by string representation
-        if (pageRef.toString) {
-          const target = pageRef.toString();
-          const stringMatch = pages.findIndex(
-            (p) => p.ref && p.ref.toString() === target
-          );
-          if (stringMatch !== -1) {
-            return stringMatch;
-          }
-        }
-
-        // Method 5: Try numeric value (for edge cases)
-        if (pageRef.numberValue !== undefined) {
-          const numericIndex = pageRef.numberValue | 0;
-          if (numericIndex >= 0 && numericIndex < pages.length) {
-            return numericIndex;
-          }
-        }
-      } catch (e) {
-        console.error('Error finding page index:', e);
-      }
-
-      // If we couldn't find a match, return 0
-      return 0;
-    }
-
-    function getDestination(item) {
-      if (!item) return null;
-
-      // Try Dest entry first
-      let dest = item.lookup(PDFName.of('Dest'));
-
-      // If no Dest, try Action/D
-      if (!dest) {
-        const action = resolveRef(item.lookup(PDFName.of('A')));
-        if (action) {
-          dest = action.lookup(PDFName.of('D'));
-        }
-      }
-
-      // Handle named destinations
-      if (dest && !dest.array) {
-        try {
-          const name = dest.decodeText ? dest.decodeText() : dest.toString();
-          if (namedDests.has(name)) {
-            const namedDest = namedDests.get(name);
-
-            // Named destinations can be:
-            // 1. A direct array [pageRef, /XYZ, ...]
-            // 2. A dictionary with a 'D' entry containing the array
-            if (namedDest.array) {
-              dest = namedDest;
-            } else if (namedDest.lookup) {
-              // It's a dictionary - extract the 'D' entry
-              const destFromDict = namedDest.lookup(PDFName.of('D'));
-              if (destFromDict) {
-                dest = destFromDict;
-              } else {
-                dest = namedDest;
-              }
-            } else {
-              dest = namedDest;
-            }
-          } else if (dest.lookup) {
-            // Some named destinations resolve to a dictionary with 'D' entry
-            const maybeDict = resolveRef(dest);
-            const dictD =
-              maybeDict && maybeDict.lookup
-                ? maybeDict.lookup(PDFName.of('D'))
-                : null;
-            if (dictD) dest = resolveRef(dictD);
-          }
-        } catch (_) {
-          // leave dest as-is if it can't be decoded
-        }
-      }
-
-      // dest is typically an array like [pageRef, /XYZ, x, y, zoom]
-      // Resolving it would corrupt the array structure
-      return dest;
-    }
-
-    function traverse(item) {
-      if (!item) return null;
-      item = resolveRef(item);
-      if (!item) return null;
-
-      const title = item.lookup(PDFName.of('Title'));
-      const dest = getDestination(item);
-      const colorObj = item.lookup(PDFName.of('C'));
-      const flagsObj = item.lookup(PDFName.of('F'));
+    const outline = await pdfJsDoc.getOutline();
+    console.log(outline);
+    if (!outline) return [];
 
+    async function processOutlineItem(item) {
       let pageIndex = 0;
       let destX = null;
       let destY = null;
       let zoom = null;
 
-      if (dest && dest.array) {
-        const pageRef = dest.array[0];
-        const resolvedPageRef = resolveRef(pageRef);
-        pageIndex = findPageIndex(pageRef, resolvedPageRef);
+      try {
+        let dest = item.dest;
+        if (typeof dest === 'string') {
+          dest = await pdfJsDoc.getDestination(dest);
+        }
 
-        if (dest.array.length > 2) {
-          const xObj = resolveRef(dest.array[2]);
-          const yObj = resolveRef(dest.array[3]);
-          const zoomObj = resolveRef(dest.array[4]);
+        if (Array.isArray(dest)) {
+          const destRef = dest[0];
+          pageIndex = await pdfJsDoc.getPageIndex(destRef);
 
-          if (xObj && xObj.numberValue !== undefined) destX = xObj.numberValue;
-          if (yObj && yObj.numberValue !== undefined) destY = yObj.numberValue;
-          if (zoomObj && zoomObj.numberValue !== undefined) {
-            zoom = String(Math.round(zoomObj.numberValue * 100));
+          if (dest.length > 2) {
+            const x = dest[2];
+            const y = dest[3];
+            const z = dest[4];
+
+            if (typeof x === 'number') destX = x;
+            if (typeof y === 'number') destY = y;
+            if (typeof z === 'number') zoom = String(Math.round(z * 100));
           }
         }
+      } catch (e) {
+        console.warn('Error resolving destination:', e);
       }
 
-      // Rest of the color and style processing remains the same
       let color = null;
-      if (colorObj && colorObj.array) {
-        const [r, g, b] = colorObj.array;
-        if (r > 0.8 && g < 0.3 && b < 0.3) color = 'red';
-        else if (r < 0.3 && g < 0.3 && b > 0.8) color = 'blue';
-        else if (r < 0.3 && g > 0.8 && b < 0.3) color = 'green';
-        else if (r > 0.8 && g > 0.8 && b < 0.3) color = 'yellow';
-        else if (r > 0.5 && g < 0.5 && b > 0.5) color = 'purple';
+      if (item.color) {
+        const [r, g, b] = item.color;
+        const rN = r / 255;
+        const gN = g / 255;
+        const bN = b / 255;
+
+        if (rN > 0.8 && gN < 0.3 && bN < 0.3) color = 'red';
+        else if (rN < 0.3 && gN < 0.3 && bN > 0.8) color = 'blue';
+        else if (rN < 0.3 && gN > 0.8 && bN < 0.3) color = 'green';
+        else if (rN > 0.8 && gN > 0.8 && bN < 0.3) color = 'yellow';
+        else if (rN > 0.5 && gN < 0.5 && bN > 0.5) color = 'purple';
       }
 
+      // Map style
       let style = null;
-      if (flagsObj) {
-        const flags = flagsObj.numberValue || 0;
-        const isBold = (flags & 2) !== 0;
-        const isItalic = (flags & 1) !== 0;
-        if (isBold && isItalic) style = 'bold-italic';
-        else if (isBold) style = 'bold';
-        else if (isItalic) style = 'italic';
-      }
+      if (item.bold && item.italic) style = 'bold-italic';
+      else if (item.bold) style = 'bold';
+      else if (item.italic) style = 'italic';
 
       const bookmark = {
         id: Date.now() + Math.random(),
-        title: title ? title.decodeText() : 'Untitled',
+        title: cleanTitle(item.title),
         page: pageIndex + 1,
         children: [],
         color,
@@ -2091,21 +1931,10 @@ async function extractExistingBookmarks(doc) {
         zoom,
       };
 
-      // Process children (make sure to resolve refs)
-      let child = resolveRef(item.lookup(PDFName.of('First')));
-      while (child) {
-        const childBookmark = traverse(child);
-        if (childBookmark) bookmark.children.push(childBookmark);
-        child = resolveRef(child.lookup(PDFName.of('Next')));
-      }
-
-      if (pageIndex === 0 && bookmark.children.length > 0) {
-        const firstChild = bookmark.children[0];
-        if (firstChild) {
-          bookmark.page = firstChild.page;
-          bookmark.destX = firstChild.destX;
-          bookmark.destY = firstChild.destY;
-          bookmark.zoom = firstChild.zoom;
+      if (item.items && item.items.length > 0) {
+        for (const childItem of item.items) {
+          const childBookmark = await processOutlineItem(childItem);
+          bookmark.children.push(childBookmark);
         }
       }
 
@@ -2113,11 +1942,9 @@ async function extractExistingBookmarks(doc) {
     }
 
     const result = [];
-    let first = resolveRef(outlines.lookup(PDFName.of('First')));
-    while (first) {
-      const bookmark = traverse(first);
-      if (bookmark) result.push(bookmark);
-      first = resolveRef(first.lookup(PDFName.of('Next')));
+    for (const item of outline) {
+      const bookmark = await processOutlineItem(item);
+      result.push(bookmark);
     }
 
     return result;
@@ -2153,7 +1980,7 @@ downloadBtn.addEventListener('click', async () => {
       const itemDict = pdfLibDoc.context.obj({});
       const itemRef = pdfLibDoc.context.register(itemDict);
 
-      itemDict.set(PDFName.of('Title'), PDFString.of(node.title));
+      itemDict.set(PDFName.of('Title'), PDFHexString.fromText(node.title));
       itemDict.set(PDFName.of('Parent'), parentRef);
 
       // Always map bookmark page to zero-based index consistently
diff --git a/src/js/logic/cropper.ts b/src/js/logic/cropper.ts
index f8d5661..e10f2ca 100644
--- a/src/js/logic/cropper.ts
+++ b/src/js/logic/cropper.ts
@@ -180,7 +180,8 @@ async function performFlatteningCrop(cropData: any) {
 
   // Load the original PDF with pdf-lib to copy un-cropped pages from
   const sourcePdfDocForCopying = await PDFLibDocument.load(
-    cropperState.originalPdfBytes
+    cropperState.originalPdfBytes, 
+    {ignoreEncryption: true, throwOnInvalidObject: false}
   );
   const totalPages = cropperState.pdfDoc.numPages;
 
@@ -321,7 +322,8 @@ export async function setupCropperTool() {
           finalPdfBytes = await newPdfDoc.save();
         } else {
           const pdfToModify = await PDFLibDocument.load(
-            cropperState.originalPdfBytes
+            cropperState.originalPdfBytes,
+            {ignoreEncryption: true, throwOnInvalidObject: false}
           );
           await performMetadataCrop(pdfToModify, finalCropData);
           finalPdfBytes = await pdfToModify.save();
diff --git a/src/js/logic/index.ts b/src/js/logic/index.ts
index d4b708b..a6b96da 100644
--- a/src/js/logic/index.ts
+++ b/src/js/logic/index.ts
@@ -67,6 +67,7 @@ import { extractAttachments } from './extract-attachments.js';
 import { editAttachments, setupEditAttachmentsTool } from './edit-attachments.js';
 import { sanitizePdf } from './sanitize-pdf.js';
 import { removeRestrictions } from './remove-restrictions.js';
+import { repairPdf } from './repair-pdf.js';
 
 export const toolLogic = {
   merge: { process: merge, setup: setupMergeTool },
@@ -74,6 +75,7 @@ export const toolLogic = {
   encrypt,
   decrypt,
   'remove-restrictions': removeRestrictions,
+  'repair-pdf': repairPdf,
   organize,
   rotate,
   'add-page-numbers': addPageNumbers,
diff --git a/src/js/logic/merge.ts b/src/js/logic/merge.ts
index 4ce21e5..756b942 100644
--- a/src/js/logic/merge.ts
+++ b/src/js/logic/merge.ts
@@ -192,7 +192,7 @@ async function renderPageMergeThumbnails() {
         container,
         createWrapperWithFileName,
         {
-          batchSize: 6,
+          batchSize: 8,
           useLazyLoading: true,
           lazyLoadMargin: '300px',
           onProgress: (current, total) => {
diff --git a/src/js/logic/pdf-multi-tool.ts b/src/js/logic/pdf-multi-tool.ts
index 3bd5906..5576eef 100644
--- a/src/js/logic/pdf-multi-tool.ts
+++ b/src/js/logic/pdf-multi-tool.ts
@@ -6,6 +6,7 @@ import Sortable from 'sortablejs';
 import { downloadFile, getPDFDocument } from '../utils/helpers';
 import { renderPagesProgressively, cleanupLazyRendering, renderPageToCanvas, createPlaceholder } from '../utils/render-utils';
 import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
+import { repairPdfFile } from './repair-pdf.js';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -351,8 +352,27 @@ async function loadPdfs(files: File[]) {
       if (renderCancelled) break;
 
       try {
-        const arrayBuffer = await file.arrayBuffer();
-        const pdfDoc = await PDFLibDocument.load(arrayBuffer);
+        let arrayBuffer: ArrayBuffer;
+
+        try {
+          console.log(`Repairing ${file.name}...`);
+          const loadingText = document.getElementById('loading-text');
+          if (loadingText) loadingText.textContent = `Repairing ${file.name}...`;
+
+          const repairedData = await repairPdfFile(file);
+          if (repairedData) {
+            arrayBuffer = repairedData.buffer as ArrayBuffer;
+            console.log(`Successfully repaired ${file.name} before loading.`);
+          } else {
+            console.warn(`Repair returned null for ${file.name}, using original file.`);
+            arrayBuffer = await file.arrayBuffer();
+          }
+        } catch (repairError) {
+          console.warn(`Failed to repair ${file.name}, attempting to load original:`, repairError);
+          arrayBuffer = await file.arrayBuffer();
+        }
+
+        const pdfDoc = await PDFLibDocument.load(arrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false });
         currentPdfDocs.push(pdfDoc);
         const pdfIndex = currentPdfDocs.length - 1;
 
@@ -735,7 +755,7 @@ async function handleInsertPdf(e: Event) {
 
   try {
     const arrayBuffer = await file.arrayBuffer();
-    const pdfDoc = await PDFLibDocument.load(arrayBuffer);
+    const pdfDoc = await PDFLibDocument.load(arrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false });
     currentPdfDocs.push(pdfDoc);
     const pdfIndex = currentPdfDocs.length - 1;
 
diff --git a/src/js/logic/repair-pdf-page.ts b/src/js/logic/repair-pdf-page.ts
new file mode 100644
index 0000000..5f9ed62
--- /dev/null
+++ b/src/js/logic/repair-pdf-page.ts
@@ -0,0 +1,92 @@
+import { repairPdf } from './repair-pdf.js';
+import { state } from '../state.js';
+import { renderFileDisplay } from '../ui.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const fileInput = document.getElementById('file-input') as HTMLInputElement;
+    const dropZone = document.getElementById('drop-zone');
+    const processBtn = document.getElementById('process-btn');
+    const fileDisplayArea = document.getElementById('file-display-area');
+
+    const fileControls = document.getElementById('file-controls');
+    const addMoreBtn = document.getElementById('add-more-btn');
+    const clearFilesBtn = document.getElementById('clear-files-btn');
+    const backBtn = document.getElementById('back-to-tools');
+
+    if (backBtn) {
+        backBtn.addEventListener('click', () => {
+            window.location.href = '/';
+        });
+    }
+
+    const updateUI = () => {
+        if (state.files.length > 0) {
+            renderFileDisplay(fileDisplayArea, state.files);
+            if (processBtn) processBtn.classList.remove('hidden');
+            if (fileControls) fileControls.classList.remove('hidden');
+        } else {
+            if (fileDisplayArea) fileDisplayArea.innerHTML = '';
+            if (processBtn) processBtn.classList.add('hidden');
+            if (fileControls) fileControls.classList.add('hidden');
+        }
+    };
+
+    if (fileInput && dropZone) {
+        fileInput.addEventListener('change', async (e) => {
+            const files = (e.target as HTMLInputElement).files;
+            if (files && files.length > 0) {
+                state.files = [...state.files, ...Array.from(files)];
+                updateUI();
+            }
+            fileInput.value = '';
+        });
+
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('bg-gray-700'); 
+        });
+
+        dropZone.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('bg-gray-700');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('bg-gray-700');
+            const files = e.dataTransfer?.files;
+            if (files && files.length > 0) {
+                const pdfFiles = Array.from(files).filter(f => f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf'));
+                if (pdfFiles.length > 0) {
+                    state.files = [...state.files, ...pdfFiles];
+                    updateUI();
+                }
+            }
+        });
+
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
+        });
+    }
+
+    if (addMoreBtn) {
+        addMoreBtn.addEventListener('click', () => {
+            fileInput.click();
+        });
+    }
+
+    if (clearFilesBtn) {
+        clearFilesBtn.addEventListener('click', () => {
+            state.files = [];
+            updateUI();
+        });
+    }
+
+    if (processBtn) {
+        processBtn.addEventListener('click', async () => {
+            await repairPdf();
+        });
+    }
+
+    updateUI();
+});
diff --git a/src/js/logic/repair-pdf.ts b/src/js/logic/repair-pdf.ts
new file mode 100644
index 0000000..0fd684f
--- /dev/null
+++ b/src/js/logic/repair-pdf.ts
@@ -0,0 +1,128 @@
+import { showLoader, hideLoader, showAlert } from '../ui.js';
+import {
+    downloadFile,
+    initializeQpdf,
+    readFileAsArrayBuffer,
+} from '../utils/helpers.js';
+import { state } from '../state.js';
+import JSZip from 'jszip';
+
+export async function repairPdfFile(file: File): Promise<Uint8Array | null> {
+    const inputPath = '/input.pdf';
+    const outputPath = '/repaired_form.pdf';
+    let qpdf: any;
+
+    try {
+        qpdf = await initializeQpdf();
+        const fileBuffer = await readFileAsArrayBuffer(file);
+        const uint8Array = new Uint8Array(fileBuffer as ArrayBuffer);
+
+        qpdf.FS.writeFile(inputPath, uint8Array);
+
+        const args = [inputPath, '--decrypt', outputPath];
+
+        try {
+            qpdf.callMain(args);
+        } catch (e) {
+            console.warn(`QPDF execution warning for ${file.name}:`, e);
+        }
+
+        let repairedData: Uint8Array | null = null;
+        try {
+            repairedData = qpdf.FS.readFile(outputPath, { encoding: 'binary' });
+        } catch (e) {
+            console.warn(`Failed to read output for ${file.name}:`, e);
+        }
+
+        try {
+            try {
+                qpdf.FS.unlink(inputPath);
+            } catch (e) {
+                console.warn(e);
+            }
+            try {
+                qpdf.FS.unlink(outputPath);
+            } catch (e) {
+                console.warn(e);
+            }
+        } catch (cleanupError) {
+            console.warn('Cleanup error:', cleanupError);
+        }
+
+        return repairedData;
+
+    } catch (error) {
+        console.error(`Error repairing ${file.name}:`, error);
+        return null;
+    }
+}
+
+export async function repairPdf() {
+    if (state.files.length === 0) {
+        showAlert('No Files', 'Please select one or more PDF files.');
+        return;
+    }
+
+    const successfulRepairs: { name: string; data: Uint8Array }[] = [];
+    const failedRepairs: string[] = [];
+
+    try {
+        showLoader('Initializing repair engine...');
+
+        for (let i = 0; i < state.files.length; i++) {
+            const file = state.files[i];
+            showLoader(`Repairing ${file.name} (${i + 1}/${state.files.length})...`);
+
+            const repairedData = await repairPdfFile(file);
+
+            if (repairedData && repairedData.length > 0) {
+                successfulRepairs.push({
+                    name: `repaired-${file.name}`,
+                    data: repairedData,
+                });
+            } else {
+                failedRepairs.push(file.name);
+            }
+        }
+
+        hideLoader();
+
+        if (successfulRepairs.length === 0) {
+            showAlert('Repair Failed', 'Unable to repair any of the uploaded PDF files.');
+            return;
+        }
+
+        if (failedRepairs.length > 0) {
+            const failedList = failedRepairs.join(', ');
+            showAlert(
+                'Partial Success',
+                `Repaired ${successfulRepairs.length} file(s). Failed to repair: ${failedList}`
+            );
+        }
+
+        if (successfulRepairs.length === 1) {
+            const file = successfulRepairs[0];
+            const blob = new Blob([file.data as any], { type: 'application/pdf' });
+            downloadFile(blob, file.name);
+        } else {
+            showLoader('Creating ZIP archive...');
+            const zip = new JSZip();
+            successfulRepairs.forEach((file) => {
+                zip.file(file.name, file.data);
+            });
+
+            const zipBlob = await zip.generateAsync({ type: 'blob' });
+            downloadFile(zipBlob, 'repaired_pdfs.zip');
+            hideLoader();
+        }
+
+        if (failedRepairs.length === 0) {
+            showAlert('Success', 'All files repaired successfully!');
+        }
+
+    } catch (error: any) {
+        console.error('Critical error during repair:', error);
+        hideLoader();
+        showAlert('Error', 'An unexpected error occurred during the repair process.');
+    }
+}
diff --git a/src/js/logic/reverse-pages.ts b/src/js/logic/reverse-pages.ts
index ee32834..32c429a 100644
--- a/src/js/logic/reverse-pages.ts
+++ b/src/js/logic/reverse-pages.ts
@@ -19,7 +19,7 @@ export async function reversePages() {
     for (let j = 0; j < pdfDocs.length; j++) {
       const file = pdfDocs[j];
       const arrayBuffer = await file.arrayBuffer();
-      const pdfDoc = await PDFLibDocument.load(arrayBuffer);
+      const pdfDoc = await PDFLibDocument.load(arrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false });
       const newPdf = await PDFLibDocument.create();
       const pageCount = pdfDoc.getPageCount();
       const reversedIndices = Array.from(
diff --git a/src/js/ui.ts b/src/js/ui.ts
index d057ced..287b788 100644
--- a/src/js/ui.ts
+++ b/src/js/ui.ts
@@ -44,19 +44,23 @@ export const dom = {
 };
 
 export const showLoader = (text = 'Processing...') => {
-    dom.loaderText.textContent = text;
-    dom.loaderModal.classList.remove('hidden');
+    if (dom.loaderText) dom.loaderText.textContent = text;
+    if (dom.loaderModal) dom.loaderModal.classList.remove('hidden');
 };
 
-export const hideLoader = () => dom.loaderModal.classList.add('hidden');
+export const hideLoader = () => {
+    if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
+};
 
 export const showAlert = (title: any, message: any) => {
-    dom.alertTitle.textContent = title;
-    dom.alertMessage.textContent = message;
-    dom.alertModal.classList.remove('hidden');
+    if (dom.alertTitle) dom.alertTitle.textContent = title;
+    if (dom.alertMessage) dom.alertMessage.textContent = message;
+    if (dom.alertModal) dom.alertModal.classList.remove('hidden');
 };
 
-export const hideAlert = () => dom.alertModal.classList.add('hidden');
+export const hideAlert = () => {
+    if (dom.alertModal) dom.alertModal.classList.add('hidden');
+};
 
 export const switchView = (view: any) => {
     if (view === 'grid') {
@@ -243,7 +247,7 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
             container,
             createWrapper,
             {
-                batchSize: 6,
+                batchSize: 8,
                 useLazyLoading: true,
                 lazyLoadMargin: '300px',
                 onProgress: (current, total) => {
diff --git a/src/js/utils/render-utils.ts b/src/js/utils/render-utils.ts
index 526c8c5..5e4511a 100644
--- a/src/js/utils/render-utils.ts
+++ b/src/js/utils/render-utils.ts
@@ -9,7 +9,7 @@ export interface RenderConfig {
     batchSize?: number;
     useLazyLoading?: boolean;
     lazyLoadMargin?: string;
-    eagerLoadBatches?: number; // Number of batches to load ahead eagerly (default: 1)
+    eagerLoadBatches?: number; // Number of batches to load ahead eagerly (default: 2)
     onProgress?: (current: number, total: number) => void;
     onPageRendered?: (pageIndex: number, element: HTMLElement) => void;
     onBatchComplete?: () => void;
@@ -214,7 +214,7 @@ export async function renderPagesProgressively(
     const {
         batchSize = 8,  // Increased from 5 to 8 for faster initial render
         useLazyLoading = true,
-        eagerLoadBatches = 1, // Eagerly load 1 batch ahead by default
+        eagerLoadBatches = 2, // Eagerly load 1 batch ahead by default
         onProgress,
         onBatchComplete,
     } = config;
@@ -318,7 +318,7 @@ export function observePlaceholder(
  * Eagerly renders the next batch in the background
  */
 function renderEagerBatch(config: RenderConfig): void {
-    const { eagerLoadBatches = 1, batchSize = 8 } = config;
+    const { eagerLoadBatches = 2, batchSize = 8 } = config;
 
     if (eagerLoadBatches <= 0 || lazyLoadState.eagerLoadQueue.length === 0) {
         return;
diff --git a/src/pages/add-stamps.html b/src/pages/add-stamps.html
index 45440d8..ab1b0c1 100644
--- a/src/pages/add-stamps.html
+++ b/src/pages/add-stamps.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Add Stamps - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/src/pages/bookmark.html b/src/pages/bookmark.html
index 451bef0..e4d1112 100644
--- a/src/pages/bookmark.html
+++ b/src/pages/bookmark.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Advanced PDF Bookmark Tool - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
   <link href="../../src/css/bookmark.css" rel="stylesheet" />
 </head>
@@ -271,7 +274,7 @@
               <input type="text" id="bookmark-title" placeholder="Bookmark title..."
                 class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-2 text-sm" />
               <button id="add-top-level-btn"
-                class="w-full px-3 py-2 bg-gradient-to-b from-blue-500 to-blue-600 hover:shadow-xl text-white rounded text-sm font-medium flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200">
+                class="w-full px-3 py-2 btn-gradient hover:shadow-xl text-white rounded text-sm font-medium !flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200">
                 <i data-lucide="plus" class="w-4 h-4"></i>
                 <span>Add to Page <span id="current-page-display">1</span></span>
               </button>
@@ -391,11 +394,14 @@
 
             <div class="space-y-2">
               <button id="download-btn"
-                class="w-full px-4 py-2 bg-gradient-to-b from-blue-600 to-blue-700 hover:shadow-xl text-white rounded font-medium flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200">
+                class="w-full px-4 py-2 btn-gradient hover:shadow-xl text-white rounded font-medium !flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200">
                 Save PDF with Bookmarks
               </button>
               <button id="extract-existing-btn"
-                class="w-full px-4 py-2 bg-gradient-to-b from-green-500 to-green-600 hover:shadow-xl text-white rounded font-medium flex items-center justify-center gap-2 focus:ring-2 focus:ring-green-400 transition duration-200">
+                class="w-full px-4 py-2 bg-gray-50 text-gray-800 
+                border border-gray-200 rounded-xl font-medium 
+                flex items-center justify-center gap-2
+                shadow-sm hover:shadow-md transition duration-200">
                 Extract Existing Bookmarks
               </button>
             </div>
diff --git a/src/pages/form-creator.html b/src/pages/form-creator.html
index a96cb7a..3206a6f 100644
--- a/src/pages/form-creator.html
+++ b/src/pages/form-creator.html
@@ -5,7 +5,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Create PDF Form - BentoPDF</title>
-    <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+    <link rel="icon" type="image/png" href="/images/favicon.png" />
+    <link rel="apple-touch-icon" href="/images/favicon.png" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
     <link href="../../src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/src/pages/json-to-pdf.html b/src/pages/json-to-pdf.html
index e63c7c1..a7df403 100644
--- a/src/pages/json-to-pdf.html
+++ b/src/pages/json-to-pdf.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JSON to PDF Converter - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/src/pages/pdf-multi-tool.html b/src/pages/pdf-multi-tool.html
index 5490d14..546ab11 100644
--- a/src/pages/pdf-multi-tool.html
+++ b/src/pages/pdf-multi-tool.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PDF Multi Tool - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
 
   <style>
diff --git a/src/pages/pdf-to-json.html b/src/pages/pdf-to-json.html
index 2d61813..2b3657c 100644
--- a/src/pages/pdf-to-json.html
+++ b/src/pages/pdf-to-json.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PDF to JSON Converter - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/src/pages/repair-pdf.html b/src/pages/repair-pdf.html
new file mode 100644
index 0000000..43521da
--- /dev/null
+++ b/src/pages/repair-pdf.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Repair PDF - BentoPDF</title>
+  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link href="../../src/css/styles.css" rel="stylesheet" />
+</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="../../public/images/favicon.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>
+
+        <!-- Desktop Navigation -->
+        <div class="hidden md:flex items-center space-x-8 text-white">
+          <a href="/" class="nav-link">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">All Tools</a>
+        </div>
+
+        <!-- Mobile Hamburger Button -->
+        <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>
+            <!-- Hamburger Icon -->
+            <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>
+            <!-- Close Icon -->
+            <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>
+
+    <!-- Mobile Menu Dropdown -->
+    <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">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">All Tools</a>
+      </div>
+    </div>
+  </nav>
+
+  <div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
+    <div id="tool-uploader"
+      class="bg-gray-800 rounded-xl shadow-xl 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"> Back to Tools </span>
+      </button>
+      <h1 class="text-2xl font-bold text-white mb-2">Repair PDF</h1>
+      <p class="text-gray-400 mb-6">
+        Recover data from corrupted or damaged PDF files.
+      </p>
+
+      <!-- Drop Zone for Main PDF Upload -->
+      <div id="drop-zone"
+        class="relative flex flex-col items-center justify-center w-full h-48 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">Click to select a file</span> or drag and
+            drop</p>
+          <p class="text-xs text-gray-500">PDFs or Images</p>
+          <p class="text-xs text-gray-500">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" multiple
+          accept=".pdf">
+      </div>
+
+      <!-- Control buttons for multi-file uploads -->
+      <div id="file-controls" class="hidden mt-4 flex gap-3">
+        <button id="add-more-btn"
+          class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
+          <i data-lucide="plus"></i> Add More Files
+        </button>
+        <button id="clear-files-btn"
+          class="btn bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
+          <i data-lucide="x"></i> Clear All
+        </button>
+      </div>
+
+      <!-- File Display Area -->
+      <div id="file-display-area" class="mt-4 space-y-2"></div>
+
+      <button id="process-btn" class="btn-gradient w-full mt-6 hidden">Repair PDF</button>
+
+    </div>
+  </div>
+
+  <!-- Loader Modal -->
+  <div id="loader-modal" class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden">
+    <div class="text-center">
+      <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
+      <p id="loader-text" class="text-white text-lg font-semibold">Processing...</p>
+    </div>
+  </div>
+
+  <!-- Alert Modal -->
+  <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">Alert</h3>
+      <p id="alert-message" class="text-gray-300 mb-6"></p>
+      <button onclick="document.getElementById('alert-modal').classList.add('hidden')"
+        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>
+
+  <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="../../public/images/favicon.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; 2025 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/AP2Y97juZT" 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="../js/utils/lucide-init.ts"></script>
+  <script type="module" src="../js/utils/full-width.ts"></script>
+  <script type="module" src="../js/utils/simple-mode-footer.ts"></script>
+  <script type="module" src="../version.ts"></script>
+  <script type="module" src="../js/logic/repair-pdf-page.ts"></script>
+  <script type="module" src="../js/mobileMenu.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/table-of-contents.html b/src/pages/table-of-contents.html
index 0fa7053..71de3cc 100644
--- a/src/pages/table-of-contents.html
+++ b/src/pages/table-of-contents.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Generate Table of Contents - BentoPDF</title>
-  <link rel="icon" type="image/png" href="../../images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/terms.html b/terms.html
index bcabc56..6dd2149 100644
--- a/terms.html
+++ b/terms.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Terms and Conditions - Bentopdf</title>
-  <link rel="icon" type="image/png" href="images/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
+  <link rel="icon" type="image/png" href="/images/favicon.png" />
+  <link rel="apple-touch-icon" href="/images/favicon.png" />
+  <link rel="icon" href="/favicon.ico" sizes="any" />
   <link href="/src/css/styles.css" rel="stylesheet" />
 </head>
 
diff --git a/vite.config.ts b/vite.config.ts
index ccaf723..159e558 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,6 +61,7 @@ export default defineConfig(({ mode }) => ({
         'pdf-multi-tool': resolve(__dirname, 'src/pages/pdf-multi-tool.html'),
         'add-stamps': resolve(__dirname, 'src/pages/add-stamps.html'),
         'form-creator': resolve(__dirname, 'src/pages/form-creator.html'),
+        'repair-pdf': resolve(__dirname, 'src/pages/repair-pdf.html'),
       },
     },
   },