From 95927cd8994e322538a808eb2a2f3df7a805014b Mon Sep 17 00:00:00 2001
From: abdullahalam123 <adullah.alam.tapadar2000@gmail.com>
Date: Mon, 24 Nov 2025 21:16:23 +0530
Subject: [PATCH] squash: feat: Create fillable PDF forms

---
 README.md                           |    1 +
 index.html                          |   55 +-
 licensing.html                      |   26 +-
 src/css/styles.css                  |   20 +-
 src/js/canvasEditor.ts              |   33 +-
 src/js/config/tools.ts              |    6 +
 src/js/handlers/fileHandler.ts      |   55 +-
 src/js/logic/add-watermark.ts       |   30 +-
 src/js/logic/bookmark-pdf.ts        |   35 +-
 src/js/logic/change-text-color.ts   |   47 +-
 src/js/logic/combine-single-page.ts |  183 ++-
 src/js/logic/compare-pdfs.ts        |    9 +-
 src/js/logic/compress.ts            |   23 +-
 src/js/logic/cropper.ts             |  258 ++--
 src/js/logic/duplicate-organize.ts  |   10 +-
 src/js/logic/form-creator.ts        | 2040 +++++++++++++++++++++++++++
 src/js/logic/invert-colors.ts       |   11 +-
 src/js/logic/merge.ts               |    9 +-
 src/js/logic/ocr-pdf.ts             |   11 +-
 src/js/logic/page-dimensions.ts     |  186 ++-
 src/js/logic/pdf-multi-tool.ts      |    6 +-
 src/js/logic/pdf-to-bmp.ts          |   10 +-
 src/js/logic/pdf-to-greyscale.ts    |   11 +-
 src/js/logic/pdf-to-jpg.ts          |   11 +-
 src/js/logic/pdf-to-markdown.ts     |    5 +-
 src/js/logic/pdf-to-png.ts          |   15 +-
 src/js/logic/pdf-to-tiff.ts         |    6 +-
 src/js/logic/pdf-to-webp.ts         |   13 +-
 src/js/logic/posterize.ts           |    6 +-
 src/js/logic/remove-blank-pages.ts  |    6 +-
 src/js/logic/rotate.ts              |    8 +-
 src/js/logic/sign-pdf.ts            |   41 +-
 src/js/logic/split.ts               |    6 +-
 src/js/main.ts                      |  108 +-
 src/js/ui.ts                        |   81 +-
 src/js/utils/full-width.ts          |   34 +
 src/js/utils/helpers.ts             |  106 +-
 src/js/utils/render-utils.ts        |    2 +
 src/pages/add-stamps.html           |    4 +-
 src/pages/bookmark.html             |    7 +-
 src/pages/form-creator.html         |  404 ++++++
 src/pages/json-to-pdf.html          |    4 +-
 src/pages/pdf-to-json.html          |    4 +-
 src/pages/table-of-contents.html    |    4 +-
 vite.config.ts                      |    1 +
 45 files changed, 3595 insertions(+), 356 deletions(-)
 create mode 100644 src/js/logic/form-creator.ts
 create mode 100644 src/js/utils/full-width.ts
 create mode 100644 src/pages/form-creator.html

diff --git a/README.md b/README.md
index 900af65..d3c520e 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,7 @@ BentoPDF offers a comprehensive suite of tools to handle all your PDF needs.
 | Tool Name              | Description                                                 |
 | :--------------------- | :---------------------------------------------------------- |
 | **PDF Editor**         | A comprehensive editor to modify your PDFs.                 |
+| **Create Fillable Forms** | Create professional fillable PDF forms with text fields, checkboxes, dropdowns, radio buttons, signatures, and more. Fully compliant with PDF standards for compatibility with all PDF viewers. |
 | **Add Page Numbers**   | Easily add page numbers with customizable formatting.       |
 | **Add Watermark**      | Add text or image watermarks to protect your documents.     |
 | **Header & Footer**    | Add customizable headers and footers.                       |
diff --git a/index.html b/index.html
index f368fdc..5927c4e 100644
--- a/index.html
+++ b/index.html
@@ -265,15 +265,28 @@
       <div class="bg-gray-800 w-full max-w-2xl rounded-xl border border-gray-700 shadow-2xl flex flex-col max-h-[80vh]">
         <div class="p-6 border-b border-gray-700 flex justify-between items-center">
           <h3 class="text-xl font-bold text-white flex items-center gap-2">
-            <i data-lucide="keyboard" class="w-6 h-6 text-indigo-400"></i>
-            Keyboard Shortcuts
+            <i data-lucide="settings" class="w-6 h-6 text-indigo-400"></i>
+            Settings
           </h3>
           <button id="close-shortcuts-modal" class="text-gray-400 hover:text-white transition-colors">
             <i data-lucide="x" class="w-6 h-6"></i>
           </button>
         </div>
 
-        <div class="p-6 overflow-y-auto flex-grow">
+        <!-- Tabs -->
+        <div class="flex border-b border-gray-700">
+          <button id="shortcuts-tab-btn" class="flex-1 py-3 text-sm font-medium bg-indigo-600 text-white">
+            <i data-lucide="keyboard" class="inline-block w-4 h-4 mr-1"></i>
+            Shortcuts
+          </button>
+          <button id="preferences-tab-btn" class="flex-1 py-3 text-sm font-medium text-gray-300 hover:text-white">
+            <i data-lucide="sliders" class="inline-block w-4 h-4 mr-1"></i>
+            Preferences
+          </button>
+        </div>
+
+        <!-- Shortcuts Tab Content -->
+        <div id="shortcuts-tab-content" class="p-6 overflow-y-auto flex-grow">
           <div class="flex justify-between items-center mb-6">
             <div class="relative flex-grow mr-4">
               <i data-lucide="search"
@@ -298,8 +311,32 @@
           </div>
         </div>
 
+        <!-- Preferences Tab Content -->
+        <div id="preferences-tab-content" class="hidden p-6 overflow-y-auto flex-grow">
+          <h4 class="text-lg font-semibold text-white mb-4">Display Preferences</h4>
+
+          <div class="space-y-4">
+            <div class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700">
+              <div class="flex-1">
+                <label for="full-width-toggle" class="text-sm font-medium text-gray-200 cursor-pointer">
+                  Full Width Mode
+                </label>
+                <p class="text-xs text-gray-400 mt-1">
+                  Use the full screen width for all tools instead of a centered container
+                </p>
+              </div>
+              <label class="relative inline-flex items-center cursor-pointer ml-4">
+                <input type="checkbox" id="full-width-toggle" class="sr-only peer">
+                <div
+                  class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 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:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600">
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+
         <div class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl">
-          <div class="flex gap-3">
+          <div id="shortcuts-tab-footer" class="flex gap-3">
             <button id="import-shortcuts-btn"
               class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors">
               <i data-lucide="upload" class="w-4 h-4"></i> Import
@@ -309,6 +346,9 @@
               <i data-lucide="download" class="w-4 h-4"></i> Export
             </button>
           </div>
+          <div id="preferences-tab-footer" class="hidden w-full">
+            <p class="text-xs text-gray-400 text-center">Settings are automatically saved</p>
+          </div>
           <button id="reset-shortcuts-btn"
             class="text-red-400 hover:text-red-300 text-sm font-medium transition-colors">
             Reset to Defaults
@@ -675,6 +715,13 @@
     </section>
 
     <div id="signature-ghost" class="hidden"></div>
+
+    <!-- Scroll to Top Button -->
+    <button id="scroll-to-top-btn"
+      class="fixed bottom-12 right-8 bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 opacity-0 translate-y-10 invisible z-40"
+      aria-label="Scroll to top">
+      <i data-lucide="arrow-up" class="w-6 h-6"></i>
+    </button>
   </div>
 
   <footer class="mt-16 border-t-2 border-gray-700 py-8">
diff --git a/licensing.html b/licensing.html
index cde6451..be1bf22 100644
--- a/licensing.html
+++ b/licensing.html
@@ -192,12 +192,32 @@
                     <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">
+                                LIMITED TIME OFFER
+                            </div>
                             <p class="text-white text-2xl font-bold mb-2">Lifetime License</p>
-                            <p class="text-indigo-300 text-4xl font-bold mb-3">$49 <span
-                                    class="text-lg font-normal text-gray-400">one-time</span></p>
+                            <div class="flex items-center justify-center gap-3 mb-3">
+                                <span class="text-gray-400 text-2xl line-through">$99</span>
+                                <span class="text-indigo-300 text-4xl font-bold">$49</span>
+                                <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">
+                                    <i data-lucide="infinity" class="w-6 h-6 text-indigo-400 flex-shrink-0 mt-0.5"></i>
+                                    <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.
+                                        </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">
+                                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
                             </a>
                         </div>
diff --git a/src/css/styles.css b/src/css/styles.css
index 87b819b..3d1eefc 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -109,7 +109,7 @@ input[type='file']::file-selector-button {
   border: 2px dashed #4f46e5;
 }
 
-#embed-pdf-container > div {
+#embed-pdf-container>div {
   width: 100%;
   height: 100%;
 }
@@ -119,7 +119,7 @@ input[type='file']::file-selector-button {
 }
 
 .page-thumbnail,
-#file-list > li {
+#file-list>li {
   cursor: grab;
 }
 
@@ -495,19 +495,19 @@ footer a {
   color: rgb(165 180 252);
 }
 
-details > summary {
+details>summary {
   list-style: none;
 }
 
-details > summary::-webkit-details-marker {
+details>summary::-webkit-details-marker {
   display: none;
 }
 
-details > summary .icon {
+details>summary .icon {
   transition: transform 0.2s ease-in-out;
 }
 
-details[open] > summary .icon {
+details[open]>summary .icon {
   transform: rotate(45deg);
 }
 
@@ -568,6 +568,7 @@ button:disabled,
 #shortcuts-list::-webkit-scrollbar-thumb:hover {
   background: #6b7280;
 }
+
 /* Hide elements on touch devices */
 @media (pointer: coarse) {
   .hidden-on-touch {
@@ -581,3 +582,10 @@ button:disabled,
     display: none !important;
   }
 }
+
+/* Scroll to Top Button Visibility */
+#scroll-to-top-btn.visible {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
\ No newline at end of file
diff --git a/src/js/canvasEditor.ts b/src/js/canvasEditor.ts
index 8467627..144878b 100644
--- a/src/js/canvasEditor.ts
+++ b/src/js/canvasEditor.ts
@@ -1,9 +1,29 @@
 import { showLoader, hideLoader, showAlert } from './ui.js';
+import { getPDFDocument } from './utils/helpers.js';
 import { state } from './state.js';
 import { toolLogic } from './logic/index.js';
 import { icons, createIcons } from 'lucide';
+import * as pdfjsLib from 'pdfjs-dist';
 
-const editorState = {
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
+
+const editorState: {
+  pdf: any;
+  canvas: any;
+  context: any;
+  container: any;
+  currentPageNum: number;
+  pageRendering: boolean;
+  pageNumPending: number | null;
+  scale: number | 'fit';
+  pageSnapshot: any;
+  isDrawing: boolean;
+  startX: number;
+  startY: number;
+  cropBoxes: Record<number, any>;
+  lastInteractionRect: { x: number; y: number; width: number; height: number } | null;
+} = {
   pdf: null,
   canvas: null,
   context: null,
@@ -41,7 +61,6 @@ async function renderPage(num: any) {
   try {
     const page = await editorState.pdf.getPage(num);
 
-    // @ts-expect-error TS(2367) FIXME: This condition will always return 'false' since th... Remove this comment to see the full error message
     if (editorState.scale === 'fit') {
       editorState.scale = calculateFitScale(page);
     }
@@ -185,12 +204,10 @@ export async function setupCanvasEditor(toolId: any) {
 
   const pageNav = document.getElementById('page-nav');
   const pdfData = await state.pdfDoc.save();
-  // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-  editorState.pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
+  editorState.pdf = await getPDFDocument({ data: pdfData }).promise;
 
   editorState.cropBoxes = {};
   editorState.currentPageNum = 1;
-  // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'number'.
   editorState.scale = 'fit';
 
   pageNav.textContent = '';
@@ -256,11 +273,13 @@ export async function setupCanvasEditor(toolId: any) {
 
   if (toolId === 'crop') {
     document.getElementById('zoom-in-btn').onclick = () => {
-      editorState.scale += 0.25;
+      if (typeof editorState.scale === 'number') {
+        editorState.scale += 0.25;
+      }
       renderPage(editorState.currentPageNum);
     };
     document.getElementById('zoom-out-btn').onclick = () => {
-      if (editorState.scale > 0.25) {
+      if (typeof editorState.scale === 'number' && editorState.scale > 0.25) {
         editorState.scale -= 0.25;
         renderPage(editorState.currentPageNum);
       }
diff --git a/src/js/config/tools.ts b/src/js/config/tools.ts
index 080a4c9..f73cab6 100644
--- a/src/js/config/tools.ts
+++ b/src/js/config/tools.ts
@@ -161,6 +161,12 @@ export const categories = [
         icon: 'square-pen',
         subtitle: 'Fill in forms directly in the browser. Also supports XFA forms.',
       },
+      {
+        href: '/src/pages/form-creator.html',
+        name: 'Create PDF Form',
+        icon: 'file-input',
+        subtitle: 'Create fillable PDF forms with drag-and-drop text fields.',
+      },
       {
         id: 'remove-blank-pages',
         name: 'Remove Blank Pages',
diff --git a/src/js/handlers/fileHandler.ts b/src/js/handlers/fileHandler.ts
index f042b9c..8869783 100644
--- a/src/js/handlers/fileHandler.ts
+++ b/src/js/handlers/fileHandler.ts
@@ -7,7 +7,7 @@ import {
   renderFileDisplay,
   switchView,
 } from '../ui.js';
-import { formatIsoDate, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { formatIsoDate, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { setupCanvasEditor } from '../canvasEditor.js';
 import { toolLogic } from '../logic/index.js';
 import { renderDuplicateOrganizeThumbnails } from '../logic/duplicate-organize.js';
@@ -21,16 +21,26 @@ import {
 } from '../config/pdf-tools.js';
 import * as pdfjsLib from 'pdfjs-dist';
 
-// Global state for rotation tracking (used by Rotate tool)
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 const rotationState: number[] = [];
 let imageSortableInstance: Sortable | null = null;
 const activeImageUrls = new Map<File, string>();
 
-// Export getter for rotation state (used by ui.ts)
 export function getRotationState(): readonly number[] {
   return rotationState;
 }
 
+export function updateRotationState(pageIndex: number, rotation: number) {
+  if (pageIndex >= 0 && pageIndex < rotationState.length) {
+    rotationState[pageIndex] = rotation;
+  }
+}
+
+export function resetRotationState() {
+  rotationState.length = 0;
+}
+
 async function handleSinglePdfUpload(toolId, file) {
   showLoader('Loading PDF...');
   try {
@@ -164,7 +174,7 @@ async function handleSinglePdfUpload(toolId, file) {
 
       try {
         const pdfBytes = await readFileAsArrayBuffer(state.files[0]);
-        const pdfjsDoc = await pdfjsLib.getDocument({
+        const pdfjsDoc = await getPDFDocument({
           data: pdfBytes as ArrayBuffer,
         }).promise;
         const [metadataResult, fieldObjects] = await Promise.all([
@@ -469,6 +479,43 @@ async function handleSinglePdfUpload(toolId, file) {
       toolLogic['page-dimensions']();
     }
 
+    // Setup quality sliders for image conversion tools
+    if (toolId === 'pdf-to-jpg') {
+      const qualitySlider = document.getElementById('jpg-quality') as HTMLInputElement;
+      const qualityValue = document.getElementById('jpg-quality-value');
+      if (qualitySlider && qualityValue) {
+        const updateValue = () => {
+          qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
+        };
+        qualitySlider.addEventListener('input', updateValue);
+        updateValue();
+      }
+    }
+
+    if (toolId === 'pdf-to-png') {
+      const qualitySlider = document.getElementById('png-quality') as HTMLInputElement;
+      const qualityValue = document.getElementById('png-quality-value');
+      if (qualitySlider && qualityValue) {
+        const updateValue = () => {
+          qualityValue.textContent = `${qualitySlider.value}x`;
+        };
+        qualitySlider.addEventListener('input', updateValue);
+        updateValue();
+      }
+    }
+
+    if (toolId === 'pdf-to-webp') {
+      const qualitySlider = document.getElementById('webp-quality') as HTMLInputElement;
+      const qualityValue = document.getElementById('webp-quality-value');
+      if (qualitySlider && qualityValue) {
+        const updateValue = () => {
+          qualityValue.textContent = `${Math.round(parseFloat(qualitySlider.value) * 100)}%`;
+        };
+        qualitySlider.addEventListener('input', updateValue);
+        updateValue();
+      }
+    }
+
     if (toolLogic[toolId] && typeof toolLogic[toolId].setup === 'function') {
       toolLogic[toolId].setup();
     }
diff --git a/src/js/logic/add-watermark.ts b/src/js/logic/add-watermark.ts
index 3ac2fd8..09b1242 100644
--- a/src/js/logic/add-watermark.ts
+++ b/src/js/logic/add-watermark.ts
@@ -3,6 +3,7 @@ import {
   downloadFile,
   readFileAsArrayBuffer,
   hexToRgb,
+  resetAndReloadTool,
 } from '../utils/helpers.js';
 import { state, resetState } from '../state.js';
 
@@ -21,7 +22,7 @@ export function setupWatermarkUI() {
   const imageOptions = document.getElementById('image-watermark-options');
 
   watermarkTypeRadios.forEach((radio) => {
-    radio.addEventListener('change', (e) => { 
+    radio.addEventListener('change', (e) => {
       if (e.target.value === 'text') {
         textOptions.classList.remove('hidden');
         imageOptions.classList.add('hidden');
@@ -40,9 +41,9 @@ export function setupWatermarkUI() {
   opacitySliderText.addEventListener(
     'input',
     () =>
-      (opacityValueText.textContent = (
-        opacitySliderText as HTMLInputElement
-      ).value)
+    (opacityValueText.textContent = (
+      opacitySliderText as HTMLInputElement
+    ).value)
   );
 
   angleSliderText.addEventListener(
@@ -59,17 +60,17 @@ export function setupWatermarkUI() {
   opacitySliderImage.addEventListener(
     'input',
     () =>
-      (opacityValueImage.textContent = (
-        opacitySliderImage as HTMLInputElement
-      ).value)
+    (opacityValueImage.textContent = (
+      opacitySliderImage as HTMLInputElement
+    ).value)
   );
 
   angleSliderImage.addEventListener(
     'input',
     () =>
-      (angleValueImage.textContent = (
-        angleSliderImage as HTMLInputElement
-      ).value)
+    (angleValueImage.textContent = (
+      angleSliderImage as HTMLInputElement
+    ).value)
   );
 }
 
@@ -175,14 +176,7 @@ export async function addWatermark() {
       'watermarked.pdf'
     );
 
-    const toolid = state.activeTool;
-    resetState();
-    if (toolid) {
-      const element = document.querySelector(
-        `[data-tool-id="${toolid}"]`
-      ) as HTMLElement;
-      if (element) element.click();
-    }
+    resetAndReloadTool();
   } catch (e) {
     console.error(e);
     showAlert(
diff --git a/src/js/logic/bookmark-pdf.ts b/src/js/logic/bookmark-pdf.ts
index 1d80552..78def96 100644
--- a/src/js/logic/bookmark-pdf.ts
+++ b/src/js/logic/bookmark-pdf.ts
@@ -7,11 +7,10 @@ import Sortable from 'sortablejs';
 import { createIcons, icons } from 'lucide';
 import '../../css/bookmark.css';
 import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
+import { truncateFilename, getPDFDocument } from '../utils/helpers.js';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url
-).toString();
 
 const modalContainer = document.getElementById('modal-container');
 
@@ -715,8 +714,10 @@ function handleResize() {
   if (window.innerWidth >= 1024) {
     viewerSection.classList.remove('hidden');
     bookmarksSection.classList.remove('hidden');
-    showViewerBtn.classList.remove('bg-blue-50', 'text-blue-600');
-    showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
+    showViewerBtn.classList.remove('bg-indigo-600', 'text-white');
+    showViewerBtn.classList.add('text-gray-300');
+    showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
+    showBookmarksBtn.classList.add('text-gray-300');
   }
 }
 
@@ -725,15 +726,19 @@ window.addEventListener('resize', handleResize);
 showViewerBtn.addEventListener('click', () => {
   viewerSection.classList.remove('hidden');
   bookmarksSection.classList.add('hidden');
-  showViewerBtn.classList.add('bg-blue-50', 'text-blue-600');
-  showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
+  showViewerBtn.classList.add('bg-indigo-600', 'text-white');
+  showViewerBtn.classList.remove('text-gray-300');
+  showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
+  showBookmarksBtn.classList.add('text-gray-300');
 });
 
 showBookmarksBtn.addEventListener('click', () => {
   viewerSection.classList.add('hidden');
   bookmarksSection.classList.remove('hidden');
-  showBookmarksBtn.classList.add('bg-blue-50', 'text-blue-600');
-  showViewerBtn.classList.remove('bg-blue-50', 'text-blue-600');
+  showBookmarksBtn.classList.add('bg-indigo-600', 'text-white');
+  showBookmarksBtn.classList.remove('text-gray-300');
+  showViewerBtn.classList.remove('bg-indigo-600', 'text-white');
+  showViewerBtn.classList.add('text-gray-300');
 });
 
 // Dropdown toggles
@@ -863,8 +868,10 @@ function resetToUploader() {
   // Reset mobile view
   viewerSection.classList.remove('hidden');
   bookmarksSection.classList.add('hidden');
-  showViewerBtn.classList.add('bg-blue-50', 'text-blue-600');
-  showBookmarksBtn.classList.remove('bg-blue-50', 'text-blue-600');
+  showViewerBtn.classList.add('bg-indigo-600', 'text-white');
+  showViewerBtn.classList.remove('text-gray-300');
+  showBookmarksBtn.classList.remove('bg-indigo-600', 'text-white');
+  showBookmarksBtn.classList.add('text-gray-300');
 }
 
 document.addEventListener('keydown', (e) => {
@@ -1033,7 +1040,7 @@ async function loadPDF(e) {
   if (!file) return;
 
   originalFileName = file.name.replace('.pdf', '');
-  filenameDisplay.textContent = originalFileName;
+  filenameDisplay.textContent = truncateFilename(file.name);
   renderFileDisplay(file);
   const arrayBuffer = await file.arrayBuffer();
 
@@ -1046,7 +1053,7 @@ async function loadPDF(e) {
 
   pdfLibDoc = await PDFDocument.load(arrayBuffer, { ignoreEncryption: true });
 
-  const loadingTask = pdfjsLib.getDocument({
+  const loadingTask = getPDFDocument({
     data: new Uint8Array(arrayBuffer),
   });
   pdfJsDoc = await loadingTask.promise;
diff --git a/src/js/logic/change-text-color.ts b/src/js/logic/change-text-color.ts
index 42c3e08..d366c9d 100644
--- a/src/js/logic/change-text-color.ts
+++ b/src/js/logic/change-text-color.ts
@@ -3,10 +3,14 @@ import {
   downloadFile,
   hexToRgb,
   readFileAsArrayBuffer,
+  getPDFDocument,
 } from '../utils/helpers.js';
 import { state } from '../state.js';
-
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 let isRenderingPreview = false;
 let renderTimeout: any;
@@ -16,29 +20,25 @@ async function updateTextColorPreview() {
   isRenderingPreview = true;
 
   try {
-    const textColorCanvas = document.getElementById('text-color-canvas');
+    const textColorCanvas = document.getElementById('text-color-canvas') as HTMLCanvasElement;
     if (!textColorCanvas) return;
 
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const page = await pdf.getPage(1); // Preview first page
     const viewport = page.getViewport({ scale: 0.8 });
-    // @ts-expect-error TS(2339) FIXME: Property 'getContext' does not exist on type 'HTML... Remove this comment to see the full error message
     const context = textColorCanvas.getContext('2d');
 
-    // @ts-expect-error TS(2339) FIXME: Property 'width' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
     textColorCanvas.width = viewport.width;
-    // @ts-expect-error TS(2339) FIXME: Property 'height' does not exist on type 'HTMLElem... Remove this comment to see the full error message
     textColorCanvas.height = viewport.height;
 
-    await page.render({ canvasContext: context, viewport }).promise;
+    await page.render({ canvasContext: context, viewport, canvas: textColorCanvas }).promise;
     const imageData = context.getImageData(
       0,
       0,
-      (textColorCanvas as HTMLCanvasElement).width,
-      (textColorCanvas as HTMLCanvasElement).height
+      textColorCanvas.width,
+      textColorCanvas.height
     );
     const data = imageData.data;
     const colorHex = (
@@ -78,21 +78,19 @@ export async function setupTextColorTool() {
     renderTimeout = setTimeout(updateTextColorPreview, 250);
   });
 
-  // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-  const pdf = await pdfjsLib.getDocument(
+  const pdf = await getPDFDocument(
     await readFileAsArrayBuffer(state.files[0])
   ).promise;
   const page = await pdf.getPage(1);
   const viewport = page.getViewport({ scale: 0.8 });
 
-  // @ts-expect-error TS(2339) FIXME: Property 'width' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
-  originalCanvas.width = viewport.width;
-  // @ts-expect-error TS(2339) FIXME: Property 'height' does not exist on type 'HTMLElem... Remove this comment to see the full error message
-  originalCanvas.height = viewport.height;
+  (originalCanvas as HTMLCanvasElement).width = viewport.width;
+  (originalCanvas as HTMLCanvasElement).height = viewport.height;
 
   await page.render({
     canvasContext: (originalCanvas as HTMLCanvasElement).getContext('2d'),
     viewport,
+    canvas: originalCanvas as HTMLCanvasElement,
   }).promise;
   await updateTextColorPreview();
 }
@@ -103,16 +101,14 @@ export async function changeTextColor() {
     return;
   }
 
-  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
-  const colorHex = document.getElementById('text-color-input').value;
+  const colorHex = (document.getElementById('text-color-input') as HTMLInputElement).value;
   const { r, g, b } = hexToRgb(colorHex);
   const darknessThreshold = 120;
 
   showLoader('Changing text color...');
   try {
     const newPdfDoc = await PDFLibDocument.create();
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
 
@@ -126,7 +122,7 @@ export async function changeTextColor() {
       canvas.height = viewport.height;
       const context = canvas.getContext('2d');
 
-      await page.render({ canvasContext: context, viewport }).promise;
+      await page.render({ canvasContext: context, viewport, canvas }).promise;
 
       const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
@@ -144,16 +140,15 @@ export async function changeTextColor() {
       }
       context.putImageData(imageData, 0, 0);
 
-      const pngImageBytes = await new Promise((resolve) =>
+      const pngImageBytes = await new Promise<Uint8Array>((resolve) =>
         canvas.toBlob((blob) => {
           const reader = new FileReader();
-          // @ts-expect-error TS(2769) FIXME: No overload matches this call.
-          reader.onload = () => resolve(new Uint8Array(reader.result));
-          reader.readAsArrayBuffer(blob);
+          reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer));
+          reader.readAsArrayBuffer(blob!);
         }, 'image/png')
       );
 
-      const pngImage = await newPdfDoc.embedPng(pngImageBytes as ArrayBuffer);
+      const pngImage = await newPdfDoc.embedPng(pngImageBytes);
       const newPage = newPdfDoc.addPage([viewport.width, viewport.height]);
       newPage.drawImage(pngImage, {
         x: 0,
diff --git a/src/js/logic/combine-single-page.ts b/src/js/logic/combine-single-page.ts
index 23d1ef5..839b068 100644
--- a/src/js/logic/combine-single-page.ts
+++ b/src/js/logic/combine-single-page.ts
@@ -1,67 +1,208 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, hexToRgb } from '../utils/helpers.js';
+import { downloadFile, hexToRgb, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
-
 import { PDFDocument as PDFLibDocument, rgb } from 'pdf-lib';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
+document.addEventListener('change', (e) => {
+  const target = e.target as HTMLElement;
+  if (target.id === 'add-separator') {
+    const separatorOptions = document.getElementById('separator-options');
+    if (separatorOptions) {
+      const checkbox = target as HTMLInputElement;
+      if (checkbox.checked) {
+        separatorOptions.classList.remove('hidden');
+      } else {
+        separatorOptions.classList.add('hidden');
+      }
+    }
+  }
+});
 
 export async function combineToSinglePage() {
+  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
+  const orientation = document.getElementById('combine-orientation').value;
   // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
   const spacing = parseInt(document.getElementById('page-spacing').value) || 0;
   // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
   const backgroundColorHex = document.getElementById('background-color').value;
   // @ts-expect-error TS(2339) FIXME: Property 'checked' does not exist on type 'HTMLEle... Remove this comment to see the full error message
   const addSeparator = document.getElementById('add-separator').checked;
+  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
+  const separatorThickness = parseFloat(document.getElementById('separator-thickness').value) || 0.5;
+  // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
+  const separatorColorHex = document.getElementById('separator-color').value;
+
   const backgroundColor = hexToRgb(backgroundColorHex);
+  const separatorColor = hexToRgb(separatorColorHex);
 
   showLoader('Combining pages...');
   try {
     const sourceDoc = state.pdfDoc;
     const newDoc = await PDFLibDocument.create();
-    const sourcePages = sourceDoc.getPages();
 
+    const pdfBytes = await sourceDoc.save();
+    const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
+
+    const sourcePages = sourceDoc.getPages();
     let maxWidth = 0;
+    let maxHeight = 0;
+    let totalWidth = 0;
     let totalHeight = 0;
+
     sourcePages.forEach((page: any) => {
       const { width, height } = page.getSize();
       if (width > maxWidth) maxWidth = width;
+      if (height > maxHeight) maxHeight = height;
+      totalWidth += width;
       totalHeight += height;
     });
-    totalHeight += Math.max(0, sourcePages.length - 1) * spacing;
 
-    const newPage = newDoc.addPage([maxWidth, totalHeight]);
+    let finalWidth, finalHeight;
+    if (orientation === 'horizontal') {
+      finalWidth = totalWidth + Math.max(0, sourcePages.length - 1) * spacing;
+      finalHeight = maxHeight;
+    } else {
+      finalWidth = maxWidth;
+      finalHeight = totalHeight + Math.max(0, sourcePages.length - 1) * spacing;
+    }
+
+    const newPage = newDoc.addPage([finalWidth, finalHeight]);
 
     if (backgroundColorHex.toUpperCase() !== '#FFFFFF') {
       newPage.drawRectangle({
         x: 0,
         y: 0,
-        width: maxWidth,
-        height: totalHeight,
+        width: finalWidth,
+        height: finalHeight,
         color: rgb(backgroundColor.r, backgroundColor.g, backgroundColor.b),
       });
     }
 
-    let currentY = totalHeight;
+    let currentX = 0;
+    let currentY = finalHeight;
+
     for (let i = 0; i < sourcePages.length; i++) {
       const sourcePage = sourcePages[i];
       const { width, height } = sourcePage.getSize();
-      const embeddedPage = await newDoc.embedPage(sourcePage);
 
-      currentY -= height;
-      const x = (maxWidth - width) / 2;
+      try {
+        const page = await pdfjsDoc.getPage(i + 1);
+        const scale = 2.0;
+        const viewport = page.getViewport({ scale });
 
-      newPage.drawPage(embeddedPage, { x, y: currentY, width, height });
+        const canvas = document.createElement('canvas');
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const context = canvas.getContext('2d')!;
 
-      if (addSeparator && i < sourcePages.length - 1) {
-        const lineY = currentY - spacing / 2;
-        newPage.drawLine({
-          start: { x: 0, y: lineY },
-          end: { x: maxWidth, y: lineY },
-          thickness: 0.5,
-          color: rgb(0.8, 0.8, 0.8),
-        });
+        await page.render({
+          canvasContext: context,
+          viewport,
+          canvas
+        }).promise;
+
+        const pngDataUrl = canvas.toDataURL('image/png');
+        const pngImage = await newDoc.embedPng(pngDataUrl);
+
+        if (orientation === 'horizontal') {
+          const y = (finalHeight - height) / 2;
+          newPage.drawImage(pngImage, { x: currentX, y, width, height });
+        } else {
+          // Vertical layout: stack top to bottom
+          currentY -= height;
+          const x = (finalWidth - width) / 2; // Center horizontally
+          newPage.drawImage(pngImage, { x, y: currentY, width, height });
+        }
+      } catch (renderError) {
+        console.warn(`Failed to render page ${i + 1} with PDF.js, trying fallback method:`, renderError);
+
+        // Fallback: try to copy and embed the page directly
+        try {
+          const [copiedPage] = await newDoc.copyPages(sourceDoc, [i]);
+
+          if (orientation === 'horizontal') {
+            const y = (finalHeight - height) / 2;
+            const embeddedPage = await newDoc.embedPage(copiedPage);
+            newPage.drawPage(embeddedPage, { x: currentX, y, width, height });
+          } else {
+            currentY -= height;
+            const x = (finalWidth - width) / 2;
+            const embeddedPage = await newDoc.embedPage(copiedPage);
+            newPage.drawPage(embeddedPage, { x, y: currentY, width, height });
+          }
+        } catch (embedError) {
+          console.error(`Failed to process page ${i + 1}:`, embedError);
+
+          if (orientation === 'horizontal') {
+            const y = (finalHeight - height) / 2;
+            newPage.drawRectangle({
+              x: currentX,
+              y,
+              width,
+              height,
+              borderColor: rgb(0.8, 0, 0),
+              borderWidth: 2,
+            });
+
+            newPage.drawText(`Page ${i + 1} could not be rendered`, {
+              x: currentX + 10,
+              y: y + height / 2,
+              size: 12,
+              color: rgb(0.8, 0, 0),
+            });
+          } else {
+            currentY -= height;
+            const x = (finalWidth - width) / 2;
+            newPage.drawRectangle({
+              x,
+              y: currentY,
+              width,
+              height,
+              borderColor: rgb(0.8, 0, 0),
+              borderWidth: 2,
+            });
+
+            newPage.drawText(`Page ${i + 1} could not be rendered`, {
+              x: x + 10,
+              y: currentY + height / 2,
+              size: 12,
+              color: rgb(0.8, 0, 0),
+            });
+          }
+        }
       }
 
-      currentY -= spacing;
+      // Draw separator line
+      if (addSeparator && i < sourcePages.length - 1) {
+        if (orientation === 'horizontal') {
+          const lineX = currentX + width + spacing / 2;
+          newPage.drawLine({
+            start: { x: lineX, y: 0 },
+            end: { x: lineX, y: finalHeight },
+            thickness: separatorThickness,
+            color: rgb(separatorColor.r, separatorColor.g, separatorColor.b),
+          });
+          currentX += width + spacing;
+        } else {
+          const lineY = currentY - spacing / 2;
+          newPage.drawLine({
+            start: { x: 0, y: lineY },
+            end: { x: finalWidth, y: lineY },
+            thickness: separatorThickness,
+            color: rgb(separatorColor.r, separatorColor.g, separatorColor.b),
+          });
+          currentY -= spacing;
+        }
+      } else {
+        if (orientation === 'horizontal') {
+          currentX += width + spacing;
+        } else {
+          currentY -= spacing;
+        }
+      }
     }
 
     const newPdfBytes = await newDoc.save();
diff --git a/src/js/logic/compare-pdfs.ts b/src/js/logic/compare-pdfs.ts
index 0f283b8..e81e480 100644
--- a/src/js/logic/compare-pdfs.ts
+++ b/src/js/logic/compare-pdfs.ts
@@ -1,6 +1,10 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { readFileAsArrayBuffer } from '../utils/helpers.js';
+import { readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { icons, createIcons } from 'lucide';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 const state = {
   pdfDoc1: null,
@@ -122,8 +126,7 @@ async function setupFileInput(inputId: any, docKey: any, displayId: any) {
     try {
       showLoader(`Loading ${file.name}...`);
       const pdfBytes = await readFileAsArrayBuffer(file);
-      // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-      state[docKey] = await pdfjsLib.getDocument(pdfBytes).promise;
+      state[docKey] = await getPDFDocument(pdfBytes).promise;
 
       if (state.pdfDoc1 && state.pdfDoc2) {
         document.getElementById('compare-viewer').classList.remove('hidden');
diff --git a/src/js/logic/compress.ts b/src/js/logic/compress.ts
index 66d09d8..2827189 100644
--- a/src/js/logic/compress.ts
+++ b/src/js/logic/compress.ts
@@ -3,12 +3,14 @@ import {
   downloadFile,
   readFileAsArrayBuffer,
   formatBytes,
+  getPDFDocument,
 } from '../utils/helpers.js';
 import { state } from '../state.js';
 import * as pdfjsLib from 'pdfjs-dist';
-
 import { PDFDocument, PDFName, PDFDict, PDFStream, PDFNumber } from 'pdf-lib';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 function dataUrlToBytes(dataUrl: any) {
   const base64 = dataUrl.split(',')[1];
   const binaryString = atob(base64);
@@ -70,8 +72,8 @@ async function performSmartCompression(arrayBuffer: any, settings: any) {
         const bitsPerComponent =
           stream.dict.get(PDFName.of('BitsPerComponent')) instanceof PDFNumber
             ? (
-                stream.dict.get(PDFName.of('BitsPerComponent')) as PDFNumber
-              ).asNumber()
+              stream.dict.get(PDFName.of('BitsPerComponent')) as PDFNumber
+            ).asNumber()
             : 8;
 
         if (width > 0 && height > 0) {
@@ -183,12 +185,7 @@ async function performSmartCompression(arrayBuffer: any, settings: any) {
 }
 
 async function performLegacyCompression(arrayBuffer: any, settings: any) {
-  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-    'pdfjs-dist/build/pdf.worker.min.mjs',
-    import.meta.url
-  ).toString();
-
-  const pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+  const pdfJsDoc = await getPDFDocument({ data: arrayBuffer }).promise;
   const newPdfDoc = await PDFDocument.create();
 
   for (let i = 1; i <= pdfJsDoc.numPages; i++) {
@@ -324,13 +321,13 @@ export async function compress() {
         showAlert(
           'Compression Complete',
           `Method: **${usedMethod}**. ` +
-            `File size reduced from ${originalSize} to ${compressedSize} (Saved ${savingsPercent}%).`
+          `File size reduced from ${originalSize} to ${compressedSize} (Saved ${savingsPercent}%).`
         );
       } else {
         showAlert(
           'Compression Finished',
           `Method: **${usedMethod}**. ` +
-            `Could not reduce file size. Original: ${originalSize}, New: ${compressedSize}.`,
+          `Could not reduce file size. Original: ${originalSize}, New: ${compressedSize}.`,
           // @ts-expect-error TS(2554) FIXME: Expected 2 arguments, but got 3.
           'warning'
         );
@@ -384,13 +381,13 @@ export async function compress() {
         showAlert(
           'Compression Complete',
           `Compressed ${state.files.length} PDF(s). ` +
-            `Total size reduced from ${formatBytes(totalOriginalSize)} to ${formatBytes(totalCompressedSize)} (Saved ${totalSavingsPercent}%).`
+          `Total size reduced from ${formatBytes(totalOriginalSize)} to ${formatBytes(totalCompressedSize)} (Saved ${totalSavingsPercent}%).`
         );
       } else {
         showAlert(
           'Compression Finished',
           `Compressed ${state.files.length} PDF(s). ` +
-            `Total size: ${formatBytes(totalCompressedSize)}.`
+          `Total size: ${formatBytes(totalCompressedSize)}.`
         );
       }
 
diff --git a/src/js/logic/cropper.ts b/src/js/logic/cropper.ts
index 32047f3..f8d5661 100644
--- a/src/js/logic/cropper.ts
+++ b/src/js/logic/cropper.ts
@@ -1,10 +1,12 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import Cropper from 'cropperjs';
 import * as pdfjsLib from 'pdfjs-dist';
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 // --- Global State for the Cropper Tool ---
 const cropperState = {
   pdfDoc: null,
@@ -129,45 +131,44 @@ function enableControls() {
  */
 async function performMetadataCrop(pdfToModify: any, cropData: any) {
   for (const pageNum in cropData) {
-    // @ts-expect-error TS(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
-    const page = pdfToModify.getPages()[pageNum - 1];
-    const { width: pageWidth, height: pageHeight } = page.getSize();
-    const rotation = page.getRotation().angle;
+    const pdfJsPage = await cropperState.pdfDoc.getPage(Number(pageNum));
+    const viewport = pdfJsPage.getViewport({ scale: 1 });
+
     const crop = cropData[pageNum];
 
-    const visualPdfWidth = pageWidth * crop.width;
-    const visualPdfHeight = pageHeight * crop.height;
-    const visualPdfX = pageWidth * crop.x;
-    const visualPdfY = pageHeight * crop.y;
+    // Man I hate doing math
+    // Calculate visual crop rectangle in viewport pixels
+    const cropX = viewport.width * crop.x;
+    const cropY = viewport.height * crop.y;
+    const cropW = viewport.width * crop.width;
+    const cropH = viewport.height * crop.height;
 
-    let finalX, finalY, finalWidth, finalHeight;
-    switch (rotation) {
-      case 90:
-        finalX = visualPdfY;
-        finalY = pageWidth - visualPdfX - visualPdfWidth;
-        finalWidth = visualPdfHeight;
-        finalHeight = visualPdfWidth;
-        break;
-      case 180:
-        finalX = pageWidth - visualPdfX - visualPdfWidth;
-        finalY = pageHeight - visualPdfY - visualPdfHeight;
-        finalWidth = visualPdfWidth;
-        finalHeight = visualPdfHeight;
-        break;
-      case 270:
-        finalX = pageHeight - visualPdfY - visualPdfHeight;
-        finalY = visualPdfX;
-        finalWidth = visualPdfHeight;
-        finalHeight = visualPdfWidth;
-        break;
-      default:
-        finalX = visualPdfX;
-        finalY = pageHeight - visualPdfY - visualPdfHeight;
-        finalWidth = visualPdfWidth;
-        finalHeight = visualPdfHeight;
-        break;
-    }
-    page.setCropBox(finalX, finalY, finalWidth, finalHeight);
+    // Define the 4 corners of the crop rectangle in visual coordinates (Top-Left origin)
+    const visualCorners = [
+      { x: cropX, y: cropY },                   // TL
+      { x: cropX + cropW, y: cropY },           // TR
+      { x: cropX + cropW, y: cropY + cropH },   // BR
+      { x: cropX, y: cropY + cropH },           // BL
+    ];
+
+    // This handles rotation, media box offsets, and coordinate system flips automatically
+    const pdfCorners = visualCorners.map(p => {
+      return viewport.convertToPdfPoint(p.x, p.y);
+    });
+
+    // Find the bounding box of the converted points in PDF coordinates
+    // convertToPdfPoint returns [x, y] arrays
+    const pdfXs = pdfCorners.map(p => p[0]);
+    const pdfYs = pdfCorners.map(p => p[1]);
+
+    const minX = Math.min(...pdfXs);
+    const maxX = Math.max(...pdfXs);
+    const minY = Math.min(...pdfYs);
+    const maxY = Math.max(...pdfYs);
+
+    // @ts-expect-error TS(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
+    const page = pdfToModify.getPages()[pageNum - 1];
+    page.setCropBox(minX, minY, maxX - minX, maxY - minY);
   }
 }
 
@@ -242,107 +243,104 @@ export async function setupCropperTool() {
   if (state.files.length === 0) return;
 
   // Clear pageCrops on new file upload
-  cropperState.pageCrops = {};
-
-  const arrayBuffer = await readFileAsArrayBuffer(state.files[0]);
-  cropperState.originalPdfBytes = arrayBuffer;
-  const arrayBufferForPdfJs = (arrayBuffer as ArrayBuffer).slice(0);
-  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-    'pdfjs-dist/build/pdf.worker.min.mjs',
-    import.meta.url
-  ).toString();
-
   try {
-    const loadingTask = pdfjsLib.getDocument({ data: arrayBufferForPdfJs });
+    // Clear pageCrops on new file upload
+    cropperState.pageCrops = {};
+
+    const arrayBuffer = await readFileAsArrayBuffer(state.files[0]);
+    cropperState.originalPdfBytes = arrayBuffer;
+    const arrayBufferForPdfJs = (arrayBuffer as ArrayBuffer).slice(0);
+    const loadingTask = getPDFDocument({ data: arrayBufferForPdfJs });
 
     cropperState.pdfDoc = await loadingTask.promise;
     cropperState.currentPageNum = 1;
 
     await displayPageAsImage(cropperState.currentPageNum);
-
-    document
-      .getElementById('prev-page')
-      .addEventListener('click', () => changePage(-1));
-    document
-      .getElementById('next-page')
-      .addEventListener('click', () => changePage(1));
-
-    document
-      .getElementById('crop-button')
-      .addEventListener('click', async () => {
-        // Get the last known crop from the active page before processing
-        saveCurrentCrop();
-
-        const isDestructive = (
-          document.getElementById('destructive-crop-toggle') as HTMLInputElement
-        ).checked;
-        const isApplyToAll = (
-          document.getElementById('apply-to-all-toggle') as HTMLInputElement
-        ).checked;
-
-        let finalCropData = {};
-        if (isApplyToAll) {
-          const currentCrop =
-            cropperState.pageCrops[cropperState.currentPageNum];
-          if (!currentCrop) {
-            showAlert('No Crop Area', 'Please select an area to crop first.');
-            return;
-          }
-          // Apply the active page's crop to all pages
-          for (let i = 1; i <= cropperState.pdfDoc.numPages; i++) {
-            finalCropData[i] = currentCrop;
-          }
-        } else {
-          // If not applying to all, only process pages with saved crops
-          finalCropData = Object.keys(cropperState.pageCrops).reduce(
-            (obj, key) => {
-              obj[key] = cropperState.pageCrops[key];
-              return obj;
-            },
-            {}
-          );
-        }
-
-        if (Object.keys(finalCropData).length === 0) {
-          showAlert(
-            'No Crop Area',
-            'Please select an area on at least one page to crop.'
-          );
-          return;
-        }
-
-        showLoader('Applying crop...');
-
-        try {
-          let finalPdfBytes;
-          if (isDestructive) {
-            const newPdfDoc = await performFlatteningCrop(finalCropData);
-            finalPdfBytes = await newPdfDoc.save();
-          } else {
-            const pdfToModify = await PDFLibDocument.load(
-              cropperState.originalPdfBytes
-            );
-            await performMetadataCrop(pdfToModify, finalCropData);
-            finalPdfBytes = await pdfToModify.save();
-          }
-
-          const fileName = isDestructive
-            ? 'flattened_crop.pdf'
-            : 'standard_crop.pdf';
-          downloadFile(
-            new Blob([finalPdfBytes], { type: 'application/pdf' }),
-            fileName
-          );
-          showAlert('Success', 'Crop complete! Your download has started.');
-        } catch (e) {
-          console.error(e);
-          showAlert('Error', 'An error occurred during cropping.');
-        } finally {
-          hideLoader();
-        }
-      });
   } catch (error) {
     console.error('Error setting up cropper tool:', error);
     showAlert('Error', 'Failed to load PDF for cropping.');
   }
+
+  document
+    .getElementById('prev-page')
+    .addEventListener('click', () => changePage(-1));
+  document
+    .getElementById('next-page')
+    .addEventListener('click', () => changePage(1));
+
+  document
+    .getElementById('crop-button')
+    .addEventListener('click', async () => {
+      // Get the last known crop from the active page before processing
+      saveCurrentCrop();
+
+      const isDestructive = (
+        document.getElementById('destructive-crop-toggle') as HTMLInputElement
+      ).checked;
+      const isApplyToAll = (
+        document.getElementById('apply-to-all-toggle') as HTMLInputElement
+      ).checked;
+
+      let finalCropData = {};
+      if (isApplyToAll) {
+        const currentCrop =
+          cropperState.pageCrops[cropperState.currentPageNum];
+        if (!currentCrop) {
+          showAlert('No Crop Area', 'Please select an area to crop first.');
+          return;
+        }
+        // Apply the active page's crop to all pages
+        for (let i = 1; i <= cropperState.pdfDoc.numPages; i++) {
+          finalCropData[i] = currentCrop;
+        }
+      } else {
+        // If not applying to all, only process pages with saved crops
+        finalCropData = Object.keys(cropperState.pageCrops).reduce(
+          (obj, key) => {
+            obj[key] = cropperState.pageCrops[key];
+            return obj;
+          },
+          {}
+        );
+      }
+
+      if (Object.keys(finalCropData).length === 0) {
+        showAlert(
+          'No Crop Area',
+          'Please select an area on at least one page to crop.'
+        );
+        return;
+      }
+
+      showLoader('Applying crop...');
+
+      try {
+        let finalPdfBytes;
+        if (isDestructive) {
+          const newPdfDoc = await performFlatteningCrop(finalCropData);
+          finalPdfBytes = await newPdfDoc.save();
+        } else {
+          const pdfToModify = await PDFLibDocument.load(
+            cropperState.originalPdfBytes
+          );
+          await performMetadataCrop(pdfToModify, finalCropData);
+          finalPdfBytes = await pdfToModify.save();
+        }
+
+        const fileName = isDestructive
+          ? 'flattened_crop.pdf'
+          : 'standard_crop.pdf';
+        downloadFile(
+          new Blob([finalPdfBytes], { type: 'application/pdf' }),
+          fileName
+        );
+        showAlert('Success', 'Crop complete! Your download has started.');
+      } catch (e) {
+        console.error(e);
+        showAlert('Error', 'An error occurred during cropping.');
+      } finally {
+        hideLoader();
+      }
+    });
+
 }
diff --git a/src/js/logic/duplicate-organize.ts b/src/js/logic/duplicate-organize.ts
index 66d87f9..fe516e8 100644
--- a/src/js/logic/duplicate-organize.ts
+++ b/src/js/logic/duplicate-organize.ts
@@ -1,10 +1,13 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
 import Sortable from 'sortablejs';
 import { icons, createIcons } from 'lucide';
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
 const duplicateOrganizeState = {
   sortableInstances: {},
@@ -88,8 +91,7 @@ export async function renderDuplicateOrganizeThumbnails() {
 
   showLoader('Rendering page previews...');
   const pdfData = await state.pdfDoc.save();
-  // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-  const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+  const pdfjsDoc = await getPDFDocument({ data: pdfData }).promise;
 
   grid.textContent = '';
 
@@ -191,7 +193,7 @@ export async function processAndSave() {
     }
 
     const newPdfDoc = await PDFLibDocument.create();
-    
+
     const totalPages = state.pdfDoc.getPageCount();
     const invalidIndices = finalIndices.filter(i => i >= totalPages);
     if (invalidIndices.length > 0) {
diff --git a/src/js/logic/form-creator.ts b/src/js/logic/form-creator.ts
new file mode 100644
index 0000000..f16d538
--- /dev/null
+++ b/src/js/logic/form-creator.ts
@@ -0,0 +1,2040 @@
+import { PDFDocument, StandardFonts, rgb, TextAlignment, PDFName, PDFString, PageSizes, PDFBool, PDFDict, PDFArray } from 'pdf-lib'
+import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js'
+import { downloadFile, hexToRgb, getPDFDocument } from '../utils/helpers.js'
+import { createIcons, icons } from 'lucide'
+import * as pdfjsLib from 'pdfjs-dist'
+
+// Initialize PDF.js worker
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString()
+
+interface FormField {
+    id: string
+    type: 'text' | 'checkbox' | 'radio' | 'dropdown' | 'optionlist' | 'button' | 'signature' | 'date' | 'image'
+    x: number
+    y: number
+    width: number
+    height: number
+    name: string
+    defaultValue: string
+    fontSize: number
+    alignment: 'left' | 'center' | 'right'
+    textColor: string
+    required: boolean
+    readOnly: boolean
+    tooltip: string
+    combCells: number
+    maxLength: number
+    options?: string[]
+    checked?: boolean
+    exportValue?: string
+    groupName?: string
+    label?: string
+    pageIndex: number
+    action?: 'none' | 'reset' | 'print' | 'url' | 'js' | 'showHide'
+    actionUrl?: string
+    jsScript?: string
+    targetFieldName?: string
+    visibilityAction?: 'show' | 'hide' | 'toggle'
+    dateFormat?: string
+    multiline?: boolean
+}
+
+interface PageData {
+    index: number
+    width: number
+    height: number
+    pdfPageData?: string
+}
+
+let fields: FormField[] = []
+let selectedField: FormField | null = null
+let fieldCounter = 0
+let draggedElement: HTMLElement | null = null
+let offsetX = 0
+let offsetY = 0
+
+// Multi-page state
+let pages: PageData[] = []
+let currentPageIndex = 0
+let uploadedPdfDoc: PDFDocument | null = null
+let pageSize: { width: number; height: number } = { width: 612, height: 792 }
+let currentScale = 1.333
+
+// Resize state
+let resizing = false
+let resizeField: FormField | null = null
+let resizePos: string | null = null
+let startX = 0
+let startY = 0
+let startWidth = 0
+let startHeight = 0
+let startLeft = 0
+let startTop = 0
+
+let selectedToolType: string | null = null
+
+const canvas = document.getElementById('pdfCanvas') as HTMLDivElement
+const propertiesPanel = document.getElementById('propertiesPanel') as HTMLDivElement
+const fieldCountDisplay = document.getElementById('fieldCount') as HTMLSpanElement
+const uploadArea = document.getElementById('upload-area') as HTMLDivElement
+const toolContainer = document.getElementById('tool-container') as HTMLDivElement
+const dropZone = document.getElementById('dropZone') as HTMLDivElement
+const pdfFileInput = document.getElementById('pdfFileInput') as HTMLInputElement
+const blankPdfBtn = document.getElementById('blankPdfBtn') as HTMLButtonElement
+const pdfUploadInput = document.getElementById('pdfUploadInput') as HTMLInputElement
+const pageSizeSelector = document.getElementById('pageSizeSelector') as HTMLDivElement
+const pageSizeSelect = document.getElementById('pageSizeSelect') as HTMLSelectElement
+const customDimensionsInput = document.getElementById('customDimensionsInput') as HTMLDivElement
+const customWidth = document.getElementById('customWidth') as HTMLInputElement
+const customHeight = document.getElementById('customHeight') as HTMLInputElement
+const confirmBlankBtn = document.getElementById('confirmBlankBtn') as HTMLButtonElement
+const pageIndicator = document.getElementById('pageIndicator') as HTMLSpanElement
+const prevPageBtn = document.getElementById('prevPageBtn') as HTMLButtonElement
+const nextPageBtn = document.getElementById('nextPageBtn') as HTMLButtonElement
+const addPageBtn = document.getElementById('addPageBtn') as HTMLButtonElement
+const resetBtn = document.getElementById('resetBtn') as HTMLButtonElement
+const downloadBtn = document.getElementById('downloadBtn') as HTMLButtonElement
+const backToToolsBtn = document.getElementById('back-to-tools') as HTMLButtonElement | null
+
+// Tool item interactions
+const toolItems = document.querySelectorAll('.tool-item')
+toolItems.forEach(item => {
+    // Drag from toolbar
+    item.addEventListener('dragstart', (e) => {
+        if (e instanceof DragEvent && e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'copy'
+            const type = (item as HTMLElement).dataset.type || 'text'
+            e.dataTransfer.setData('text/plain', type)
+        }
+    })
+
+    // Click to select tool for placement
+    item.addEventListener('click', () => {
+        const type = (item as HTMLElement).dataset.type || 'text'
+
+        // Toggle selection
+        if (selectedToolType === type) {
+            // Deselect
+            selectedToolType = null
+            item.classList.remove('ring-2', 'ring-indigo-400', 'bg-indigo-600')
+            canvas.style.cursor = 'default'
+        } else {
+            // Deselect previous tool
+            if (selectedToolType) {
+                toolItems.forEach(t => t.classList.remove('ring-2', 'ring-indigo-400', 'bg-indigo-600'))
+            }
+            // Select new tool
+            selectedToolType = type
+            item.classList.add('ring-2', 'ring-indigo-400', 'bg-indigo-600')
+            canvas.style.cursor = 'crosshair'
+        }
+    })
+
+    // Touch events for mobile drag
+    let touchStartX = 0
+    let touchStartY = 0
+    let isTouchDragging = false
+
+    item.addEventListener('touchstart', (e) => {
+        const touch = e.touches[0]
+        touchStartX = touch.clientX
+        touchStartY = touch.clientY
+        isTouchDragging = false
+    })
+
+    item.addEventListener('touchmove', (e) => {
+        e.preventDefault() // Prevent scrolling while dragging
+        const touch = e.touches[0]
+        const moveX = Math.abs(touch.clientX - touchStartX)
+        const moveY = Math.abs(touch.clientY - touchStartY)
+
+        // If moved more than 10px, it's a drag not a click
+        if (moveX > 10 || moveY > 10) {
+            isTouchDragging = true
+        }
+    })
+
+    item.addEventListener('touchend', (e) => {
+        e.preventDefault()
+        if (!isTouchDragging) {
+            // It was a tap, treat as click
+            (item as HTMLElement).click()
+            return
+        }
+
+        // It was a drag, place field at touch end position
+        const touch = e.changedTouches[0]
+        const canvasRect = canvas.getBoundingClientRect()
+
+        // Check if touch ended on canvas
+        if (touch.clientX >= canvasRect.left && touch.clientX <= canvasRect.right &&
+            touch.clientY >= canvasRect.top && touch.clientY <= canvasRect.bottom) {
+            const x = touch.clientX - canvasRect.left - 75
+            const y = touch.clientY - canvasRect.top - 15
+            const type = (item as HTMLElement).dataset.type || 'text'
+            createField(type as any, x, y)
+        }
+    })
+})
+
+// Canvas drop zone
+canvas.addEventListener('dragover', (e) => {
+    e.preventDefault()
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'copy'
+    }
+})
+
+canvas.addEventListener('drop', (e) => {
+    e.preventDefault()
+    const rect = canvas.getBoundingClientRect()
+    const x = e.clientX - rect.left - 75 // Center the field on drop point
+    const y = e.clientY - rect.top - 15
+    const type = e.dataTransfer?.getData('text/plain') || 'text'
+    createField(type as any, x, y)
+})
+
+canvas.addEventListener('click', (e) => {
+    if (selectedToolType) {
+        const rect = canvas.getBoundingClientRect()
+        const x = e.clientX - rect.left - 75
+        const y = e.clientY - rect.top - 15
+        createField(selectedToolType as any, x, y)
+
+        toolItems.forEach(item => item.classList.remove('ring-2', 'ring-indigo-400', 'bg-indigo-600'))
+        selectedToolType = null
+        canvas.style.cursor = 'default'
+        return
+    }
+
+    // Existing deselect behavior (only if no tool is selected)
+    if (e.target === canvas) {
+        deselectAll()
+    }
+})
+
+function createField(type: FormField['type'], x: number, y: number): void {
+    fieldCounter++
+    const field: FormField = {
+        id: `field_${fieldCounter}`,
+        type: type,
+        x: Math.max(0, Math.min(x, 816 - 150)),
+        y: Math.max(0, Math.min(y, 1056 - 30)),
+        width: type === 'checkbox' || type === 'radio' ? 30 : 150,
+        height: type === 'checkbox' || type === 'radio' ? 30 : 30,
+        name: `${type.charAt(0).toUpperCase() + type.slice(1)}_${fieldCounter}`,
+        defaultValue: '',
+        fontSize: 12,
+        alignment: 'left',
+        textColor: '#000000',
+        required: false,
+        readOnly: false,
+        tooltip: '',
+        combCells: 0,
+        maxLength: 0,
+        options: type === 'dropdown' || type === 'optionlist' ? ['Option 1', 'Option 2', 'Option 3'] : undefined,
+        checked: type === 'radio' || type === 'checkbox' ? false : undefined,
+        exportValue: type === 'radio' || type === 'checkbox' ? 'Yes' : undefined,
+        groupName: type === 'radio' ? 'RadioGroup1' : undefined,
+        label: type === 'button' ? 'Button' : (type === 'image' ? 'Click to Upload Image' : undefined),
+        action: type === 'button' ? 'none' : undefined,
+        jsScript: type === 'button' ? 'app.alert("Hello World!");' : undefined,
+        visibilityAction: type === 'button' ? 'toggle' : undefined,
+        dateFormat: type === 'date' ? 'mm/dd/yyyy' : undefined,
+        pageIndex: currentPageIndex,
+        multiline: type === 'text' ? false : undefined
+    }
+
+    fields.push(field)
+    renderField(field)
+    updateFieldCount()
+}
+
+// Render field on canvas
+function renderField(field: FormField): void {
+    const fieldWrapper = document.createElement('div')
+    fieldWrapper.id = field.id
+    fieldWrapper.className = 'absolute cursor-move group' // Added group for hover effects
+    fieldWrapper.style.left = field.x + 'px'
+    fieldWrapper.style.top = field.y + 'px'
+    fieldWrapper.style.width = field.width + 'px'
+    fieldWrapper.style.overflow = 'visible'
+
+    // Create label - hidden by default, shown on group hover or selection
+    const label = document.createElement('div')
+    label.className = 'field-label absolute left-0 w-full text-xs font-semibold pointer-events-none select-none opacity-0 group-hover:opacity-100 transition-opacity'
+    label.style.bottom = '100%'
+    label.style.marginBottom = '4px'
+    label.style.color = '#374151'
+    label.style.fontSize = '11px'
+    label.style.lineHeight = '1'
+    label.style.whiteSpace = 'nowrap'
+    label.style.overflow = 'hidden'
+    label.style.textOverflow = 'ellipsis'
+    label.textContent = field.name
+
+    // Create input container - light border by default, dashed on hover
+    const fieldContainer = document.createElement('div')
+    fieldContainer.className =
+        'field-container relative border-2 border-indigo-200 group-hover:border-dashed group-hover:border-indigo-300 bg-indigo-50/30 rounded transition-all'
+    fieldContainer.style.width = '100%'
+    fieldContainer.style.height = field.height + 'px'
+
+    // Create content based on type
+    const contentEl = document.createElement('div')
+    contentEl.className = 'field-content w-full h-full flex items-center justify-center overflow-hidden'
+
+    if (field.type === 'text') {
+        contentEl.className = 'field-text w-full h-full flex items-center px-2 text-sm overflow-hidden'
+        contentEl.style.fontSize = field.fontSize + 'px'
+        contentEl.style.textAlign = field.alignment
+        contentEl.style.justifyContent = field.alignment === 'left' ? 'flex-start' : field.alignment === 'right' ? 'flex-end' : 'center'
+        contentEl.style.color = field.textColor
+        contentEl.style.whiteSpace = field.multiline ? 'pre-wrap' : 'nowrap'
+        contentEl.style.textOverflow = 'ellipsis'
+        contentEl.style.alignItems = field.multiline ? 'flex-start' : 'center'
+        contentEl.textContent = field.defaultValue
+
+        // Apply combing visual if enabled
+        if (field.combCells > 0) {
+            contentEl.style.backgroundImage = `repeating-linear-gradient(90deg, transparent, transparent calc((100% / ${field.combCells}) - 1px), #e5e7eb calc((100% / ${field.combCells}) - 1px), #e5e7eb calc(100% / ${field.combCells}))`
+            contentEl.style.fontFamily = 'monospace'
+            contentEl.style.letterSpacing = `calc(${field.width / field.combCells}px - 1ch)`
+            contentEl.style.paddingLeft = `calc((${field.width / field.combCells}px - 1ch) / 2)`
+            contentEl.style.overflow = 'hidden'
+            contentEl.style.textAlign = 'left'
+            contentEl.style.justifyContent = 'flex-start'
+        }
+    } else if (field.type === 'checkbox') {
+        contentEl.innerHTML = field.checked ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full p-1"><polyline points="20 6 9 17 4 12"></polyline></svg>' : ''
+    } else if (field.type === 'radio') {
+        fieldContainer.classList.add('rounded-full') // Make container round for radio
+        contentEl.innerHTML = field.checked ? '<div class="w-3/4 h-3/4 bg-black rounded-full"></div>' : ''
+    } else if (field.type === 'dropdown') {
+        contentEl.className = 'w-full h-full flex items-center px-2 text-sm text-black'
+        contentEl.style.backgroundColor = '#e6f0ff' // Light blue background like Firefox
+
+        // Show selected option or first option or placeholder
+        let displayText = 'Select...'
+        if (field.defaultValue && field.options && field.options.includes(field.defaultValue)) {
+            displayText = field.defaultValue
+        } else if (field.options && field.options.length > 0) {
+            displayText = field.options[0]
+        }
+        contentEl.textContent = displayText
+
+        const arrow = document.createElement('div')
+        arrow.className = 'absolute right-1 top-1/2 -translate-y-1/2'
+        arrow.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="m6 9 6 6 6-6"/></svg>'
+        fieldContainer.appendChild(arrow)
+
+    } else if (field.type === 'optionlist') {
+        contentEl.className = 'w-full h-full flex flex-col text-sm bg-white overflow-hidden border border-gray-300'
+        // Render options as a list
+        if (field.options && field.options.length > 0) {
+            field.options.forEach((opt, index) => {
+                const optEl = document.createElement('div')
+                optEl.className = 'px-1 w-full truncate'
+                optEl.textContent = opt
+
+                // Highlight selected option (defaultValue) or first one if no selection
+                const isSelected = field.defaultValue ? field.defaultValue === opt : index === 0
+
+                if (isSelected) {
+                    optEl.className += ' bg-blue-600 text-white'
+                } else {
+                    optEl.className += ' text-black'
+                }
+                contentEl.appendChild(optEl)
+            })
+        } else {
+            // Empty state
+            const optEl = document.createElement('div')
+            optEl.className = 'px-1 w-full text-black italic'
+            optEl.textContent = 'Item 1'
+            contentEl.appendChild(optEl)
+        }
+
+    } else if (field.type === 'button') {
+        contentEl.className = 'field-content w-full h-full flex items-center justify-center bg-gray-200 text-sm font-semibold'
+        contentEl.style.color = field.textColor || '#000000'
+        contentEl.textContent = field.label || 'Button'
+    } else if (field.type === 'signature') {
+        contentEl.className = 'w-full h-full flex items-center justify-center bg-gray-50 text-gray-400'
+        contentEl.innerHTML = '<div class="flex flex-col items-center"><i data-lucide="pen-tool" class="w-6 h-6 mb-1"></i><span class="text-[10px]">Sign Here</span></div>'
+        setTimeout(() => (window as any).lucide?.createIcons(), 0)
+    } else if (field.type === 'date') {
+        contentEl.className = 'w-full h-full flex items-center px-2 text-sm text-black bg-white border border-gray-300'
+        const textSpan = document.createElement('span')
+        textSpan.className = 'date-format-text'
+        textSpan.textContent = field.dateFormat || 'mm/dd/yyyy'
+        contentEl.appendChild(textSpan)
+        const icon = document.createElement('div')
+        icon.className = 'absolute right-2 top-1/2 -translate-y-1/2 text-gray-400'
+        icon.innerHTML = '<i data-lucide="calendar" class="w-4 h-4"></i>'
+        fieldContainer.appendChild(icon)
+        setTimeout(() => (window as any).lucide?.createIcons(), 0)
+    } else if (field.type === 'image') {
+        contentEl.className = 'w-full h-full flex items-center justify-center bg-gray-100 text-gray-500 border border-gray-300'
+        contentEl.innerHTML = `<div class="flex flex-col items-center text-center p-1"><i data-lucide="image" class="w-6 h-6 mb-1"></i><span class="text-[10px] leading-tight">${field.label || 'Click to Upload Image'}</span></div>`
+        setTimeout(() => (window as any).lucide?.createIcons(), 0)
+    }
+
+    fieldContainer.appendChild(contentEl)
+    fieldWrapper.appendChild(label)
+    fieldWrapper.appendChild(fieldContainer)
+
+    // Click to select
+    fieldWrapper.addEventListener('click', (e) => {
+        e.stopPropagation()
+        selectField(field)
+    })
+
+    // Drag to move
+    fieldWrapper.addEventListener('mousedown', (e) => {
+        // Don't start drag if clicking on a resize handle
+        if ((e.target as HTMLElement).classList.contains('resize-handle')) {
+            return
+        }
+        draggedElement = fieldWrapper
+        const rect = canvas.getBoundingClientRect()
+        offsetX = e.clientX - rect.left - field.x
+        offsetY = e.clientY - rect.top - field.y
+        selectField(field)
+        e.preventDefault()
+    })
+
+    // Touch events for moving fields
+    let touchMoveStarted = false
+    fieldWrapper.addEventListener('touchstart', (e) => {
+        if ((e.target as HTMLElement).classList.contains('resize-handle')) {
+            return
+        }
+        touchMoveStarted = false
+        const touch = e.touches[0]
+        const rect = canvas.getBoundingClientRect()
+        offsetX = touch.clientX - rect.left - field.x
+        offsetY = touch.clientY - rect.top - field.y
+        selectField(field)
+    }, { passive: true })
+
+    fieldWrapper.addEventListener('touchmove', (e) => {
+        e.preventDefault()
+        touchMoveStarted = true
+        const touch = e.touches[0]
+        const rect = canvas.getBoundingClientRect()
+        let newX = touch.clientX - rect.left - offsetX
+        let newY = touch.clientY - rect.top - offsetY
+
+        newX = Math.max(0, Math.min(newX, 816 - fieldWrapper.offsetWidth))
+        newY = Math.max(0, Math.min(newY, 1056 - fieldWrapper.offsetHeight))
+
+        fieldWrapper.style.left = newX + 'px'
+        fieldWrapper.style.top = newY + 'px'
+
+        field.x = newX
+        field.y = newY
+    })
+
+    fieldWrapper.addEventListener('touchend', () => {
+        touchMoveStarted = false
+    })
+
+    // Add resize handles to the container - hidden by default
+    const handles = ['nw', 'ne', 'sw', 'se', 'n', 's', 'e', 'w']
+    handles.forEach((pos) => {
+        const handle = document.createElement('div')
+        handle.className = `absolute w-2.5 h-2.5 bg-white border border-indigo-600 z-10 cursor-${pos}-resize resize-handle hidden` // Added hidden class
+        const positions: Record<string, string> = {
+            nw: 'top-0 left-0 -translate-x-1/2 -translate-y-1/2',
+            ne: 'top-0 right-0 translate-x-1/2 -translate-y-1/2',
+            sw: 'bottom-0 left-0 -translate-x-1/2 translate-y-1/2',
+            se: 'bottom-0 right-0 translate-x-1/2 translate-y-1/2',
+            n: 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2',
+            s: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+            e: 'top-1/2 right-0 translate-x-1/2 -translate-y-1/2',
+            w: 'top-1/2 left-0 -translate-x-1/2 -translate-y-1/2',
+        }
+        handle.className += ` ${positions[pos]}`
+        handle.dataset.position = pos
+
+        handle.addEventListener('mousedown', (e) => {
+            e.stopPropagation()
+            startResize(e, field, pos)
+        })
+
+        // Touch events for resize handles
+        handle.addEventListener('touchstart', (e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const touch = e.touches[0]
+            // Create a synthetic mouse event for startResize
+            const syntheticEvent = {
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                preventDefault: () => { }
+            } as MouseEvent
+            startResize(syntheticEvent, field, pos)
+        })
+
+        fieldContainer.appendChild(handle)
+    })
+
+    canvas.appendChild(fieldWrapper)
+}
+
+function startResize(e: MouseEvent, field: FormField, pos: string): void {
+    resizing = true
+    resizeField = field
+    resizePos = pos
+    startX = e.clientX
+    startY = e.clientY
+    startWidth = field.width
+    startHeight = field.height
+    startLeft = field.x
+    startTop = field.y
+    e.preventDefault()
+}
+
+// Mouse move for dragging and resizing
+document.addEventListener('mousemove', (e) => {
+    if (draggedElement && !resizing) {
+        const rect = canvas.getBoundingClientRect()
+        let newX = e.clientX - rect.left - offsetX
+        let newY = e.clientY - rect.top - offsetY
+
+        newX = Math.max(0, Math.min(newX, 816 - draggedElement.offsetWidth))
+        newY = Math.max(0, Math.min(newY, 1056 - draggedElement.offsetHeight))
+
+        draggedElement.style.left = newX + 'px'
+        draggedElement.style.top = newY + 'px'
+
+        const field = fields.find((f) => f.id === draggedElement!.id)
+        if (field) {
+            field.x = newX
+            field.y = newY
+        }
+    } else if (resizing && resizeField) {
+        const dx = e.clientX - startX
+        const dy = e.clientY - startY
+        const fieldWrapper = document.getElementById(resizeField.id)
+
+        if (resizePos!.includes('e')) {
+            resizeField.width = Math.max(50, startWidth + dx)
+        }
+        if (resizePos!.includes('w')) {
+            const newWidth = Math.max(50, startWidth - dx)
+            const widthDiff = startWidth - newWidth
+            resizeField.width = newWidth
+            resizeField.x = startLeft + widthDiff
+        }
+        if (resizePos!.includes('s')) {
+            resizeField.height = Math.max(20, startHeight + dy)
+        }
+        if (resizePos!.includes('n')) {
+            const newHeight = Math.max(20, startHeight - dy)
+            const heightDiff = startHeight - newHeight
+            resizeField.height = newHeight
+            resizeField.y = startTop + heightDiff
+        }
+
+        if (fieldWrapper) {
+            const container = fieldWrapper.querySelector('.field-container') as HTMLElement
+            fieldWrapper.style.width = resizeField.width + 'px'
+            fieldWrapper.style.left = resizeField.x + 'px'
+            fieldWrapper.style.top = resizeField.y + 'px'
+            if (container) {
+                container.style.height = resizeField.height + 'px'
+            }
+            // Update combing visuals on resize
+            if (resizeField.combCells > 0) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) {
+                    textEl.style.letterSpacing = `calc(${resizeField.width / resizeField.combCells}px - 1ch)`
+                    textEl.style.paddingLeft = `calc((${resizeField.width / resizeField.combCells}px - 1ch) / 2)`
+                }
+            }
+        }
+    }
+})
+
+document.addEventListener('mouseup', () => {
+    draggedElement = null
+    resizing = false
+    resizeField = null
+})
+
+// Touch move for dragging and resizing
+document.addEventListener('touchmove', (e) => {
+    const touch = e.touches[0]
+    if (resizing && resizeField) {
+        const dx = touch.clientX - startX
+        const dy = touch.clientY - startY
+        const fieldWrapper = document.getElementById(resizeField.id)
+
+        if (resizePos!.includes('e')) {
+            resizeField.width = Math.max(50, startWidth + dx)
+        }
+        if (resizePos!.includes('w')) {
+            const newWidth = Math.max(50, startWidth - dx)
+            const widthDiff = startWidth - newWidth
+            resizeField.width = newWidth
+            resizeField.x = startLeft + widthDiff
+        }
+        if (resizePos!.includes('s')) {
+            resizeField.height = Math.max(20, startHeight + dy)
+        }
+        if (resizePos!.includes('n')) {
+            const newHeight = Math.max(20, startHeight - dy)
+            const heightDiff = startHeight - newHeight
+            resizeField.height = newHeight
+            resizeField.y = startTop + heightDiff
+        }
+
+        if (fieldWrapper) {
+            const container = fieldWrapper.querySelector('.field-container') as HTMLElement
+            fieldWrapper.style.width = resizeField.width + 'px'
+            fieldWrapper.style.left = resizeField.x + 'px'
+            fieldWrapper.style.top = resizeField.y + 'px'
+            if (container) {
+                container.style.height = resizeField.height + 'px'
+            }
+            if (resizeField.combCells > 0) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) {
+                    textEl.style.letterSpacing = `calc(${resizeField.width / resizeField.combCells}px - 1ch)`
+                    textEl.style.paddingLeft = `calc((${resizeField.width / resizeField.combCells}px - 1ch) / 2)`
+                }
+            }
+        }
+    }
+}, { passive: false })
+
+document.addEventListener('touchend', () => {
+    resizing = false
+    resizeField = null
+})
+
+
+
+// Select field
+function selectField(field: FormField): void {
+    deselectAll()
+    selectedField = field
+    const fieldWrapper = document.getElementById(field.id)
+    if (fieldWrapper) {
+        const container = fieldWrapper.querySelector('.field-container') as HTMLElement
+        const label = fieldWrapper.querySelector('.field-label') as HTMLElement
+        const handles = fieldWrapper.querySelectorAll('.resize-handle')
+
+        if (container) {
+            // Remove hover classes and add selected classes
+            container.classList.remove('border-indigo-200', 'group-hover:border-dashed', 'group-hover:border-indigo-300')
+            container.classList.add('border-dashed', 'border-indigo-500', 'bg-indigo-50')
+        }
+
+        if (label) {
+            label.classList.remove('opacity-0', 'group-hover:opacity-100')
+            label.classList.add('opacity-100')
+        }
+
+        handles.forEach(handle => {
+            handle.classList.remove('hidden')
+        })
+    }
+    showProperties(field)
+}
+
+// Deselect all
+function deselectAll(): void {
+    if (selectedField) {
+        const fieldWrapper = document.getElementById(selectedField.id)
+        if (fieldWrapper) {
+            const container = fieldWrapper.querySelector('.field-container') as HTMLElement
+            const label = fieldWrapper.querySelector('.field-label') as HTMLElement
+            const handles = fieldWrapper.querySelectorAll('.resize-handle')
+
+            if (container) {
+                // Revert to default/hover state
+                container.classList.remove('border-dashed', 'border-indigo-500', 'bg-indigo-50')
+                container.classList.add('border-indigo-200', 'group-hover:border-dashed', 'group-hover:border-indigo-300')
+            }
+
+            if (label) {
+                label.classList.remove('opacity-100')
+                label.classList.add('opacity-0', 'group-hover:opacity-100')
+            }
+
+            handles.forEach(handle => {
+                handle.classList.add('hidden')
+            })
+        }
+        selectedField = null
+    }
+    hideProperties()
+}
+
+// Show properties panel
+function showProperties(field: FormField): void {
+    let specificProps = ''
+
+    if (field.type === 'text') {
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Value</label>
+            <input type="text" id="propValue" value="${field.defaultValue}" ${field.combCells > 0 ? `maxlength="${field.combCells}"` : field.maxLength > 0 ? `maxlength="${field.maxLength}"` : ''} class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Max Length (0 for unlimited)</label>
+            <input type="number" id="propMaxLength" value="${field.maxLength}" min="0" ${field.combCells > 0 ? 'disabled' : ''} class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Divide into boxes (0 to disable)</label>
+            <input type="number" id="propComb" value="${field.combCells}" min="0" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Font Size</label>
+            <input type="number" id="propFontSize" value="${field.fontSize}" min="8" max="72" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Text Color</label>
+            <input type="color" id="propTextColor" value="${field.textColor}" class="w-full border border-gray-500 rounded px-2 py-1 h-10">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Alignment</label>
+            <select id="propAlignment" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+            <option value="left" ${field.alignment === 'left' ? 'selected' : ''}>Left</option>
+            <option value="center" ${field.alignment === 'center' ? 'selected' : ''}>Center</option>
+            <option value="right" ${field.alignment === 'right' ? 'selected' : ''}>Right</option>
+            </select>
+        </div>
+        <div class="flex items-center justify-between bg-gray-600 p-2 rounded mt-2">
+            <label for="propMultiline" class="text-xs font-semibold text-gray-300">Multi-line</label>
+            <button id="propMultilineBtn" class="w-12 h-6 rounded-full transition-colors duration-200 focus:outline-none ${field.multiline ? 'bg-indigo-600' : 'bg-gray-500'} relative">
+                <span class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 ${field.multiline ? 'translate-x-6' : 'translate-x-0'}"></span>
+            </button>
+        </div>
+        `
+    } else if (field.type === 'checkbox') {
+        specificProps = `
+        <div class="flex items-center justify-between bg-gray-600 p-2 rounded">
+            <label for="propChecked" class="text-xs font-semibold text-gray-300">Checked State</label>
+            <button id="propCheckedBtn" class="w-12 h-6 rounded-full transition-colors duration-200 focus:outline-none ${field.checked ? 'bg-indigo-600' : 'bg-gray-500'} relative">
+                <span class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 ${field.checked ? 'translate-x-6' : 'translate-x-0'}"></span>
+            </button>
+        </div>
+        `
+    } else if (field.type === 'radio') {
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Group Name (Must be same for group)</label>
+            <input type="text" id="propGroupName" value="${field.groupName}" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Export Value</label>
+            <input type="text" id="propExportValue" value="${field.exportValue}" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div class="flex items-center justify-between bg-gray-600 p-2 rounded mt-2">
+            <label for="propChecked" class="text-xs font-semibold text-gray-300">Checked State</label>
+            <button id="propCheckedBtn" class="w-12 h-6 rounded-full transition-colors duration-200 focus:outline-none ${field.checked ? 'bg-indigo-600' : 'bg-gray-500'} relative">
+                <span class="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 ${field.checked ? 'translate-x-6' : 'translate-x-0'}"></span>
+            </button>
+        </div>
+        `
+    } else if (field.type === 'dropdown' || field.type === 'optionlist') {
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Options (One per line or comma separated)</label>
+            <textarea id="propOptions" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 h-24">${field.options?.join('\n')}</textarea>
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Selected Option</label>
+            <select id="propSelectedOption" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                <option value="">None</option>
+                ${field.options?.map(opt => `<option value="${opt}" ${field.defaultValue === opt ? 'selected' : ''}>${opt}</option>`).join('')}
+            </select>
+        </div>
+        <div class="text-xs text-gray-400 italic mt-2">
+            To actually fill or change the options, use our PDF Form Filler tool.
+        </div>
+        `
+    } else if (field.type === 'button') {
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Label</label>
+            <input type="text" id="propLabel" value="${field.label}" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Action</label>
+            <select id="propAction" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                <option value="none" ${field.action === 'none' ? 'selected' : ''}>None</option>
+                <option value="reset" ${field.action === 'reset' ? 'selected' : ''}>Reset Form</option>
+                <option value="print" ${field.action === 'print' ? 'selected' : ''}>Print Form</option>
+                <option value="url" ${field.action === 'url' ? 'selected' : ''}>Open URL</option>
+                <option value="js" ${field.action === 'js' ? 'selected' : ''}>Run Javascript</option>
+                <option value="showHide" ${field.action === 'showHide' ? 'selected' : ''}>Show/Hide Field</option>
+            </select>
+        </div>
+        <div id="propUrlContainer" class="${field.action === 'url' ? '' : 'hidden'}">
+            <label class="block text-xs font-semibold text-gray-300 mb-1">URL</label>
+            <input type="text" id="propActionUrl" value="${field.actionUrl || ''}" placeholder="https://example.com" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div id="propJsContainer" class="${field.action === 'js' ? '' : 'hidden'}">
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Javascript Code</label>
+            <textarea id="propJsScript" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 h-24 font-mono">${field.jsScript || ''}</textarea>
+        </div>
+        <div id="propShowHideContainer" class="${field.action === 'showHide' ? '' : 'hidden'}">
+            <div class="mb-2">
+                <label class="block text-xs font-semibold text-gray-300 mb-1">Target Field</label>
+                <select id="propTargetField" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                    <option value="">Select a field...</option>
+                    ${fields.filter(f => f.id !== field.id).map(f => `<option value="${f.name}" ${field.targetFieldName === f.name ? 'selected' : ''}>${f.name} (${f.type})</option>`).join('')}
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-semibold text-gray-300 mb-1">Visibility</label>
+                <select id="propVisibilityAction" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                    <option value="show" ${field.visibilityAction === 'show' ? 'selected' : ''}>Show</option>
+                    <option value="hide" ${field.visibilityAction === 'hide' ? 'selected' : ''}>Hide</option>
+                    <option value="toggle" ${field.visibilityAction === 'toggle' ? 'selected' : ''}>Toggle</option>
+                </select>
+            </div>
+        </div>
+        `
+    } else if (field.type === 'signature') {
+        specificProps = `
+        <div class="text-xs text-gray-400 italic mb-2">
+            Signature fields are AcroForm signature fields and would only be visible in an advanced PDF viewer.
+        </div>
+        `
+    } else if (field.type === 'date') {
+        const formats = ['mm/dd/yyyy', 'dd/mm/yyyy', 'mm/yy', 'dd/mm/yy', 'yyyy/mm/dd', 'mmm d, yyyy', 'd-mmm-yy', 'yy-mm-dd']
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Date Format</label>
+            <select id="propDateFormat" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                ${formats.map(f => `<option value="${f}" ${field.dateFormat === f ? 'selected' : ''}>${f}</option>`).join('')}
+            </select>
+        </div>
+        <div class="text-xs text-gray-400 italic mt-2">
+            The selected format will be enforced when the user types or picks a date.
+        </div>
+        <div class="bg-blue-900/30 border border-blue-700/50 rounded p-2 mt-2">
+            <p class="text-xs text-blue-200 flex gap-2">
+                <i data-lucide="info" class="w-4 h-4 flex-shrink-0"></i>
+                <span><strong>Browser Note:</strong> Firefox and Chrome may show their native date picker format during selection. The correct format will apply when you finish entering the date. This is normal browser behavior and not an issue.</span>
+            </p>
+        </div>
+        `
+    } else if (field.type === 'image') {
+        specificProps = `
+        <div>
+            <label class="block text-xs font-semibold text-gray-300 mb-1">Label / Prompt</label>
+            <input type="text" id="propLabel" value="${field.label}" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+        </div>
+        <div class="text-xs text-gray-400 italic mt-2">
+            Clicking this field in the PDF will open a file picker to upload an image.
+        </div>
+        `
+    }
+
+    propertiesPanel.innerHTML = `
+    <div class="space-y-3">
+      <div>
+        <label class="block text-xs font-semibold text-gray-300 mb-1">Field Name</label>
+        <input type="text" id="propName" value="${field.name}" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+      </div>
+      ${specificProps}
+      <div>
+        <label class="block text-xs font-semibold text-gray-300 mb-1">Tooltip / Help Text</label>
+        <input type="text" id="propTooltip" value="${field.tooltip}" placeholder="Description for screen readers" class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+      </div>
+      <div class="flex items-center">
+        <input type="checkbox" id="propRequired" ${field.required ? 'checked' : ''} class="mr-2">
+        <label for="propRequired" class="text-xs font-semibold text-gray-300">Required</label>
+      </div>
+      <div class="flex items-center">
+        <input type="checkbox" id="propReadOnly" ${field.readOnly ? 'checked' : ''} class="mr-2">
+        <label for="propReadOnly" class="text-xs font-semibold text-gray-300">Read Only</label>
+      </div>
+      <button id="deleteBtn" class="w-full bg-red-600 text-white py-2 rounded hover:bg-red-700 transition text-sm font-semibold">
+        Delete Field
+      </button>
+    </div>
+  `
+
+    // Common listeners
+    const propName = document.getElementById('propName') as HTMLInputElement
+    const propTooltip = document.getElementById('propTooltip') as HTMLInputElement
+    const propRequired = document.getElementById('propRequired') as HTMLInputElement
+    const propReadOnly = document.getElementById('propReadOnly') as HTMLInputElement
+    const deleteBtn = document.getElementById('deleteBtn') as HTMLButtonElement
+
+    propName.addEventListener('change', (e) => {
+        const newName = (e.target as HTMLInputElement).value.trim()
+
+        if (!newName) {
+            showModal('Invalid Name', 'Field name cannot be empty.', 'warning');
+            (e.target as HTMLInputElement).value = field.name
+            return
+        }
+
+        // Check for duplicate name
+        const isDuplicate = fields.some(f => f.id !== field.id && f.name === newName)
+
+        if (isDuplicate) {
+            showModal('Duplicate Name', `A field with the name "${newName}" already exists. Please choose a unique name.`, 'error');
+            (e.target as HTMLInputElement).value = field.name
+            return
+        }
+
+        field.name = newName
+        const fieldWrapper = document.getElementById(field.id)
+        if (fieldWrapper) {
+            const label = fieldWrapper.querySelector('.field-label') as HTMLElement
+            if (label) label.textContent = field.name
+        }
+    })
+
+    propTooltip.addEventListener('input', (e) => {
+        field.tooltip = (e.target as HTMLInputElement).value
+    })
+
+    propRequired.addEventListener('change', (e) => {
+        field.required = (e.target as HTMLInputElement).checked
+    })
+
+    propReadOnly.addEventListener('change', (e) => {
+        field.readOnly = (e.target as HTMLInputElement).checked
+    })
+
+    deleteBtn.addEventListener('click', () => {
+        deleteField(field)
+    })
+
+    // Specific listeners
+    if (field.type === 'text') {
+        const propValue = document.getElementById('propValue') as HTMLInputElement
+        const propMaxLength = document.getElementById('propMaxLength') as HTMLInputElement
+        const propComb = document.getElementById('propComb') as HTMLInputElement
+        const propFontSize = document.getElementById('propFontSize') as HTMLInputElement
+        const propTextColor = document.getElementById('propTextColor') as HTMLInputElement
+        const propAlignment = document.getElementById('propAlignment') as HTMLSelectElement
+
+        propValue.addEventListener('input', (e) => {
+            field.defaultValue = (e.target as HTMLInputElement).value
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) textEl.textContent = field.defaultValue
+            }
+        })
+
+        propMaxLength.addEventListener('input', (e) => {
+            const val = parseInt((e.target as HTMLInputElement).value)
+            field.maxLength = isNaN(val) ? 0 : Math.max(0, val)
+            if (field.maxLength > 0) {
+                propValue.maxLength = field.maxLength
+                if (field.defaultValue.length > field.maxLength) {
+                    field.defaultValue = field.defaultValue.substring(0, field.maxLength)
+                    propValue.value = field.defaultValue
+                    const fieldWrapper = document.getElementById(field.id)
+                    if (fieldWrapper) {
+                        const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                        if (textEl) textEl.textContent = field.defaultValue
+                    }
+                }
+            } else {
+                propValue.removeAttribute('maxLength')
+            }
+        })
+
+        propComb.addEventListener('input', (e) => {
+            const val = parseInt((e.target as HTMLInputElement).value)
+            field.combCells = isNaN(val) ? 0 : Math.max(0, val)
+
+            if (field.combCells > 0) {
+                propValue.maxLength = field.combCells
+                propMaxLength.value = field.combCells.toString()
+                propMaxLength.disabled = true
+                field.maxLength = field.combCells
+
+                if (field.defaultValue.length > field.combCells) {
+                    field.defaultValue = field.defaultValue.substring(0, field.combCells)
+                    propValue.value = field.defaultValue
+                }
+            } else {
+                propMaxLength.disabled = false
+                propValue.removeAttribute('maxLength')
+                if (field.maxLength > 0) {
+                    propValue.maxLength = field.maxLength
+                }
+            }
+
+            // Re-render field visual only, NOT the properties panel
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                // Update text content
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) {
+                    textEl.textContent = field.defaultValue
+                    if (field.combCells > 0) {
+                        textEl.style.backgroundImage = `repeating-linear-gradient(90deg, transparent, transparent calc((100% / ${field.combCells}) - 1px), #e5e7eb calc((100% / ${field.combCells}) - 1px), #e5e7eb calc(100% / ${field.combCells}))`
+                        textEl.style.fontFamily = 'monospace'
+                        textEl.style.letterSpacing = `calc(${field.width / field.combCells}px - 1ch)`
+                        textEl.style.paddingLeft = `calc((${field.width / field.combCells}px - 1ch) / 2)`
+                        textEl.style.overflow = 'hidden'
+                        textEl.style.textAlign = 'left'
+                        textEl.style.justifyContent = 'flex-start'
+                    } else {
+                        textEl.style.backgroundImage = 'none'
+                        textEl.style.fontFamily = 'inherit'
+                        textEl.style.letterSpacing = 'normal'
+                        textEl.style.textAlign = field.alignment
+                        textEl.style.justifyContent = field.alignment === 'left' ? 'flex-start' : field.alignment === 'right' ? 'flex-end' : 'center'
+                    }
+                }
+            }
+        })
+
+        propFontSize.addEventListener('input', (e) => {
+            field.fontSize = parseInt((e.target as HTMLInputElement).value)
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) textEl.style.fontSize = field.fontSize + 'px'
+            }
+        })
+
+        propTextColor.addEventListener('input', (e) => {
+            field.textColor = (e.target as HTMLInputElement).value
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) textEl.style.color = field.textColor
+            }
+        })
+
+        propAlignment.addEventListener('change', (e) => {
+            field.alignment = (e.target as HTMLSelectElement).value as 'left' | 'center' | 'right'
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                if (textEl) {
+                    textEl.style.textAlign = field.alignment
+                    textEl.style.justifyContent = field.alignment === 'left' ? 'flex-start' : field.alignment === 'right' ? 'flex-end' : 'center'
+                }
+            }
+        })
+
+        const propMultilineBtn = document.getElementById('propMultilineBtn') as HTMLButtonElement
+        if (propMultilineBtn) {
+            propMultilineBtn.addEventListener('click', () => {
+                field.multiline = !field.multiline
+
+                // Update Toggle Button UI
+                const span = propMultilineBtn.querySelector('span')
+                if (field.multiline) {
+                    propMultilineBtn.classList.remove('bg-gray-500')
+                    propMultilineBtn.classList.add('bg-indigo-600')
+                    span?.classList.remove('translate-x-0')
+                    span?.classList.add('translate-x-6')
+                } else {
+                    propMultilineBtn.classList.remove('bg-indigo-600')
+                    propMultilineBtn.classList.add('bg-gray-500')
+                    span?.classList.remove('translate-x-6')
+                    span?.classList.add('translate-x-0')
+                }
+
+                // Update Canvas UI
+                const fieldWrapper = document.getElementById(field.id)
+                if (fieldWrapper) {
+                    const textEl = fieldWrapper.querySelector('.field-text') as HTMLElement
+                    if (textEl) {
+                        if (field.multiline) {
+                            textEl.style.whiteSpace = 'pre-wrap'
+                            textEl.style.alignItems = 'flex-start'
+                            textEl.style.overflow = 'hidden'
+                        } else {
+                            textEl.style.whiteSpace = 'nowrap'
+                            textEl.style.alignItems = 'center'
+                            textEl.style.overflow = 'hidden'
+                        }
+                    }
+                }
+            })
+        }
+    } else if (field.type === 'checkbox' || field.type === 'radio') {
+        const propCheckedBtn = document.getElementById('propCheckedBtn') as HTMLButtonElement
+
+        propCheckedBtn.addEventListener('click', () => {
+            field.checked = !field.checked
+
+            // Update Toggle Button UI
+            const span = propCheckedBtn.querySelector('span')
+            if (field.checked) {
+                propCheckedBtn.classList.remove('bg-gray-500')
+                propCheckedBtn.classList.add('bg-indigo-600')
+                span?.classList.remove('translate-x-0')
+                span?.classList.add('translate-x-6')
+            } else {
+                propCheckedBtn.classList.remove('bg-indigo-600')
+                propCheckedBtn.classList.add('bg-gray-500')
+                span?.classList.remove('translate-x-6')
+                span?.classList.add('translate-x-0')
+            }
+
+            // Update Canvas UI
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const contentEl = fieldWrapper.querySelector('.field-content') as HTMLElement
+                if (contentEl) {
+                    if (field.type === 'checkbox') {
+                        contentEl.innerHTML = field.checked ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full p-1"><polyline points="20 6 9 17 4 12"></polyline></svg>' : ''
+                    } else {
+                        contentEl.innerHTML = field.checked ? '<div class="w-3/4 h-3/4 bg-black rounded-full"></div>' : ''
+                    }
+                }
+            }
+        })
+
+        if (field.type === 'radio') {
+            const propGroupName = document.getElementById('propGroupName') as HTMLInputElement
+            const propExportValue = document.getElementById('propExportValue') as HTMLInputElement
+
+            propGroupName.addEventListener('input', (e) => {
+                field.groupName = (e.target as HTMLInputElement).value
+            })
+            propExportValue.addEventListener('input', (e) => {
+                field.exportValue = (e.target as HTMLInputElement).value
+            })
+        }
+    } else if (field.type === 'dropdown' || field.type === 'optionlist') {
+        const propOptions = document.getElementById('propOptions') as HTMLTextAreaElement
+        propOptions.addEventListener('input', (e) => {
+            // We split by newline OR comma for the actual options array
+            const val = (e.target as HTMLTextAreaElement).value
+            field.options = val.split(/[\n,]/).map(s => s.trim()).filter(s => s.length > 0)
+
+            const propSelectedOption = document.getElementById('propSelectedOption') as HTMLSelectElement
+            if (propSelectedOption) {
+                const currentVal = field.defaultValue
+                propSelectedOption.innerHTML = '<option value="">None</option>' +
+                    field.options?.map(opt => `<option value="${opt}" ${currentVal === opt ? 'selected' : ''}>${opt}</option>`).join('')
+
+                if (currentVal && field.options && !field.options.includes(currentVal)) {
+                    field.defaultValue = ''
+                    propSelectedOption.value = ''
+                }
+            }
+
+            renderField(field)
+        })
+
+        const propSelectedOption = document.getElementById('propSelectedOption') as HTMLSelectElement
+        propSelectedOption.addEventListener('change', (e) => {
+            field.defaultValue = (e.target as HTMLSelectElement).value
+
+            // Update visual on canvas
+            renderField(field)
+        })
+    } else if (field.type === 'button') {
+        const propLabel = document.getElementById('propLabel') as HTMLInputElement
+        propLabel.addEventListener('input', (e) => {
+            field.label = (e.target as HTMLInputElement).value
+            const fieldWrapper = document.getElementById(field.id)
+            if (fieldWrapper) {
+                const contentEl = fieldWrapper.querySelector('.field-content') as HTMLElement
+                if (contentEl) contentEl.textContent = field.label || 'Button'
+            }
+        })
+
+        const propAction = document.getElementById('propAction') as HTMLSelectElement
+        const propUrlContainer = document.getElementById('propUrlContainer') as HTMLDivElement
+        const propJsContainer = document.getElementById('propJsContainer') as HTMLDivElement
+        const propShowHideContainer = document.getElementById('propShowHideContainer') as HTMLDivElement
+
+        propAction.addEventListener('change', (e) => {
+            field.action = (e.target as HTMLSelectElement).value as any
+
+            // Show/hide containers
+            propUrlContainer.classList.add('hidden')
+            propJsContainer.classList.add('hidden')
+            propShowHideContainer.classList.add('hidden')
+
+            if (field.action === 'url') {
+                propUrlContainer.classList.remove('hidden')
+            } else if (field.action === 'js') {
+                propJsContainer.classList.remove('hidden')
+            } else if (field.action === 'showHide') {
+                propShowHideContainer.classList.remove('hidden')
+            }
+        })
+
+        const propActionUrl = document.getElementById('propActionUrl') as HTMLInputElement
+        propActionUrl.addEventListener('input', (e) => {
+            field.actionUrl = (e.target as HTMLInputElement).value
+        })
+
+        const propJsScript = document.getElementById('propJsScript') as HTMLTextAreaElement
+        if (propJsScript) {
+            propJsScript.addEventListener('input', (e) => {
+                field.jsScript = (e.target as HTMLTextAreaElement).value
+            })
+        }
+
+        const propTargetField = document.getElementById('propTargetField') as HTMLSelectElement
+        if (propTargetField) {
+            propTargetField.addEventListener('change', (e) => {
+                field.targetFieldName = (e.target as HTMLSelectElement).value
+            })
+        }
+
+        const propVisibilityAction = document.getElementById('propVisibilityAction') as HTMLSelectElement
+        if (propVisibilityAction) {
+            propVisibilityAction.addEventListener('change', (e) => {
+                field.visibilityAction = (e.target as HTMLSelectElement).value as any
+            })
+        }
+    } else if (field.type === 'signature') {
+        // No specific listeners for signature fields yet
+    } else if (field.type === 'date') {
+        const propDateFormat = document.getElementById('propDateFormat') as HTMLSelectElement
+        if (propDateFormat) {
+            propDateFormat.addEventListener('change', (e) => {
+                field.dateFormat = (e.target as HTMLSelectElement).value
+                // Update canvas preview
+                const fieldWrapper = document.getElementById(field.id)
+                if (fieldWrapper) {
+                    const textSpan = fieldWrapper.querySelector('.date-format-text') as HTMLElement
+                    if (textSpan) {
+                        textSpan.textContent = field.dateFormat
+                    }
+                }
+                // Re-initialize lucide icons in the properties panel
+                setTimeout(() => (window as any).lucide?.createIcons(), 0)
+            })
+        }
+    } else if (field.type === 'image') {
+        const propLabel = document.getElementById('propLabel') as HTMLInputElement
+        propLabel.addEventListener('input', (e) => {
+            field.label = (e.target as HTMLInputElement).value
+            renderField(field)
+        })
+    }
+}
+
+// Hide properties panel
+function hideProperties(): void {
+    propertiesPanel.innerHTML = '<p class="text-gray-500 text-sm">Select a field to edit properties</p>'
+}
+
+// Delete field
+function deleteField(field: FormField): void {
+    const fieldEl = document.getElementById(field.id)
+    if (fieldEl) {
+        fieldEl.remove()
+    }
+    fields = fields.filter((f) => f.id !== field.id)
+    deselectAll()
+    updateFieldCount()
+}
+
+// Delete key handler
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Delete' && selectedField) {
+        deleteField(selectedField)
+    } else if (e.key === 'Escape' && selectedToolType) {
+        // Cancel tool selection
+        toolItems.forEach(item => item.classList.remove('ring-2', 'ring-indigo-400', 'bg-indigo-600'))
+        selectedToolType = null
+        canvas.style.cursor = 'default'
+    }
+})
+
+// Update field count
+function updateFieldCount(): void {
+    fieldCountDisplay.textContent = fields.length.toString()
+}
+
+// Download PDF
+downloadBtn.addEventListener('click', async () => {
+    // Check for duplicate field names before generating PDF
+    const nameCount = new Map<string, number>()
+    const duplicates: string[] = []
+
+    fields.forEach(field => {
+        const count = nameCount.get(field.name) || 0
+        nameCount.set(field.name, count + 1)
+    })
+
+    nameCount.forEach((count, name) => {
+        if (count > 1) {
+            duplicates.push(name)
+        }
+    })
+
+    if (duplicates.length > 0) {
+        const duplicateList = duplicates.map(name => `"${name}"`).join(', ')
+        showModal(
+            'Duplicate Field Names',
+            `The following field names are used more than once: ${duplicateList}. Please rename these fields to use unique names before downloading.`,
+            'error'
+        )
+        return
+    }
+
+    if (fields.length === 0) {
+        alert('Please add at least one field before downloading.')
+        return
+    }
+
+    if (pages.length === 0) {
+        alert('No pages found. Please create a blank PDF or upload one.')
+        return
+    }
+
+    try {
+        let pdfDoc: PDFDocument
+
+        if (uploadedPdfDoc) {
+            pdfDoc = uploadedPdfDoc
+        } else {
+            pdfDoc = await PDFDocument.create()
+
+            for (const pageData of pages) {
+                pdfDoc.addPage([pageData.width, pageData.height])
+            }
+        }
+
+        const form = pdfDoc.getForm()
+
+        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
+
+        // Set document metadata for accessibility
+        pdfDoc.setTitle('Fillable Form')
+        pdfDoc.setAuthor('BentoPDF')
+        pdfDoc.setLanguage('en-US')
+
+        const radioGroups = new Map<string, any>() // Track created radio groups
+
+        for (const field of fields) {
+            const pageData = pages[field.pageIndex]
+            if (!pageData) continue
+
+            const pdfPage = pdfDoc.getPage(field.pageIndex)
+            const { height: pageHeight } = pdfPage.getSize()
+
+            const scaleX = 1 / currentScale
+            const scaleY = 1 / currentScale
+
+            const x = field.x * scaleX
+            const y = pageHeight - field.y * scaleY - field.height * scaleY // PDF coordinates from bottom
+            const width = field.width * scaleX
+            const height = field.height * scaleY
+
+            if (field.type === 'text') {
+                const textField = form.createTextField(field.name)
+                const rgbColor = hexToRgb(field.textColor)
+
+                textField.addToPage(pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1),
+                    textColor: rgb(rgbColor.r, rgbColor.g, rgbColor.b),
+                })
+
+                textField.setText(field.defaultValue)
+                textField.setFontSize(field.fontSize)
+
+                // Set alignment
+                if (field.alignment === 'center') {
+                    textField.setAlignment(TextAlignment.Center)
+                } else if (field.alignment === 'right') {
+                    textField.setAlignment(TextAlignment.Right)
+                } else {
+                    textField.setAlignment(TextAlignment.Left)
+                }
+
+                // Handle combing
+                if (field.combCells > 0) {
+                    textField.setMaxLength(field.combCells)
+                    textField.enableCombing()
+                } else if (field.maxLength > 0) {
+                    textField.setMaxLength(field.maxLength)
+                }
+
+                // Disable multiline to prevent RTL issues (unless explicitly enabled)
+                if (!field.multiline) {
+                    textField.disableMultiline()
+                } else {
+                    textField.enableMultiline()
+                }
+
+                // Common properties
+                if (field.required) textField.enableRequired()
+                if (field.readOnly) textField.enableReadOnly()
+                if (field.tooltip) {
+                    textField.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+
+            } else if (field.type === 'checkbox') {
+                const checkBox = form.createCheckBox(field.name)
+                checkBox.addToPage(pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1),
+                })
+                if (field.checked) checkBox.check()
+                if (field.required) checkBox.enableRequired()
+                if (field.readOnly) checkBox.enableReadOnly()
+                if (field.tooltip) {
+                    checkBox.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+
+            } else if (field.type === 'radio') {
+                const groupName = field.groupName || 'RadioGroup1'
+                let radioGroup
+
+                if (radioGroups.has(groupName)) {
+                    radioGroup = radioGroups.get(groupName)
+                } else {
+                    radioGroup = form.createRadioGroup(groupName)
+                    radioGroups.set(groupName, radioGroup)
+                }
+
+                radioGroup.addOptionToPage(field.exportValue || 'Yes', pdfPage as any, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1),
+                })
+                if (field.checked) radioGroup.select(field.exportValue || 'Yes')
+                if (field.required) radioGroup.enableRequired()
+                if (field.readOnly) radioGroup.enableReadOnly()
+                if (field.tooltip) {
+                    radioGroup.acroField.getWidgets().forEach((widget: any) => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+
+            } else if (field.type === 'dropdown') {
+                const dropdown = form.createDropdown(field.name)
+                dropdown.addToPage(pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1), // Light blue not supported in standard PDF appearance easily without streams
+                })
+                if (field.options) dropdown.setOptions(field.options)
+                if (field.defaultValue && field.options?.includes(field.defaultValue)) dropdown.select(field.defaultValue)
+                else if (field.options && field.options.length > 0) dropdown.select(field.options[0])
+
+                const rgbColor = hexToRgb(field.textColor)
+                dropdown.acroField.setFontSize(field.fontSize)
+                dropdown.acroField.setDefaultAppearance(
+                    `0 0 0 rg /Helv ${field.fontSize} Tf`
+                )
+
+                if (field.required) dropdown.enableRequired()
+                if (field.readOnly) dropdown.enableReadOnly()
+                if (field.tooltip) {
+                    dropdown.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+
+            } else if (field.type === 'optionlist') {
+                const optionList = form.createOptionList(field.name)
+                optionList.addToPage(pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1),
+                })
+                if (field.options) optionList.setOptions(field.options)
+                if (field.defaultValue && field.options?.includes(field.defaultValue)) optionList.select(field.defaultValue)
+                else if (field.options && field.options.length > 0) optionList.select(field.options[0])
+
+                const rgbColor = hexToRgb(field.textColor)
+                optionList.acroField.setFontSize(field.fontSize)
+                optionList.acroField.setDefaultAppearance(
+                    `0 0 0 rg /Helv ${field.fontSize} Tf`
+                )
+
+                if (field.required) optionList.enableRequired()
+                if (field.readOnly) optionList.enableReadOnly()
+                if (field.tooltip) {
+                    optionList.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+
+            } else if (field.type === 'button') {
+                const button = form.createButton(field.name)
+                button.addToPage(field.label || 'Button', pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(0.8, 0.8, 0.8), // Light gray
+                })
+
+                // Add Action
+                if (field.action && field.action !== 'none') {
+                    const widgets = button.acroField.getWidgets()
+
+                    widgets.forEach(widget => {
+                        let actionDict: any
+
+                        if (field.action === 'reset') {
+                            actionDict = pdfDoc.context.obj({
+                                Type: 'Action',
+                                S: 'ResetForm'
+                            })
+                        } else if (field.action === 'print') {
+                            // Print action using JavaScript
+                            actionDict = pdfDoc.context.obj({
+                                Type: 'Action',
+                                S: 'JavaScript',
+                                JS: 'print();'
+                            })
+                        } else if (field.action === 'url' && field.actionUrl) {
+                            // Validate URL
+                            let url = field.actionUrl.trim()
+                            if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                                url = 'https://' + url
+                            }
+
+                            // Encode URL to handle special characters (RFC3986)
+                            try {
+                                url = encodeURI(url)
+                            } catch (e) {
+                                console.warn('Failed to encode URL:', e)
+                            }
+
+                            actionDict = pdfDoc.context.obj({
+                                Type: 'Action',
+                                S: 'URI',
+                                URI: PDFString.of(url)
+                            })
+                        } else if (field.action === 'js' && field.jsScript) {
+                            actionDict = pdfDoc.context.obj({
+                                Type: 'Action',
+                                S: 'JavaScript',
+                                JS: field.jsScript
+                            })
+                        } else if (field.action === 'showHide' && field.targetFieldName) {
+                            const target = field.targetFieldName
+                            let script = ''
+
+                            if (field.visibilityAction === 'show') {
+                                script = `var f = this.getField("${target}"); if(f) f.display = display.visible;`
+                            } else if (field.visibilityAction === 'hide') {
+                                script = `var f = this.getField("${target}"); if(f) f.display = display.hidden;`
+                            } else {
+                                // Toggle
+                                script = `var f = this.getField("${target}"); if(f) f.display = (f.display === display.visible) ? display.hidden : display.visible;`
+                            }
+
+                            actionDict = pdfDoc.context.obj({
+                                Type: 'Action',
+                                S: 'JavaScript',
+                                JS: script
+                            })
+                        }
+
+                        if (actionDict) {
+                            widget.dict.set(PDFName.of('A'), actionDict)
+                        }
+                    })
+                }
+
+                if (field.tooltip) {
+                    button.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+            } else if (field.type === 'date') {
+                const dateField = form.createTextField(field.name)
+                dateField.addToPage(pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(1, 1, 1),
+                })
+
+                // Add Date Format and Keystroke Actions
+                const widgets = dateField.acroField.getWidgets()
+                const dateFormat = field.dateFormat || 'mm/dd/yyyy'
+                widgets.forEach(widget => {
+                    const formatAction = pdfDoc.context.obj({
+                        Type: 'Action',
+                        S: 'JavaScript',
+                        JS: PDFString.of(`AFDate_FormatEx("${dateFormat}");`)
+                    })
+
+                    const keystrokeAction = pdfDoc.context.obj({
+                        Type: 'Action',
+                        S: 'JavaScript',
+                        JS: PDFString.of(`AFDate_KeystrokeEx("${dateFormat}");`)
+                    })
+
+                    // Set as Format action (AA / F) and Keystroke action (AA / K)
+                    const additionalActions = pdfDoc.context.obj({
+                        F: formatAction,
+                        K: keystrokeAction
+                    })
+                    widget.dict.set(PDFName.of('AA'), additionalActions)
+                })
+
+                if (field.required) dateField.enableRequired()
+                if (field.readOnly) dateField.enableReadOnly()
+                if (field.tooltip) {
+                    dateField.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+            } else if (field.type === 'image') {
+                const imageBtn = form.createButton(field.name)
+                imageBtn.addToPage(field.label || 'Click to Upload Image', pdfPage, {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height,
+                    borderWidth: 1,
+                    borderColor: rgb(0, 0, 0),
+                    backgroundColor: rgb(0.9, 0.9, 0.9),
+                })
+
+                // Add Import Icon Action
+                const widgets = imageBtn.acroField.getWidgets()
+                widgets.forEach(widget => {
+                    const actionDict = pdfDoc.context.obj({
+                        Type: 'Action',
+                        S: 'JavaScript',
+                        JS: 'event.target.buttonImportIcon();'
+                    })
+                    widget.dict.set(PDFName.of('A'), actionDict)
+
+                    // Set Appearance Characteristics (MK) -> Text Position (TP) = 1 (Icon Only)
+                    // This ensures the image replaces the text when uploaded
+                    // IF (Icon Fit) -> SW: A (Always Scale), S: A (Anamorphic/Fill)
+                    const mkDict = pdfDoc.context.obj({
+                        TP: 1,
+                        BG: [0.9, 0.9, 0.9], // Background color (Light Gray)
+                        BC: [0, 0, 0],       // Border color (Black)
+                        IF: {
+                            SW: PDFName.of('A'),
+                            S: PDFName.of('A'),
+                            FB: true
+                        }
+                    })
+                    widget.dict.set(PDFName.of('MK'), mkDict)
+                })
+
+                if (field.tooltip) {
+                    imageBtn.acroField.getWidgets().forEach(widget => {
+                        widget.dict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                    })
+                }
+            } else if (field.type === 'signature') {
+                const context = pdfDoc.context
+
+                // Create the signature field dictionary with FT = Sig
+                const sigDict = context.obj({
+                    FT: PDFName.of('Sig'),
+                    T: PDFString.of(field.name),
+                    Kids: [],
+                }) as PDFDict
+                const sigRef = context.register(sigDict)
+
+                // Create the widget annotation for the signature field
+                const widgetDict = context.obj({
+                    Type: PDFName.of('Annot'),
+                    Subtype: PDFName.of('Widget'),
+                    Rect: [x, y, x + width, y + height],
+                    F: 4, // Print flag
+                    P: pdfPage.ref,
+                    Parent: sigRef,
+                }) as PDFDict
+
+                // Add border and background appearance
+                const borderStyle = context.obj({
+                    W: 1, // Border width
+                    S: PDFName.of('S'), // Solid border
+                }) as PDFDict
+                widgetDict.set(PDFName.of('BS'), borderStyle)
+                widgetDict.set(PDFName.of('BC'), context.obj([0, 0, 0])) // Border color (black)
+                widgetDict.set(PDFName.of('BG'), context.obj([0.95, 0.95, 0.95])) // Background color
+
+                const widgetRef = context.register(widgetDict)
+
+                const kidsArray = sigDict.get(PDFName.of('Kids')) as PDFArray
+                kidsArray.push(widgetRef)
+
+                pdfPage.node.addAnnot(widgetRef)
+
+                const acroForm = form.acroForm
+                acroForm.addField(sigRef)
+
+                // Add tooltip if specified
+                if (field.tooltip) {
+                    widgetDict.set(PDFName.of('TU'), PDFString.of(field.tooltip))
+                }
+            }
+        }
+
+        form.updateFieldAppearances(helveticaFont)
+
+        const pdfBytes = await pdfDoc.save()
+        const blob = new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' })
+        downloadFile(blob, 'fillable-form.pdf')
+    } catch (error) {
+        console.error('Error generating PDF:', error)
+        const errorMessage = (error as Error).message
+
+        // Check if it's a duplicate field name error
+        if (errorMessage.includes('A field already exists with the specified name')) {
+            // Extract the field name from the error message
+            const match = errorMessage.match(/A field already exists with the specified name: "(.+?)"/)
+            const fieldName = match ? match[1] : 'unknown'
+            showModal('Duplicate Field Name', `A field named "${fieldName}" already exists. Please rename this field to use a unique name before downloading.`, 'error')
+        } else {
+            showModal('Error', 'Error generating PDF: ' + errorMessage, 'error')
+        }
+    }
+})
+
+// Back to tools button
+const backToToolsBtns = document.querySelectorAll('[id^="back-to-tools"]') as NodeListOf<HTMLButtonElement>
+backToToolsBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        window.location.href = '/'
+    })
+})
+
+function getPageDimensions(size: string): { width: number; height: number } {
+    let dimensions: [number, number]
+    switch (size) {
+        case 'letter':
+            dimensions = PageSizes.Letter
+            break
+        case 'a4':
+            dimensions = PageSizes.A4
+            break
+        case 'a5':
+            dimensions = PageSizes.A5
+            break
+        case 'legal':
+            dimensions = PageSizes.Legal
+            break
+        case 'tabloid':
+            dimensions = PageSizes.Tabloid
+            break
+        case 'a3':
+            dimensions = PageSizes.A3
+            break
+        case 'custom':
+            // Get custom dimensions from inputs
+            const width = parseInt(customWidth.value) || 612
+            const height = parseInt(customHeight.value) || 792
+            return { width, height }
+        default:
+            dimensions = PageSizes.Letter
+    }
+    return { width: dimensions[0], height: dimensions[1] }
+}
+
+// Reset to initial state
+function resetToInitial(): void {
+    fields = []
+    pages = []
+    currentPageIndex = 0
+    uploadedPdfDoc = null
+    selectedField = null
+
+    canvas.innerHTML = ''
+
+    propertiesPanel.innerHTML = '<p class="text-gray-500 text-sm">Select a field to edit properties</p>'
+
+    updateFieldCount()
+
+    // Show upload area and hide tool container
+    uploadArea.classList.remove('hidden')
+    toolContainer.classList.add('hidden')
+    pageSizeSelector.classList.add('hidden')
+    setTimeout(() => createIcons({ icons }), 100)
+}
+
+function createBlankPage(): void {
+    pages.push({
+        index: pages.length,
+        width: pageSize.width,
+        height: pageSize.height
+    })
+    updatePageNavigation()
+}
+
+function switchToPage(pageIndex: number): void {
+    if (pageIndex < 0 || pageIndex >= pages.length) return
+
+    currentPageIndex = pageIndex
+    renderCanvas()
+    updatePageNavigation()
+
+    // Deselect any selected field when switching pages
+    deselectAll()
+}
+
+// Render the canvas for the current page
+function renderCanvas(): void {
+    const currentPage = pages[currentPageIndex]
+    if (!currentPage) return
+
+    // Fixed scale for better visibility
+    let scale = 1.333
+
+    currentScale = scale
+
+    const canvasWidth = currentPage.width * scale
+    const canvasHeight = currentPage.height * scale
+
+    canvas.style.width = `${canvasWidth}px`
+    canvas.style.height = `${canvasHeight}px`
+
+    canvas.innerHTML = ''
+
+    if (currentPage.pdfPageData) {
+        const img = document.createElement('img')
+        img.src = currentPage.pdfPageData as string
+        img.style.position = 'absolute'
+        img.style.top = '0'
+        img.style.left = '0'
+        img.style.width = '100%'
+        img.style.height = '100%'
+        img.style.pointerEvents = 'none'
+        img.style.opacity = '0.8' // Slightly transparent so fields are visible
+        canvas.appendChild(img)
+    }
+
+    // Render fields for current page
+    fields.filter(f => f.pageIndex === currentPageIndex).forEach(field => {
+        renderField(field)
+    })
+}
+
+function updatePageNavigation(): void {
+    pageIndicator.textContent = `Page ${currentPageIndex + 1} of ${pages.length}`
+    prevPageBtn.disabled = currentPageIndex === 0
+    nextPageBtn.disabled = currentPageIndex === pages.length - 1
+}
+
+// Drag and drop handlers for upload area
+dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault()
+    dropZone.classList.add('border-indigo-500', 'bg-gray-600')
+})
+
+dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('border-indigo-500', 'bg-gray-600')
+})
+
+dropZone.addEventListener('drop', (e) => {
+    e.preventDefault()
+    dropZone.classList.remove('border-indigo-500', 'bg-gray-600')
+    const files = e.dataTransfer?.files
+    if (files && files.length > 0 && files[0].type === 'application/pdf') {
+        handlePdfUpload(files[0])
+    }
+})
+
+pdfFileInput.addEventListener('change', async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (file) {
+        handlePdfUpload(file)
+    }
+})
+
+blankPdfBtn.addEventListener('click', () => {
+    pageSizeSelector.classList.remove('hidden')
+})
+
+pageSizeSelect.addEventListener('change', () => {
+    if (pageSizeSelect.value === 'custom') {
+        customDimensionsInput.classList.remove('hidden')
+    } else {
+        customDimensionsInput.classList.add('hidden')
+    }
+})
+
+confirmBlankBtn.addEventListener('click', () => {
+    const selectedSize = pageSizeSelect.value
+    pageSize = getPageDimensions(selectedSize)
+
+    createBlankPage()
+    switchToPage(0)
+
+    // Hide upload area and show tool container
+    uploadArea.classList.add('hidden')
+    toolContainer.classList.remove('hidden')
+    setTimeout(() => createIcons({ icons }), 100)
+})
+
+async function handlePdfUpload(file: File) {
+    try {
+        const arrayBuffer = await file.arrayBuffer()
+        uploadedPdfDoc = await PDFDocument.load(arrayBuffer)
+
+        // Check for existing fields and update counter
+        try {
+            const form = uploadedPdfDoc.getForm()
+            const fields = form.getFields()
+            fields.forEach(field => {
+                const name = field.getName()
+                // Check if name matches pattern Type_Number
+                const match = name.match(/([a-zA-Z]+)_(\d+)/)
+                if (match) {
+                    const num = parseInt(match[2])
+                    if (!isNaN(num) && num >= fieldCounter) {
+                        fieldCounter = num
+                    }
+                }
+            })
+        } catch (e) {
+            // No form or error getting fields, ignore
+        }
+
+        const pdfjsDoc = await getPDFDocument({ data: arrayBuffer }).promise
+
+        const pageCount = uploadedPdfDoc.getPageCount()
+        pages = []
+
+        for (let i = 0; i < pageCount; i++) {
+            const page = uploadedPdfDoc.getPage(i)
+            const { width, height } = page.getSize()
+
+            const pdfjsPage = await pdfjsDoc.getPage(i + 1)
+            const viewport = pdfjsPage.getViewport({ scale: 1.333 })
+
+            const tempCanvas = document.createElement('canvas')
+            tempCanvas.width = viewport.width
+            tempCanvas.height = viewport.height
+
+            const context = tempCanvas.getContext('2d')!
+            await pdfjsPage.render({
+                canvasContext: context,
+                viewport,
+                canvas: tempCanvas,
+            }).promise
+
+            const dataUrl = tempCanvas.toDataURL('image/png')
+
+            pages.push({
+                index: i,
+                width,
+                height,
+                pdfPageData: dataUrl as any
+            })
+        }
+
+        currentPageIndex = 0
+        renderCanvas()
+        updatePageNavigation()
+
+        // Hide upload area and show tool container
+        uploadArea.classList.add('hidden')
+        toolContainer.classList.remove('hidden')
+
+        // Init icons
+        setTimeout(() => createIcons({ icons }), 100)
+    } catch (error) {
+        console.error('Error loading PDF:', error)
+        showModal('Error', 'Error loading PDF file. Please try again with a valid PDF.', 'error')
+    }
+}
+
+// Page navigation
+prevPageBtn.addEventListener('click', () => {
+    if (currentPageIndex > 0) {
+        switchToPage(currentPageIndex - 1)
+    }
+})
+
+nextPageBtn.addEventListener('click', () => {
+    if (currentPageIndex < pages.length - 1) {
+        switchToPage(currentPageIndex + 1)
+    }
+})
+
+addPageBtn.addEventListener('click', () => {
+    createBlankPage()
+    switchToPage(pages.length - 1)
+})
+
+resetBtn.addEventListener('click', () => {
+    if (fields.length > 0 || pages.length > 0) {
+        if (confirm('Are you sure you want to reset? All your work will be lost.')) {
+            resetToInitial()
+        }
+    } else {
+        resetToInitial()
+    }
+})
+
+// Custom Modal Logic
+const errorModal = document.getElementById('errorModal')
+const errorModalTitle = document.getElementById('errorModalTitle')
+const errorModalMessage = document.getElementById('errorModalMessage')
+const errorModalClose = document.getElementById('errorModalClose')
+
+function showModal(title: string, message: string, type: 'error' | 'warning' | 'info' = 'error') {
+    if (!errorModal || !errorModalTitle || !errorModalMessage) return
+
+    errorModalTitle.textContent = title
+    errorModalMessage.textContent = message
+    errorModal.classList.remove('hidden')
+}
+
+if (errorModalClose) {
+    errorModalClose.addEventListener('click', () => {
+        errorModal?.classList.add('hidden')
+    })
+}
+
+// Close modal on backdrop click
+if (errorModal) {
+    errorModal.addEventListener('click', (e) => {
+        if (e.target === errorModal) {
+            errorModal.classList.add('hidden')
+        }
+    })
+}
+
+initializeGlobalShortcuts()
diff --git a/src/js/logic/invert-colors.ts b/src/js/logic/invert-colors.ts
index 13b202d..ac29376 100644
--- a/src/js/logic/invert-colors.ts
+++ b/src/js/logic/invert-colors.ts
@@ -1,7 +1,11 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 export async function invertColors() {
   if (!state.pdfDoc) {
@@ -12,8 +16,7 @@ export async function invertColors() {
   try {
     const newPdfDoc = await PDFLibDocument.create();
     const pdfBytes = await state.pdfDoc.save();
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
+    const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
 
     for (let i = 1; i <= pdfjsDoc.numPages; i++) {
       const page = await pdfjsDoc.getPage(i);
@@ -22,7 +25,7 @@ export async function invertColors() {
       canvas.width = viewport.width;
       canvas.height = viewport.height;
       const ctx = canvas.getContext('2d');
-      await page.render({ canvasContext: ctx, viewport }).promise;
+      await page.render({ canvasContext: ctx, viewport, canvas }).promise;
 
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
diff --git a/src/js/logic/merge.ts b/src/js/logic/merge.ts
index 44da64a..9cb7212 100644
--- a/src/js/logic/merge.ts
+++ b/src/js/logic/merge.ts
@@ -1,5 +1,5 @@
 import { showLoader, hideLoader, showAlert } from '../ui.ts';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.ts';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.ts';
 import { state } from '../state.ts';
 import { renderPagesProgressively, cleanupLazyRendering, createPlaceholder } from '../utils/render-utils.ts';
 
@@ -8,10 +8,7 @@ import { PDFDocument as PDFLibDocument } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import Sortable from 'sortablejs';
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url
-).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
 const mergeState = {
   pdfDocs: {},
@@ -183,7 +180,7 @@ async function renderPageMergeThumbnails() {
       if (!pdfDoc) continue;
 
       const pdfData = await pdfDoc.save();
-      const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+      const pdfjsDoc = await getPDFDocument({ data: pdfData }).promise;
 
       // Create a wrapper function that includes the file name
       const createWrapperWithFileName = (canvas: HTMLCanvasElement, pageNumber: number) => {
diff --git a/src/js/logic/ocr-pdf.ts b/src/js/logic/ocr-pdf.ts
index 4198e8c..303b09f 100644
--- a/src/js/logic/ocr-pdf.ts
+++ b/src/js/logic/ocr-pdf.ts
@@ -1,10 +1,14 @@
 import { tesseractLanguages } from '../config/tesseract-languages.js';
 import { showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import Tesseract from 'tesseract.js';
 import { PDFDocument as PDFLibDocument, StandardFonts, rgb } from 'pdf-lib';
 import { icons, createIcons } from 'lucide';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 let searchablePdfBytes: any = null;
 
@@ -117,8 +121,7 @@ async function runOCR() {
       tessedit_char_whitelist: whitelist,
     });
 
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const newPdfDoc = await PDFLibDocument.create();
@@ -136,7 +139,7 @@ async function runOCR() {
       canvas.width = viewport.width;
       canvas.height = viewport.height;
       const context = canvas.getContext('2d');
-      await page.render({ canvasContext: context, viewport }).promise;
+      await page.render({ canvasContext: context, viewport, canvas }).promise;
 
       if (binarize) {
         binarizeCanvas(context);
diff --git a/src/js/logic/page-dimensions.ts b/src/js/logic/page-dimensions.ts
index bd53d65..4fdc23a 100644
--- a/src/js/logic/page-dimensions.ts
+++ b/src/js/logic/page-dimensions.ts
@@ -1,8 +1,120 @@
 import { state } from '../state.js';
 import { getStandardPageName, convertPoints } from '../utils/helpers.js';
+import { icons, createIcons } from 'lucide';
 
 let analyzedPagesData: any = []; // Store raw data to avoid re-analyzing
 
+function calculateAspectRatio(width: number, height: number): string {
+  const ratio = width / height;
+  return ratio.toFixed(3);
+}
+
+function calculateArea(width: number, height: number, unit: string): string {
+  const areaInPoints = width * height;
+  let convertedArea = 0;
+  let unitSuffix = '';
+
+  switch (unit) {
+    case 'in':
+      convertedArea = areaInPoints / (72 * 72); // 72 points per inch
+      unitSuffix = 'in²';
+      break;
+    case 'mm':
+      convertedArea = areaInPoints / (72 * 72) * (25.4 * 25.4); // Convert to mm²
+      unitSuffix = 'mm²';
+      break;
+    case 'px':
+      const pxPerPoint = 96 / 72;
+      convertedArea = areaInPoints * (pxPerPoint * pxPerPoint);
+      unitSuffix = 'px²';
+      break;
+    default: // 'pt'
+      convertedArea = areaInPoints;
+      unitSuffix = 'pt²';
+      break;
+  }
+
+  return `${convertedArea.toFixed(2)} ${unitSuffix}`;
+}
+
+
+function getSummaryStats() {
+  const totalPages = analyzedPagesData.length;
+
+  // Count unique page sizes
+  const uniqueSizes = new Map();
+  analyzedPagesData.forEach((pageData: any) => {
+    const key = `${pageData.width.toFixed(2)}x${pageData.height.toFixed(2)}`;
+    const label = `${pageData.standardSize} (${pageData.orientation})`;
+    uniqueSizes.set(key, {
+      count: (uniqueSizes.get(key)?.count || 0) + 1,
+      label: label,
+      width: pageData.width,
+      height: pageData.height
+    });
+  });
+
+  const hasMixedSizes = uniqueSizes.size > 1;
+
+  return {
+    totalPages,
+    uniqueSizesCount: uniqueSizes.size,
+    uniqueSizes: Array.from(uniqueSizes.values()),
+    hasMixedSizes
+  };
+}
+
+function renderSummary() {
+  const summaryContainer = document.getElementById('dimensions-summary');
+  if (!summaryContainer) return;
+
+  const stats = getSummaryStats();
+
+  let summaryHTML = `
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+      <div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
+        <p class="text-sm text-gray-400 mb-1">Total Pages</p>
+        <p class="text-2xl font-bold text-white">${stats.totalPages}</p>
+      </div>
+      <div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
+        <p class="text-sm text-gray-400 mb-1">Unique Page Sizes</p>
+        <p class="text-2xl font-bold text-white">${stats.uniqueSizesCount}</p>
+      </div>
+      <div class="bg-gray-900 border border-gray-700 rounded-lg p-4">
+        <p class="text-sm text-gray-400 mb-1">Document Type</p>
+        <p class="text-2xl font-bold ${stats.hasMixedSizes ? 'text-yellow-400' : 'text-green-400'}">
+          ${stats.hasMixedSizes ? 'Mixed Sizes' : 'Uniform'}
+        </p>
+      </div>
+    </div>
+  `;
+
+  if (stats.hasMixedSizes) {
+    summaryHTML += `
+      <div class="bg-yellow-900/20 border border-yellow-500/30 rounded-lg p-4 mb-4">
+        <div class="flex items-start gap-3">
+          <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0"></i>
+          <div>
+            <h4 class="text-yellow-200 font-semibold mb-2">Mixed Page Sizes Detected</h4>
+            <p class="text-sm text-gray-300 mb-3">This document contains pages with different dimensions:</p>
+            <ul class="space-y-1 text-sm text-gray-300">
+              ${stats.uniqueSizes.map((size: any) => `
+                <li>• ${size.label}: ${size.count} page${size.count > 1 ? 's' : ''}</li>
+              `).join('')}
+            </ul>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  summaryContainer.innerHTML = summaryHTML;
+
+  if (stats.hasMixedSizes) {
+    createIcons({ icons });
+  }
+}
+
 /**
  * Renders the dimensions table based on the stored data and selected unit.
  * @param {string} unit The unit to display dimensions in ('pt', 'in', 'mm', 'px').
@@ -16,31 +128,89 @@ function renderTable(unit: any) {
   analyzedPagesData.forEach((pageData) => {
     const width = convertPoints(pageData.width, unit);
     const height = convertPoints(pageData.height, unit);
+    const aspectRatio = calculateAspectRatio(pageData.width, pageData.height);
+    const area = calculateArea(pageData.width, pageData.height, unit);
 
     const row = document.createElement('tr');
 
-    // Create and append each cell safely using textContent
+    // Page number
     const pageNumCell = document.createElement('td');
     pageNumCell.className = 'px-4 py-3 text-white';
     pageNumCell.textContent = pageData.pageNum;
 
+    // Dimensions
     const dimensionsCell = document.createElement('td');
     dimensionsCell.className = 'px-4 py-3 text-gray-300';
     dimensionsCell.textContent = `${width} x ${height} ${unit}`;
 
+    // Standard size
     const sizeCell = document.createElement('td');
     sizeCell.className = 'px-4 py-3 text-gray-300';
     sizeCell.textContent = pageData.standardSize;
 
+    // Orientation
     const orientationCell = document.createElement('td');
     orientationCell.className = 'px-4 py-3 text-gray-300';
     orientationCell.textContent = pageData.orientation;
 
-    row.append(pageNumCell, dimensionsCell, sizeCell, orientationCell);
+    // Aspect Ratio
+    const aspectRatioCell = document.createElement('td');
+    aspectRatioCell.className = 'px-4 py-3 text-gray-300';
+    aspectRatioCell.textContent = aspectRatio;
+
+    // Area
+    const areaCell = document.createElement('td');
+    areaCell.className = 'px-4 py-3 text-gray-300';
+    areaCell.textContent = area;
+
+    // Rotation
+    const rotationCell = document.createElement('td');
+    rotationCell.className = 'px-4 py-3 text-gray-300';
+    rotationCell.textContent = `${pageData.rotation}°`;
+
+    row.append(pageNumCell, dimensionsCell, sizeCell, orientationCell, aspectRatioCell, areaCell, rotationCell);
     tableBody.appendChild(row);
   });
 }
 
+function exportToCSV() {
+  const unitsSelect = document.getElementById('units-select') as HTMLSelectElement;
+  const unit = unitsSelect?.value || 'pt';
+
+  const headers = ['Page #', `Width (${unit})`, `Height (${unit})`, 'Standard Size', 'Orientation', 'Aspect Ratio', `Area (${unit}²)`, 'Rotation'];
+  const csvRows = [headers.join(',')];
+
+  analyzedPagesData.forEach((pageData: any) => {
+    const width = convertPoints(pageData.width, unit);
+    const height = convertPoints(pageData.height, unit);
+    const aspectRatio = calculateAspectRatio(pageData.width, pageData.height);
+    const area = calculateArea(pageData.width, pageData.height, unit);
+
+    const row = [
+      pageData.pageNum,
+      width,
+      height,
+      pageData.standardSize,
+      pageData.orientation,
+      aspectRatio,
+      area,
+      `${pageData.rotation}°`
+    ];
+    csvRows.push(row.join(','));
+  });
+
+  const csvContent = csvRows.join('\n');
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'page-dimensions.csv';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
 /**
  * Main function to analyze the PDF and display dimensions.
  * This is called once after the file is loaded.
@@ -53,28 +223,36 @@ export function analyzeAndDisplayDimensions() {
 
   pages.forEach((page: any, index: any) => {
     const { width, height } = page.getSize();
+    const rotation = page.getRotation().angle || 0;
+
     analyzedPagesData.push({
       pageNum: index + 1,
       width, // Store raw width in points
       height, // Store raw height in points
       orientation: width > height ? 'Landscape' : 'Portrait',
       standardSize: getStandardPageName(width, height),
+      rotation: rotation
     });
   });
 
   const resultsContainer = document.getElementById('dimensions-results');
   const unitsSelect = document.getElementById('units-select');
 
+  renderSummary();
+
   // Initial render with default unit (points)
   // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'HTMLEleme... Remove this comment to see the full error message
   renderTable(unitsSelect.value);
 
-  // Show the results table
   resultsContainer.classList.remove('hidden');
 
-  // Add event listener to handle unit changes
   unitsSelect.addEventListener('change', (e) => {
     // @ts-expect-error TS(2339) FIXME: Property 'value' does not exist on type 'EventTarg... Remove this comment to see the full error message
     renderTable(e.target.value);
   });
+
+  const exportButton = document.getElementById('export-csv-btn');
+  if (exportButton) {
+    exportButton.addEventListener('click', exportToCSV);
+  }
 }
diff --git a/src/js/logic/pdf-multi-tool.ts b/src/js/logic/pdf-multi-tool.ts
index 850d22d..3bd5906 100644
--- a/src/js/logic/pdf-multi-tool.ts
+++ b/src/js/logic/pdf-multi-tool.ts
@@ -3,7 +3,7 @@ import { degrees, PDFDocument as PDFLibDocument } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import JSZip from 'jszip';
 import Sortable from 'sortablejs';
-import { downloadFile } from '../utils/helpers';
+import { downloadFile, getPDFDocument } from '../utils/helpers';
 import { renderPagesProgressively, cleanupLazyRendering, renderPageToCanvas, createPlaceholder } from '../utils/render-utils';
 import { initializeGlobalShortcuts } from '../utils/shortcuts-init.js';
 
@@ -357,7 +357,7 @@ async function loadPdfs(files: File[]) {
         const pdfIndex = currentPdfDocs.length - 1;
 
         const pdfBytes = await pdfDoc.save();
-        const pdfjsDoc = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise;
+        const pdfjsDoc = await getPDFDocument({ data: new Uint8Array(pdfBytes) }).promise;
         const numPages = pdfjsDoc.numPages;
 
         // Pre-fill allPages with placeholders to maintain order/state
@@ -741,7 +741,7 @@ async function handleInsertPdf(e: Event) {
 
     // Load PDF.js document for rendering
     const pdfBytes = await pdfDoc.save();
-    const pdfjsDoc = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise;
+    const pdfjsDoc = await getPDFDocument({ data: new Uint8Array(pdfBytes) }).promise;
     const numPages = pdfjsDoc.numPages;
 
     const newPages: PageData[] = [];
diff --git a/src/js/logic/pdf-to-bmp.ts b/src/js/logic/pdf-to-bmp.ts
index 87984d8..e07a066 100644
--- a/src/js/logic/pdf-to-bmp.ts
+++ b/src/js/logic/pdf-to-bmp.ts
@@ -1,7 +1,10 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import JSZip from 'jszip';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
 /**
  * Creates a BMP file buffer from raw pixel data (ImageData).
@@ -53,8 +56,7 @@ function encodeBMP(imageData: any) {
 export async function pdfToBmp() {
   showLoader('Converting PDF to BMP images...');
   try {
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const zip = new JSZip();
@@ -69,7 +71,7 @@ export async function pdfToBmp() {
       canvas.width = viewport.width;
 
       // Render the PDF page directly to the canvas
-      await page.render({ canvasContext: context, viewport: viewport }).promise;
+      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
 
       // Get the raw pixel data from this canvas
       const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
diff --git a/src/js/logic/pdf-to-greyscale.ts b/src/js/logic/pdf-to-greyscale.ts
index c75f8c3..1013096 100644
--- a/src/js/logic/pdf-to-greyscale.ts
+++ b/src/js/logic/pdf-to-greyscale.ts
@@ -1,9 +1,11 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
-
+import * as pdfjsLib from 'pdfjs-dist';
 import { PDFDocument as PDFLibDocument } from 'pdf-lib';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 export async function pdfToGreyscale() {
   if (!state.pdfDoc) {
     showAlert('Error', 'PDF not loaded.');
@@ -13,8 +15,7 @@ export async function pdfToGreyscale() {
   try {
     const newPdfDoc = await PDFLibDocument.create();
     const pdfBytes = await state.pdfDoc.save();
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdfjsDoc = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
+    const pdfjsDoc = await getPDFDocument({ data: pdfBytes }).promise;
 
     for (let i = 1; i <= pdfjsDoc.numPages; i++) {
       const page = await pdfjsDoc.getPage(i);
@@ -24,7 +25,7 @@ export async function pdfToGreyscale() {
       canvas.height = viewport.height;
       const ctx = canvas.getContext('2d');
 
-      await page.render({ canvasContext: ctx, viewport }).promise;
+      await page.render({ canvasContext: ctx, viewport, canvas }).promise;
 
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
diff --git a/src/js/logic/pdf-to-jpg.ts b/src/js/logic/pdf-to-jpg.ts
index 5e53a13..a12c102 100644
--- a/src/js/logic/pdf-to-jpg.ts
+++ b/src/js/logic/pdf-to-jpg.ts
@@ -1,13 +1,16 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import JSZip from 'jszip';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 export async function pdfToJpg() {
   showLoader('Converting to JPG...');
   try {
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const zip = new JSZip();
@@ -23,7 +26,7 @@ export async function pdfToJpg() {
       canvas.height = viewport.height;
       canvas.width = viewport.width;
 
-      await page.render({ canvasContext: context, viewport: viewport }).promise;
+      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
 
       const blob = await new Promise((resolve) =>
         canvas.toBlob(resolve, 'image/jpeg', quality)
diff --git a/src/js/logic/pdf-to-markdown.ts b/src/js/logic/pdf-to-markdown.ts
index 69610eb..4ea06dc 100644
--- a/src/js/logic/pdf-to-markdown.ts
+++ b/src/js/logic/pdf-to-markdown.ts
@@ -1,5 +1,5 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 
 export async function pdfToMarkdown() {
@@ -7,8 +7,7 @@ export async function pdfToMarkdown() {
   try {
     const file = state.files[0];
     const arrayBuffer = await readFileAsArrayBuffer(file);
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+    const pdf = await getPDFDocument({ data: arrayBuffer }).promise;
     let markdown = '';
 
     for (let i = 1; i <= pdf.numPages; i++) {
diff --git a/src/js/logic/pdf-to-png.ts b/src/js/logic/pdf-to-png.ts
index 7207493..ef95173 100644
--- a/src/js/logic/pdf-to-png.ts
+++ b/src/js/logic/pdf-to-png.ts
@@ -1,20 +1,23 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import JSZip from 'jszip';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 export async function pdfToPng() {
   showLoader('Converting to PNG...');
   try {
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const zip = new JSZip();
-    
+
     const qualityInput = document.getElementById('png-quality') as HTMLInputElement;
     const scale = qualityInput ? parseFloat(qualityInput.value) : 2.0;
-    
+
     for (let i = 1; i <= pdf.numPages; i++) {
       const page = await pdf.getPage(i);
       const viewport = page.getViewport({ scale });
@@ -22,7 +25,7 @@ export async function pdfToPng() {
       canvas.height = viewport.height;
       canvas.width = viewport.width;
       const context = canvas.getContext('2d');
-      await page.render({ canvasContext: context, viewport: viewport }).promise;
+      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
       const blob = await new Promise((resolve) =>
         canvas.toBlob(resolve, 'image/png')
       );
diff --git a/src/js/logic/pdf-to-tiff.ts b/src/js/logic/pdf-to-tiff.ts
index b630a78..09ce0fa 100644
--- a/src/js/logic/pdf-to-tiff.ts
+++ b/src/js/logic/pdf-to-tiff.ts
@@ -1,14 +1,16 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import JSZip from 'jszip';
 import UTIF from 'utif';
 import * as pdfjsLib from 'pdfjs-dist';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 export async function pdfToTiff() {
   showLoader('Converting PDF to TIFF...');
   try {
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const zip = new JSZip();
diff --git a/src/js/logic/pdf-to-webp.ts b/src/js/logic/pdf-to-webp.ts
index 4348fff..fe47b0a 100644
--- a/src/js/logic/pdf-to-webp.ts
+++ b/src/js/logic/pdf-to-webp.ts
@@ -1,13 +1,16 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, readFileAsArrayBuffer } from '../utils/helpers.js';
+import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import JSZip from 'jszip';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 export async function pdfToWebp() {
   showLoader('Converting to WebP...');
   try {
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument(
+    const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
     const zip = new JSZip();
@@ -18,10 +21,10 @@ export async function pdfToWebp() {
       canvas.height = viewport.height;
       canvas.width = viewport.width;
       const context = canvas.getContext('2d');
-      await page.render({ canvasContext: context, viewport: viewport }).promise;
+      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
       const qualityInput = document.getElementById('webp-quality') as HTMLInputElement;
       const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
-      
+
       const blob = await new Promise((resolve) =>
         canvas.toBlob(resolve, 'image/webp', quality)
       );
diff --git a/src/js/logic/posterize.ts b/src/js/logic/posterize.ts
index d0e14f3..21a395e 100644
--- a/src/js/logic/posterize.ts
+++ b/src/js/logic/posterize.ts
@@ -1,10 +1,12 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile, parsePageRanges } from '../utils/helpers.js';
+import { downloadFile, parsePageRanges, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import { PDFDocument, PageSizes } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import { createIcons, icons } from 'lucide';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 const posterizeState = {
   pdfJsDoc: null,
   pageSnapshots: {},
@@ -121,7 +123,7 @@ export async function setupPosterizeTool() {
       .getPageCount()
       .toString();
     const pdfBytes = await state.pdfDoc.save();
-    posterizeState.pdfJsDoc = await pdfjsLib.getDocument({ data: pdfBytes })
+    posterizeState.pdfJsDoc = await getPDFDocument({ data: pdfBytes })
       .promise;
     posterizeState.pageSnapshots = {};
     posterizeState.currentPage = 1;
diff --git a/src/js/logic/remove-blank-pages.ts b/src/js/logic/remove-blank-pages.ts
index f6d4ab5..46313cc 100644
--- a/src/js/logic/remove-blank-pages.ts
+++ b/src/js/logic/remove-blank-pages.ts
@@ -1,10 +1,12 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, getPDFDocument } from '../utils/helpers.js';
 import { state } from '../state.js';
 import { PDFDocument } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api.js';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 let analysisCache = [];
 
 async function isPageBlank(page: PDFPageProxy, threshold: number) {
@@ -38,7 +40,7 @@ async function analyzePages() {
   showLoader('Analyzing for blank pages...');
 
   const pdfBytes = await state.pdfDoc.save();
-  const pdf = await pdfjsLib.getDocument({ data: pdfBytes }).promise;
+  const pdf = await getPDFDocument({ data: pdfBytes }).promise;
 
   analysisCache = [];
   const promises = [];
diff --git a/src/js/logic/rotate.ts b/src/js/logic/rotate.ts
index ba9c10e..623bf10 100644
--- a/src/js/logic/rotate.ts
+++ b/src/js/logic/rotate.ts
@@ -1,7 +1,7 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, resetAndReloadTool } from '../utils/helpers.js';
 import { state } from '../state.js';
-import { getRotationState } from '../handlers/fileHandler.js';
+import { getRotationState, resetRotationState } from '../handlers/fileHandler.js';
 
 import { degrees } from 'pdf-lib';
 
@@ -24,6 +24,10 @@ export async function rotate() {
       new Blob([rotatedPdfBytes], { type: 'application/pdf' }),
       'rotated.pdf'
     );
+
+    resetAndReloadTool(() => {
+      resetRotationState();
+    });
   } catch (e) {
     console.error(e);
     showAlert('Error', 'Could not apply rotations.');
diff --git a/src/js/logic/sign-pdf.ts b/src/js/logic/sign-pdf.ts
index caff580..a0f2d4a 100644
--- a/src/js/logic/sign-pdf.ts
+++ b/src/js/logic/sign-pdf.ts
@@ -1,3 +1,4 @@
+import { PDFDocument } from 'pdf-lib';
 import { showLoader, hideLoader, showAlert } from '../ui.js';
 import { readFileAsArrayBuffer } from '../utils/helpers.js';
 import { state } from '../state.js';
@@ -50,7 +51,7 @@ export async function setupSignTool() {
       enablePermissions: false,
     };
     localStorage.setItem('pdfjs.preferences', JSON.stringify(newPrefs));
-  } catch {}
+  } catch { }
 
   const viewerUrl = new URL('/pdfjs-viewer/viewer.html', window.location.origin);
   const query = new URLSearchParams({ file: blobUrl });
@@ -83,7 +84,7 @@ export async function setupSignTool() {
           try {
             const highlightBtn = doc.getElementById('editorHighlightButton') as HTMLButtonElement | null;
             highlightBtn?.click();
-          } catch {}
+          } catch { }
         });
       }
     } catch (e) {
@@ -115,11 +116,41 @@ export async function applyAndSaveSignatures() {
       return;
     }
 
-    // Delegate to the built-in download behavior of the base viewer.
     const app = viewerWindow.PDFViewerApplication;
-    app.eventBus?.dispatch('download', { source: app });
+    const flattenCheckbox = document.getElementById('flatten-signature-toggle') as HTMLInputElement | null;
+    const shouldFlatten = flattenCheckbox?.checked;
+
+    if (shouldFlatten) {
+      showLoader('Flattening and saving PDF...');
+
+      const rawPdfBytes = await app.pdfDocument.saveDocument(app.pdfDocument.annotationStorage);
+
+      const pdfBytes = new Uint8Array(rawPdfBytes);
+
+      const pdfDoc = await PDFDocument.load(pdfBytes);
+
+      pdfDoc.getForm().flatten();
+
+      const flattenedPdfBytes = await pdfDoc.save();
+
+      const blob = new Blob([flattenedPdfBytes as BlobPart], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `signed_flattened_${state.files[0].name}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      hideLoader();
+    } else {
+      // Delegate to the built-in download behavior of the base viewer.
+      app.eventBus?.dispatch('download', { source: app });
+    }
   } catch (error) {
-    console.error('Failed to trigger download in base PDF.js viewer:', error);
+    console.error('Failed to export the signed PDF:', error);
+    hideLoader();
     showAlert('Export failed', 'Could not export the signed PDF. Please try again.');
   }
 }
diff --git a/src/js/logic/split.ts b/src/js/logic/split.ts
index 4ab3e44..45796a0 100644
--- a/src/js/logic/split.ts
+++ b/src/js/logic/split.ts
@@ -1,7 +1,9 @@
 import { showLoader, hideLoader, showAlert } from '../ui.js';
 import { createIcons, icons } from 'lucide';
 import * as pdfjsLib from 'pdfjs-dist';
-import { downloadFile } from '../utils/helpers.js';
+import { downloadFile, getPDFDocument } from '../utils/helpers.js';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 import { state } from '../state.js';
 import { renderPagesProgressively, cleanupLazyRendering } from '../utils/render-utils.js';
 import JSZip from 'jszip';
@@ -27,7 +29,7 @@ async function renderVisualSelector() {
 
   try {
     const pdfData = await state.pdfDoc.save();
-    const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
+    const pdf = await getPDFDocument({ data: pdfData }).promise;
 
     // Function to create wrapper element for each page
     const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
diff --git a/src/js/main.ts b/src/js/main.ts
index aaeca05..502b49b 100644
--- a/src/js/main.ts
+++ b/src/js/main.ts
@@ -10,10 +10,7 @@ import { formatShortcutDisplay, formatStars } from './utils/helpers.js';
 import { APP_VERSION, injectVersion } from '../version.js';
 
 const init = () => {
-  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-    'pdfjs-dist/build/pdf.worker.min.mjs',
-    import.meta.url
-  ).toString();
+  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
   // Handle simple mode - hide branding sections but keep logo and copyright
   // Handle simple mode - hide branding sections but keep logo and copyright
@@ -308,9 +305,87 @@ const init = () => {
       });
   }
 
+
   // Initialize Shortcuts System
   ShortcutsManager.init();
 
+  // Tab switching for settings modal
+  const shortcutsTabBtn = document.getElementById('shortcuts-tab-btn');
+  const preferencesTabBtn = document.getElementById('preferences-tab-btn');
+  const shortcutsTabContent = document.getElementById('shortcuts-tab-content');
+  const preferencesTabContent = document.getElementById('preferences-tab-content');
+  const shortcutsTabFooter = document.getElementById('shortcuts-tab-footer');
+  const preferencesTabFooter = document.getElementById('preferences-tab-footer');
+  const resetShortcutsBtn = document.getElementById('reset-shortcuts-btn');
+
+  if (shortcutsTabBtn && preferencesTabBtn) {
+    shortcutsTabBtn.addEventListener('click', () => {
+      shortcutsTabBtn.classList.add('bg-indigo-600', 'text-white');
+      shortcutsTabBtn.classList.remove('text-gray-300');
+      preferencesTabBtn.classList.remove('bg-indigo-600', 'text-white');
+      preferencesTabBtn.classList.add('text-gray-300');
+      shortcutsTabContent?.classList.remove('hidden');
+      preferencesTabContent?.classList.add('hidden');
+      shortcutsTabFooter?.classList.remove('hidden');
+      preferencesTabFooter?.classList.add('hidden');
+      resetShortcutsBtn?.classList.remove('hidden');
+    });
+
+    preferencesTabBtn.addEventListener('click', () => {
+      preferencesTabBtn.classList.add('bg-indigo-600', 'text-white');
+      preferencesTabBtn.classList.remove('text-gray-300');
+      shortcutsTabBtn.classList.remove('bg-indigo-600', 'text-white');
+      shortcutsTabBtn.classList.add('text-gray-300');
+      preferencesTabContent?.classList.remove('hidden');
+      shortcutsTabContent?.classList.add('hidden');
+      preferencesTabFooter?.classList.remove('hidden');
+      shortcutsTabFooter?.classList.add('hidden');
+      resetShortcutsBtn?.classList.add('hidden');
+    });
+  }
+
+  // Full-width toggle functionality
+  const fullWidthToggle = document.getElementById('full-width-toggle') as HTMLInputElement;
+  const toolInterface = document.getElementById('tool-interface');
+
+  // Load saved preference
+  const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+  if (fullWidthToggle) {
+    fullWidthToggle.checked = savedFullWidth;
+    applyFullWidthMode(savedFullWidth);
+  }
+
+  function applyFullWidthMode(enabled: boolean) {
+    if (toolInterface) {
+      if (enabled) {
+        toolInterface.classList.remove('max-w-4xl');
+      } else {
+        toolInterface.classList.add('max-w-4xl');
+      }
+    }
+
+    // Apply to all page uploaders
+    const pageUploaders = document.querySelectorAll('#tool-uploader');
+    pageUploaders.forEach((uploader) => {
+      if (enabled) {
+        uploader.classList.remove('max-w-2xl', 'max-w-5xl');
+      } else {
+        // Restore original max-width (most are max-w-2xl, add-stamps is max-w-5xl)
+        if (!uploader.classList.contains('max-w-2xl') && !uploader.classList.contains('max-w-5xl')) {
+          uploader.classList.add('max-w-2xl');
+        }
+      }
+    });
+  }
+
+  if (fullWidthToggle) {
+    fullWidthToggle.addEventListener('change', (e) => {
+      const enabled = (e.target as HTMLInputElement).checked;
+      localStorage.setItem('fullWidthMode', enabled.toString());
+      applyFullWidthMode(enabled);
+    });
+  }
+
   // Shortcuts UI Handlers
   if (dom.openShortcutsBtn) {
     dom.openShortcutsBtn.addEventListener('click', () => {
@@ -705,6 +780,31 @@ const init = () => {
 
     createIcons({ icons });
   }
+
+  const scrollToTopBtn = document.getElementById('scroll-to-top-btn');
+
+  if (scrollToTopBtn) {
+    let lastScrollY = window.scrollY;
+
+    window.addEventListener('scroll', () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY < lastScrollY && currentScrollY > 300) {
+        scrollToTopBtn.classList.add('visible');
+      } else {
+        scrollToTopBtn.classList.remove('visible');
+      }
+
+      lastScrollY = currentScrollY;
+    });
+
+    scrollToTopBtn.addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'instant'
+      });
+    });
+  }
 };
 
 document.addEventListener('DOMContentLoaded', init);
diff --git a/src/js/ui.ts b/src/js/ui.ts
index 4781e3e..47291ec 100644
--- a/src/js/ui.ts
+++ b/src/js/ui.ts
@@ -1,10 +1,14 @@
 import { resetState } from './state.js';
-import { formatBytes } from './utils/helpers.js';
+import { formatBytes, getPDFDocument } from './utils/helpers.js';
 import { tesseractLanguages } from './config/tesseract-languages.js';
 import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js';
 import { icons, createIcons } from 'lucide';
 import Sortable from 'sortablejs';
-import { getRotationState } from './handlers/fileHandler.js';
+import { getRotationState, updateRotationState } from './handlers/fileHandler.js';
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 
 // Centralizing DOM element selection
 export const dom = {
@@ -133,8 +137,7 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
     showLoader('Rendering page previews...');
 
     const pdfData = await pdfDoc.save();
-    // @ts-expect-error TS(2304) FIXME: Cannot find name 'pdfjsLib'.
-    const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
+    const pdf = await getPDFDocument({ data: pdfData }).promise;
 
     // Function to create wrapper element for each page
     const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
@@ -217,10 +220,13 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
                     '.page-rotator-item'
                 ) as HTMLElement;
                 const imgEl = card.querySelector('img');
+                const pageIndex = pageNumber - 1;
                 let currentRotation = parseInt(card.dataset.rotation);
                 currentRotation = (currentRotation + 90) % 360;
                 card.dataset.rotation = currentRotation.toString();
                 imgEl.style.transform = `rotate(${currentRotation}deg)`;
+
+                updateRotationState(pageIndex, currentRotation);
             });
 
             controlsDiv.append(pageNumSpan, rotateBtn);
@@ -630,8 +636,8 @@ export const toolTemplates = {
             <div class="mb-4">
                 <label for="jpg-quality" class="block mb-2 text-sm font-medium text-gray-300">Image Quality</label>
                 <div class="flex items-center gap-4">
-                    <input type="range" id="jpg-quality" min="0.1" max="1.0" step="0.1" value="0.9" class="flex-1">
-                    <span id="jpg-quality-value" class="text-white font-medium w-16 text-right">90%</span>
+                    <input type="range" id="jpg-quality" min="0.1" max="1.0" step="0.01" value="1.0" class="flex-1">
+                    <span id="jpg-quality-value" class="text-white font-medium w-16 text-right">100%</span>
                 </div>
                 <p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
             </div>
@@ -1314,15 +1320,27 @@ export const toolTemplates = {
         <div id="file-display-area" class="mt-4 space-y-2"></div>
 
         <div id="dimensions-results" class="hidden mt-6">
-            <div class="flex justify-end mb-4">
-                <label for="units-select" class="text-sm font-medium text-gray-300 self-center mr-3">Display Units:</label>
-                <select id="units-select" class="bg-gray-700 border border-gray-600 text-white rounded-lg p-2">
-                    <option value="pt" selected>Points (pt)</option>
-                    <option value="in">Inches (in)</option>
-                    <option value="mm">Millimeters (mm)</option>
-                    <option value="px">Pixels (at 96 DPI)</option>
-                </select>
+            <!-- Summary Statistics Panel -->
+            <div id="dimensions-summary" class="mb-6"></div>
+
+            <!-- Controls Row -->
+            <div class="flex flex-wrap justify-between items-center gap-4 mb-4">
+                <div class="flex items-center gap-3">
+                    <label for="units-select" class="text-sm font-medium text-gray-300">Display Units:</label>
+                    <select id="units-select" class="bg-gray-700 border border-gray-600 text-white rounded-lg p-2">
+                        <option value="pt" selected>Points (pt)</option>
+                        <option value="in">Inches (in)</option>
+                        <option value="mm">Millimeters (mm)</option>
+                        <option value="px">Pixels (at 96 DPI)</option>
+                    </select>
+                </div>
+                <button id="export-csv-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="download" class="w-4 h-4"></i>
+                    Export to CSV
+                </button>
             </div>
+
+            <!-- Dimensions Table -->
             <div class="overflow-x-auto rounded-lg border border-gray-700">
                 <table class="min-w-full divide-y divide-gray-700 text-sm text-left">
                     <thead class="bg-gray-900">
@@ -1331,6 +1349,9 @@ export const toolTemplates = {
                             <th class="px-4 py-3 font-medium text-white">Dimensions (W x H)</th>
                             <th class="px-4 py-3 font-medium text-white">Standard Size</th>
                             <th class="px-4 py-3 font-medium text-white">Orientation</th>
+                            <th class="px-4 py-3 font-medium text-white">Aspect Ratio</th>
+                            <th class="px-4 py-3 font-medium text-white">Area</th>
+                            <th class="px-4 py-3 font-medium text-white">Rotation</th>
                         </tr>
                     </thead>
                     <tbody id="dimensions-table-body" class="divide-y divide-gray-700">
@@ -1340,6 +1361,7 @@ export const toolTemplates = {
         </div>
     `,
 
+
     'n-up': () => `
         <h2 class="text-2xl font-bold text-white mb-4">N-Up Page Arrangement</h2>
         <p class="mb-6 text-gray-400">Combine multiple pages from your PDF onto a single sheet. This is great for creating booklets or proof sheets.</p>
@@ -1418,11 +1440,19 @@ export const toolTemplates = {
 
     'combine-single-page': () => `
         <h2 class="text-2xl font-bold text-white mb-4">Combine to a Single Page</h2>
-        <p class="mb-6 text-gray-400">Stitch all pages of your PDF together vertically to create one continuous, scrollable page.</p>
+        <p class="mb-6 text-gray-400">Stitch all pages of your PDF together vertically or horizontally to create one continuous page.</p>
         ${createFileInputHTML()}
         <div id="file-display-area" class="mt-4 space-y-2"></div>
 
         <div id="combine-options" class="hidden mt-6 space-y-4">
+            <div>
+                <label for="combine-orientation" class="block mb-2 text-sm font-medium text-gray-300">Orientation</label>
+                <select id="combine-orientation" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
+                    <option value="vertical" selected>Vertical (Stack pages top to bottom)</option>
+                    <option value="horizontal">Horizontal (Stack pages left to right)</option>
+                </select>
+            </div>
+            
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                     <label for="page-spacing" class="block mb-2 text-sm font-medium text-gray-300">Spacing Between Pages (in points)</label>
@@ -1433,12 +1463,25 @@ export const toolTemplates = {
                     <input type="color" id="background-color" value="#FFFFFF" class="w-full h-[42px] bg-gray-700 border border-gray-600 rounded-lg p-1 cursor-pointer">
                 </div>
             </div>
+            
             <div>
                 <label class="flex items-center gap-2 text-sm font-medium text-gray-300">
                     <input type="checkbox" id="add-separator" class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
                     Draw a separator line between pages
                 </label>
             </div>
+            
+            <div id="separator-options" class="hidden grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 rounded-lg bg-gray-900 border border-gray-700">
+                <div>
+                    <label for="separator-thickness" class="block mb-2 text-sm font-medium text-gray-300">Separator Line Thickness (in points)</label>
+                    <input type="number" id="separator-thickness" value="0.5" min="0.1" max="10" step="0.1" class="w-full bg-gray-700 border border-gray-600 text-white rounded-lg p-2.5">
+                </div>
+                <div>
+                    <label for="separator-color" class="block mb-2 text-sm font-medium text-gray-300">Separator Line Color</label>
+                    <input type="color" id="separator-color" value="#CCCCCC" class="w-full h-[42px] bg-gray-700 border border-gray-600 rounded-lg p-1 cursor-pointer">
+                </div>
+            </div>
+            
             <button id="process-btn" class="btn-gradient w-full mt-6">Combine Pages</button>
         </div>
     `,
@@ -1747,6 +1790,14 @@ export const toolTemplates = {
         <div id="canvas-container-sign" class="relative w-full overflow-auto bg-gray-900 rounded-lg border border-gray-600" style="height: 85vh;">
             <!-- PDF.js viewer iframe will be loaded here -->
         </div>
+        
+        <div class="mt-4 flex items-center gap-2">
+            <label class="flex items-center gap-2 text-sm font-medium text-gray-300 cursor-pointer">
+                <input type="checkbox" id="flatten-signature-toggle" class="w-4 h-4 rounded text-indigo-600 bg-gray-700 border-gray-600 focus:ring-indigo-500">
+                Flatten PDF (use the Save button below)
+            </label>
+        </div>
+
         <button id="process-btn" class="btn-gradient w-full mt-4" style="display:none;">Save & Download Signed PDF</button>
     </div>
 `,
diff --git a/src/js/utils/full-width.ts b/src/js/utils/full-width.ts
new file mode 100644
index 0000000..ae986e5
--- /dev/null
+++ b/src/js/utils/full-width.ts
@@ -0,0 +1,34 @@
+// Full-width mode utility
+// This script applies the full-width preference from localStorage to page uploaders
+
+export function initFullWidthMode() {
+    const savedFullWidth = localStorage.getItem('fullWidthMode') === 'true';
+
+    if (savedFullWidth) {
+        applyFullWidthMode(true);
+    }
+}
+
+export function applyFullWidthMode(enabled: boolean) {
+    // Apply to all page uploaders
+    const pageUploaders = document.querySelectorAll('#tool-uploader');
+    pageUploaders.forEach((uploader) => {
+        if (enabled) {
+            uploader.classList.remove('max-w-2xl', 'max-w-5xl');
+        } else {
+            // Restore original max-width if not already present
+            if (!uploader.classList.contains('max-w-2xl') && !uploader.classList.contains('max-w-5xl')) {
+                uploader.classList.add('max-w-2xl');
+            }
+        }
+    });
+}
+
+// Auto-initialize on DOM load
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initFullWidthMode);
+    } else {
+        initFullWidthMode();
+    }
+}
diff --git a/src/js/utils/helpers.ts b/src/js/utils/helpers.ts
index 4774801..833a447 100644
--- a/src/js/utils/helpers.ts
+++ b/src/js/utils/helpers.ts
@@ -1,6 +1,9 @@
 import createModule from '@neslinesli93/qpdf-wasm';
-import { showLoader, hideLoader, showAlert } from '../ui';
+import { showLoader, hideLoader, showAlert } from '../ui.js';
 import { createIcons } from 'lucide';
+import { state, resetState } from '../state.js';
+import * as pdfjsLib from 'pdfjs-dist'
+
 
 const STANDARD_SIZES = {
   A4: { width: 595.28, height: 841.89 },
@@ -45,16 +48,17 @@ export function convertPoints(points: any, unit: any) {
   return result.toFixed(2);
 }
 
-export const hexToRgb = (hex: any) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+// Convert hex color to RGB
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result
     ? {
       r: parseInt(result[1], 16) / 255,
       g: parseInt(result[2], 16) / 255,
       b: parseInt(result[3], 16) / 255,
     }
-    : { r: 0, g: 0, b: 0 }; // Default to black
-};
+    : { r: 0, g: 0, b: 0 }
+}
 
 export const formatBytes = (bytes: any, decimals = 1) => {
   if (bytes === 0) return '0 Bytes';
@@ -195,14 +199,86 @@ export function formatStars(num: number) {
   return num.toLocaleString();
 };
 
+/**
+ * Truncates a filename to a maximum length, adding ellipsis if needed.
+ * Preserves the file extension.
+ * @param filename - The filename to truncate
+ * @param maxLength - Maximum length (default: 30)
+ * @returns Truncated filename with ellipsis if needed
+ */
+export function truncateFilename(filename: string, maxLength: number = 25): string {
+  if (filename.length <= maxLength) {
+    return filename;
+  }
+
+  const lastDotIndex = filename.lastIndexOf('.');
+  const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex) : '';
+  const nameWithoutExt = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
+
+  const availableLength = maxLength - extension.length - 3; // 3 for '...'
+
+  if (availableLength <= 0) {
+    return filename.substring(0, maxLength - 3) + '...';
+  }
+
+  return nameWithoutExt.substring(0, availableLength) + '...' + extension;
+}
+
 export function formatShortcutDisplay(shortcut: string, isMac: boolean): string {
-    if (!shortcut) return '';
-    return shortcut
-      .replace('mod', isMac ? '⌘' : 'Ctrl')
-      .replace('ctrl', isMac ? '^' : 'Ctrl') // Control key on Mac shows as ^
-      .replace('alt', isMac ? '⌥' : 'Alt')
-      .replace('shift', 'Shift')
-      .split('+')
-      .map(k => k.charAt(0).toUpperCase() + k.slice(1))
-      .join(isMac ? '' : '+');
-}
\ No newline at end of file
+  if (!shortcut) return '';
+  return shortcut
+    .replace('mod', isMac ? '⌘' : 'Ctrl')
+    .replace('ctrl', isMac ? '^' : 'Ctrl') // Control key on Mac shows as ^
+    .replace('alt', isMac ? '⌥' : 'Alt')
+    .replace('shift', 'Shift')
+    .split('+')
+    .map(k => k.charAt(0).toUpperCase() + k.slice(1))
+    .join(isMac ? '' : '+');
+}
+
+export function resetAndReloadTool(preResetCallback?: () => void) {
+  const toolid = state.activeTool;
+
+  if (preResetCallback) {
+    preResetCallback();
+  }
+
+  resetState();
+
+  if (toolid) {
+    const element = document.querySelector(
+      `[data-tool-id="${toolid}"]`
+    ) as HTMLElement;
+    if (element) element.click();
+  }
+}
+
+/**
+ * Wrapper for pdfjsLib.getDocument that adds the required wasmUrl configuration.
+ * Use this instead of calling pdfjsLib.getDocument directly.
+ * @param src The source to load (url string, typed array, or parameters object)
+ * @returns The PDF loading task
+ */
+export function getPDFDocument(src: any) {
+  let params = src;
+
+  // Handle different input types similar to how getDocument handles them, 
+  // but we ensure we have an object to attach wasmUrl to.
+  if (typeof src === 'string') {
+    params = { url: src };
+  } else if (src instanceof Uint8Array || src instanceof ArrayBuffer) {
+    params = { data: src };
+  }
+
+  // Ensure params is an object
+  if (typeof params !== 'object' || params === null) {
+    params = {};
+  }
+
+  // Add wasmUrl pointing to our public/wasm directory
+  // This is required for PDF.js v5+ to load OpenJPEG for certain images
+  return pdfjsLib.getDocument({
+    ...params,
+    wasmUrl: '/pdfjs-viewer/wasm/',
+  });
+}
diff --git a/src/js/utils/render-utils.ts b/src/js/utils/render-utils.ts
index 0e14119..526c8c5 100644
--- a/src/js/utils/render-utils.ts
+++ b/src/js/utils/render-utils.ts
@@ -1,5 +1,7 @@
 import * as pdfjsLib from 'pdfjs-dist';
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+
 /**
  * Configuration for progressive rendering
  */
diff --git a/src/pages/add-stamps.html b/src/pages/add-stamps.html
index 967100d..a63258e 100644
--- a/src/pages/add-stamps.html
+++ b/src/pages/add-stamps.html
@@ -59,7 +59,8 @@
   </nav>
 
   <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
-    <div class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
+    <div id="tool-uploader"
+      class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl 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>
@@ -185,6 +186,7 @@
     </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="../version.ts"></script>
   <script type="module" src="../js/logic/add-stamps.ts"></script>
   <script type="module" src="../js/mobileMenu.ts"></script>
diff --git a/src/pages/bookmark.html b/src/pages/bookmark.html
index 7e330f4..930b661 100644
--- a/src/pages/bookmark.html
+++ b/src/pages/bookmark.html
@@ -61,14 +61,16 @@
     </div>
   </nav>
   <div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
-    <div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-md w-full text-gray-200 border border-gray-700">
+    <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">Edit Bookmarks</h1>
       <p class="text-gray-400 mb-6">
-        Upload a PDF to begin editing bookmarks
+        Add, edit, import, delete and extract PDF bookmarks.
       </p>
 
       <!-- Drop Zone for Main PDF Upload -->
@@ -489,6 +491,7 @@
     </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="../version.ts"></script>
   <script type="module" src="../js/logic/bookmark-pdf.ts"></script>
   <script type="module" src="../js/mobileMenu.ts"></script>
diff --git a/src/pages/form-creator.html b/src/pages/form-creator.html
new file mode 100644
index 0000000..8a5088d
--- /dev/null
+++ b/src/pages/form-creator.html
@@ -0,0 +1,404 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <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 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>
+                        <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>
+
+        <!-- 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>
+
+    <input type="file" id="pdfUploadInput" accept="application/pdf" class="hidden" />
+
+    <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
+        <!-- Upload Area (shown initially) -->
+        <div id="upload-area"
+            class="bg-gray-800 rounded-xl shadow-xl p-6 max-w-5xl w-full text-gray-200 border border-gray-700">
+            <button id="back-to-tools-upload"
+                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">Create PDF Form</h1>
+            <p class="text-gray-400 mb-6">
+                Upload an existing PDF or create a blank PDF to start adding form fields.
+            </p>
+
+            <div class="relative flex flex-col items-center justify-center w-full h-44 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-700 hover:bg-gray-600 transition-colors duration-300"
+                id="dropZone">
+                <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-300">
+                        <span class="font-semibold">Click to select a PDF</span> or drag and drop
+                    </p>
+                    <p class="text-xs text-gray-500">Single PDF file</p>
+                    <p class="text-xs text-gray-500">Your files never leave your device.</p>
+                </div>
+                <input type="file" id="pdfFileInput" accept="application/pdf"
+                    class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" />
+            </div>
+
+            <div id="fileList" class="mt-4 hidden text-sm text-gray-200"></div>
+
+            <!-- OR Separator -->
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-600"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-4 bg-gray-800 text-gray-400 font-medium">OR</span>
+                </div>
+            </div>
+
+            <div>
+                <button id="blankPdfBtn"
+                    class="w-full bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center gap-3 transition-colors">
+                    <i data-lucide="file-plus" class="w-5 h-5"></i>
+                    <span class="font-semibold">Create Blank PDF</span>
+                </button>
+
+                <div id="pageSizeSelector" class="mt-4 hidden">
+                    <label class="block text-sm font-semibold text-gray-300 mb-2">Page Size:</label>
+                    <select id="pageSizeSelect"
+                        class="w-full bg-gray-600 border border-gray-500 text-white rounded px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                        <option value="letter">Letter (8.5" × 11")</option>
+                        <option value="a4">A4 (210mm × 297mm)</option>
+                        <option value="a5">A5 (148mm × 210mm)</option>
+                        <option value="legal">Legal (8.5" × 14")</option>
+                        <option value="tabloid">Tabloid (11" × 17")</option>
+                        <option value="a3">A3 (297mm × 420mm)</option>
+                        <option value="custom">Custom</option>
+                    </select>
+
+                    <div id="customDimensionsInput" class="mt-3 hidden space-y-2">
+                        <div class="flex gap-2">
+                            <div class="flex-1">
+                                <label class="block text-xs text-gray-400 mb-1">Width (pts)</label>
+                                <input type="number" id="customWidth" placeholder="612" min="72" max="14400"
+                                    class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-xs text-gray-400 mb-1">Height (pts)</label>
+                                <input type="number" id="customHeight" placeholder="792" min="72" max="14400"
+                                    class="w-full bg-gray-600 border border-gray-500 text-white rounded px-2 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500">
+                            </div>
+                        </div>
+                        <p class="text-xs text-gray-500 italic">1 inch = 72 points</p>
+                    </div>
+
+                    <button id="confirmBlankBtn"
+                        class="w-full mt-3 bg-indigo-600 hover:bg-indigo-500 text-white p-2 rounded transition-colors">
+                        Start Creating
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Tool Container (hidden initially) -->
+        <div id="tool-container"
+            class="bg-gray-800 rounded-xl shadow-xl p-6 w-full text-gray-200 border border-gray-700 hidden">
+            <button id="back-to-tools-creator"
+                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">Create PDF Form</h1>
+            <p class="text-gray-400 mb-6">
+                Drag and drop fields onto the canvas to create a fillable PDF form. Customize field properties and
+                download your form.
+            </p>
+
+            <!-- Main Form Creator Area -->
+            <div class="flex flex-col lg:flex-row gap-6">
+                <!-- Sidebar with Properties -->
+                <aside class="lg:w-64 flex-shrink-0 order-2 lg:order-1">
+                    <!-- Properties Section -->
+                    <div class="bg-gray-700 rounded-lg p-4">
+                        <h2 class="font-semibold text-gray-200 mb-3 flex items-center gap-2">
+                            <i data-lucide="settings" class="w-4 h-4"></i>
+                            Properties
+                        </h2>
+                        <div id="propertiesPanel" class="space-y-3">
+                            <p class="text-gray-500 text-sm">Select a field to edit properties</p>
+                        </div>
+                    </div>
+
+                    <!-- Field Count -->
+                    <div class="mt-4 bg-gray-700 rounded-lg p-3 text-center">
+                        <p class="text-sm text-gray-400">
+                            <span id="fieldCount" class="text-indigo-400 font-bold text-lg">0</span> field(s)
+                        </p>
+                        <p class="text-xs text-gray-500 mt-1">Press Delete to remove selected field</p>
+                    </div>
+                </aside>
+
+                <!-- Canvas Area -->
+                <main class="flex-1 order-1 lg:order-2 min-w-0">
+                    <!-- Page Management Toolbar -->
+                    <div class="bg-gray-700 rounded-lg p-3 mb-4 flex flex-wrap gap-2 justify-between items-center">
+                        <div class="flex items-center gap-2">
+                            <button id="prevPageBtn"
+                                class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                disabled>
+                                <i data-lucide="chevron-left" class="w-4 h-4"></i>
+                            </button>
+                            <span id="pageIndicator" class="text-sm text-gray-300 px-2">Page 1 of 1</span>
+                            <button id="nextPageBtn"
+                                class="bg-gray-600 hover:bg-gray-500 text-white p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                disabled>
+                                <i data-lucide="chevron-right" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <button id="resetBtn"
+                                class="bg-gray-600 hover:bg-gray-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
+                                <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
+                                <span class="text-sm">Reset</span>
+                            </button>
+                            <button id="addPageBtn"
+                                class="bg-indigo-600 hover:bg-indigo-500 text-white p-2 px-3 rounded flex items-center gap-2 transition-colors">
+                                <i data-lucide="file-plus" class="w-4 h-4"></i>
+                                <span class="text-sm">Add Page</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Top Toolbar -->
+                    <div class="bg-gray-700 rounded-lg p-2 mb-4">
+                        <div class="flex flex-wrap gap-2 justify-center items-center max-w-full overflow-hidden">
+                            <div class="text-gray-400 text-sm font-semibold mr-2 flex items-center gap-1">
+                                <i data-lucide="wrench" class="w-4 h-4"></i> Fields:
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="text" title="Text Field">
+                                <i data-lucide="type" class="w-4 h-4"></i>
+                                <span class="text-xs">Text</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="checkbox" title="Checkbox">
+                                <i data-lucide="check-square" class="w-4 h-4"></i>
+                                <span class="text-xs">Checkbox</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="radio" title="Radio Button">
+                                <i data-lucide="circle-dot" class="w-4 h-4"></i>
+                                <span class="text-xs">Radio</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="dropdown" title="Dropdown">
+                                <i data-lucide="chevron-down-square" class="w-4 h-4"></i>
+                                <span class="text-xs">Dropdown</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="optionlist" title="Option List">
+                                <i data-lucide="list" class="w-4 h-4"></i>
+                                <span class="text-xs">List</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="button" title="Button">
+                                <i data-lucide="square-mouse-pointer" class="w-4 h-4"></i>
+                                <span class="text-xs">Button</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="signature" title="Signature">
+                                <i data-lucide="pen-tool" class="w-4 h-4"></i>
+                                <span class="text-xs">Signature</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="date" title="Date Field">
+                                <i data-lucide="calendar" class="w-4 h-4"></i>
+                                <span class="text-xs">Date</span>
+                            </div>
+
+                            <div class="tool-item bg-gray-600 hover:bg-indigo-600 text-white p-2 rounded cursor-move transition-colors flex items-center gap-2"
+                                draggable="true" data-type="image" title="Image Field">
+                                <i data-lucide="image" class="w-4 h-4"></i>
+                                <span class="text-xs">Image</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 rounded-lg p-4 mb-4 overflow-auto w-full">
+                        <div class="flex justify-center">
+                            <div id="pdfCanvasWrapper" class="shadow-2xl relative" style="border: 1px solid #374151;">
+                                <div id="pdfCanvas" class="bg-white relative">
+                                    <!-- Fields will be added here dynamically -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Download Button -->
+                    <button id="downloadBtn" class="btn-gradient w-full flex items-center justify-center gap-2 py-3">
+                        <span>Download PDF Form</span>
+                    </button>
+                </main>
+            </div>
+        </div>
+    </div>
+
+    <footer class="mt-16 border-t-2 border-gray-700 py-8 bg-[#111827]">
+        <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="../../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>
+        <!-- Custom Modal -->
+        <div id="errorModal"
+            class="hidden fixed inset-0 z-[9999] flex items-center justify-center bg-black bg-opacity-75">
+            <div class="bg-gray-800 rounded-lg shadow-2xl max-w-md w-full mx-4 border border-gray-700">
+                <div class="p-6">
+                    <h3 id="errorModalTitle" class="text-xl font-bold text-white mb-3">Error</h3>
+                    <p id="errorModalMessage" class="text-gray-300 mb-6">An error occurred.</p>
+                    <button id="errorModalClose"
+                        class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition-colors">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+        </div>
+
+        <script type="module" src="../js/utils/lucide-init.ts"></script>
+        <script type="module" src="../js/utils/full-width.ts"></script>
+        <script type="module" src="../version.ts"></script>
+        <script type="module" src="../js/logic/form-creator.ts"></script>
+        <script type="module" src="../js/mobileMenu.ts"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/json-to-pdf.html b/src/pages/json-to-pdf.html
index 6f8fd90..da4d39e 100644
--- a/src/pages/json-to-pdf.html
+++ b/src/pages/json-to-pdf.html
@@ -59,7 +59,8 @@
   </nav>
 
   <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
-    <div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
+    <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>
@@ -186,6 +187,7 @@
   </footer>
   <script type="module" src="../js/logic/json-to-pdf.ts"></script>
   <script type="module" src="../js/utils/lucide-init.ts"></script>
+  <script type="module" src="../js/utils/full-width.ts"></script>
   <script type="module" src="../version.ts"></script>
   <script type="module" src="../js/mobileMenu.ts"></script>
 </body>
diff --git a/src/pages/pdf-to-json.html b/src/pages/pdf-to-json.html
index 9fe0808..d8e922b 100644
--- a/src/pages/pdf-to-json.html
+++ b/src/pages/pdf-to-json.html
@@ -59,7 +59,8 @@
   </nav>
 
   <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
-    <div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
+    <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>
@@ -180,6 +181,7 @@
   </footer>
   <script type="module" src="../js/logic/pdf-to-json.ts"></script>
   <script type="module" src="../js/utils/lucide-init.ts"></script>
+  <script type="module" src="../js/utils/full-width.ts"></script>
   <script type="module" src="../version.ts"></script>
   <script type="module" src="../js/mobileMenu.ts"></script>
 </body>
diff --git a/src/pages/table-of-contents.html b/src/pages/table-of-contents.html
index 5384ea8..b43e33e 100644
--- a/src/pages/table-of-contents.html
+++ b/src/pages/table-of-contents.html
@@ -61,7 +61,8 @@
   </nav>
 
   <div id="uploader" class="min-h-screen flex items-center justify-center p-4 bg-gray-900">
-    <div class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700">
+    <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>
@@ -248,6 +249,7 @@
     </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/logic/table-of-contents.ts"></script>
   <script type="module" src="../js/mobileMenu.ts"></script>
 </body>
diff --git a/vite.config.ts b/vite.config.ts
index 5e94d0b..ccaf723 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -60,6 +60,7 @@ export default defineConfig(({ mode }) => ({
         'json-to-pdf': resolve(__dirname, 'src/pages/json-to-pdf.html'),
         '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'),
       },
     },
   },