diff --git a/index.html b/index.html
index a710c2473..b73558440 100644
--- a/index.html
+++ b/index.html
@@ -588,280 +588,10 @@ <h3 class="text-xl font-bold">Document Preview</h3>
       </div>
 
       <!-- Shortcuts Modal -->
-      <div
-        id="shortcuts-modal"
-        class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
-      >
-        <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="settings" class="w-6 h-6 text-indigo-400"></i>
-              <span data-i18n="settings.title">Settings</span>
-            </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>
-
-          <!-- 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>
-              <span data-i18n="settings.shortcuts">Shortcuts</span>
-            </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>
-              <span data-i18n="settings.preferences">Preferences</span>
-            </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"
-                  class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"
-                ></i>
-                <input
-                  type="text"
-                  id="shortcut-search"
-                  data-i18n-placeholder="settings.searchShortcuts"
-                  placeholder="Search shortcuts..."
-                  class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500"
-                />
-              </div>
-            </div>
-
-            <div
-              class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3"
-            >
-              <i
-                data-lucide="info"
-                class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"
-              ></i>
-              <p class="text-sm text-indigo-200">
-                <span data-i18n="settings.shortcutsInfo"
-                  >Press and hold keys to set a shortcut. Changes are
-                  <strong>auto-saved</strong>.</span
-                >
-                <br /><span
-                  class="text-yellow-300"
-                  data-i18n="settings.shortcutsWarning"
-                  >⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T,
-                  Cmd/Ctrl+N etc.) as they may not work reliably.</span
-                >
-              </p>
-            </div>
-
-            <div id="shortcuts-list" class="space-y-2">
-              <!-- Shortcuts will be populated here -->
-            </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"
-              data-i18n="settings.displayPreferences"
-            >
-              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"
-                    data-i18n="settings.fullWidthMode"
-                  >
-                    Full Width Mode
-                  </label>
-                  <p
-                    class="text-xs text-gray-400 mt-1"
-                    data-i18n="settings.fullWidthDescription"
-                  >
-                    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
-                class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
-              >
-                <div class="flex-1">
-                  <label
-                    for="compact-mode-toggle"
-                    class="text-sm font-medium text-gray-200 cursor-pointer"
-                    data-i18n="settings.compactMode"
-                  >
-                    Compact Mode
-                  </label>
-                  <p
-                    class="text-xs text-gray-400 mt-1"
-                    data-i18n="settings.compactModeDescription"
-                  >
-                    Display tools as a compact list instead of cards
-                  </p>
-                </div>
-                <label
-                  class="relative inline-flex items-center cursor-pointer ml-4"
-                >
-                  <input
-                    type="checkbox"
-                    id="compact-mode-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>
-
-              <!-- Advanced Settings Link -->
-              <a
-                href="wasm-settings.html"
-                class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-indigo-500/50 transition-all group"
-              >
-                <div class="flex-1">
-                  <span
-                    class="text-sm font-medium text-gray-200 group-hover:text-white"
-                  >
-                    Advanced Settings
-                  </span>
-                  <p class="text-xs text-gray-400 mt-1">
-                    Configure external processing modules (PyMuPDF, Ghostscript,
-                    CoherentPDF)
-                  </p>
-                </div>
-                <i
-                  data-lucide="chevron-right"
-                  class="w-5 h-5 text-gray-500 group-hover:text-indigo-400 transition-colors"
-                ></i>
-              </a>
-            </div>
-          </div>
-
-          <div
-            class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl"
-          >
-            <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>
-                <span data-i18n="settings.import">Import</span>
-              </button>
-              <button
-                id="export-shortcuts-btn"
-                class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
-              >
-                <i data-lucide="download" class="w-4 h-4"></i>
-                <span data-i18n="settings.export">Export</span>
-              </button>
-            </div>
-            <div id="preferences-tab-footer" class="hidden w-full">
-              <p
-                class="text-xs text-gray-400 text-center"
-                data-i18n="settings.settingsAutoSaved"
-              >
-                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"
-            >
-              <span data-i18n="settings.resetToDefaults"
-                >Reset to Defaults</span
-              >
-            </button>
-          </div>
-        </div>
-      </div>
+      {{> settings-modal }}
 
       <!-- Warning Modal -->
-      <div
-        id="warning-modal"
-        class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"
-      >
-        <div
-          class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in"
-        >
-          <div class="p-6">
-            <div class="flex items-start gap-4 mb-4">
-              <div
-                id="warning-icon"
-                class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0"
-              >
-                <i
-                  data-lucide="alert-triangle"
-                  class="w-6 h-6 text-yellow-500"
-                ></i>
-              </div>
-              <div class="flex-1">
-                <h3
-                  id="warning-title"
-                  class="text-xl font-bold text-white mb-2"
-                >
-                  Warning
-                </h3>
-                <p
-                  id="warning-message"
-                  class="text-gray-300 text-sm leading-relaxed"
-                ></p>
-              </div>
-            </div>
-          </div>
-          <div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
-            <button
-              id="warning-cancel-btn"
-              class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              id="warning-confirm-btn"
-              class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
-            >
-              Proceed
-            </button>
-          </div>
-        </div>
-      </div>
+      {{> warning-modal }}
 
       <div
         id="password-modal"
diff --git a/public/locales/de/common.json b/public/locales/de/common.json
index ec9ebb868..4d74acb52 100644
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -121,6 +121,10 @@
     "resetToDefaults": "Auf Standard zurücksetzen",
     "fullWidthMode": "Volle Breite",
     "fullWidthDescription": "Verwende die volle Bildschirmbreite für alle Werkzeuge anstelle eines zentrierten Containers",
+    "compactMode": "Kompaktmodus",
+    "compactModeDescription": "Werkzeuge als kompakte Liste statt als Karten anzeigen",
+    "advancedSettings": "Erweiterte Einstellungen",
+    "advancedSettingsDescription": "Externe Verarbeitungsmodule konfigurieren (PyMuPDF, Ghostscript, CoherentPDF)",
     "settingsAutoSaved": "Einstellungen werden automatisch gespeichert",
     "clickToSet": "Klicke zum Festlegen",
     "pressKeys": "Tasten drücken...",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index c22880eda..eb9c48aaa 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -130,6 +130,10 @@
     "resetToDefaults": "Reset to Defaults",
     "fullWidthMode": "Full Width Mode",
     "fullWidthDescription": "Use the full screen width for all tools instead of a centered container",
+    "compactMode": "Compact Mode",
+    "compactModeDescription": "Display tools as a compact list instead of cards",
+    "advancedSettings": "Advanced Settings",
+    "advancedSettingsDescription": "Configure external processing modules (PyMuPDF, Ghostscript, CoherentPDF)",
     "settingsAutoSaved": "Settings are automatically saved",
     "clickToSet": "Click to set",
     "pressKeys": "Press keys...",
diff --git a/simple-index.html b/simple-index.html
index 8925585a2..14cf1655c 100644
--- a/simple-index.html
+++ b/simple-index.html
@@ -203,274 +203,10 @@ <h3 class="text-xl font-bold">Document Preview</h3>
       </div>
 
       <!-- Shortcuts Modal -->
-      <div
-        id="shortcuts-modal"
-        class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
-      >
-        <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="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>
-
-          <!-- 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>
-              <span data-i18n="settings.preferences">Preferences</span>
-            </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"
-                  class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"
-                ></i>
-                <input
-                  type="text"
-                  id="shortcut-search"
-                  placeholder="Search shortcuts..."
-                  class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500"
-                />
-              </div>
-            </div>
-
-            <div
-              class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3"
-            >
-              <i
-                data-lucide="info"
-                class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"
-              ></i>
-              <p class="text-sm text-indigo-200">
-                <span data-i18n="settings.shortcutsInfo"
-                  >Press and hold keys to set a shortcut. Changes are
-                  <strong>auto-saved</strong>.</span
-                >
-                <br /><span
-                  class="text-yellow-300"
-                  data-i18n="settings.shortcutsWarning"
-                  >⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T,
-                  Cmd/Ctrl+N etc.) as they may not work reliably.</span
-                >
-              </p>
-            </div>
-
-            <div id="shortcuts-list" class="space-y-2">
-              <!-- Shortcuts will be populated here -->
-            </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"
-              data-i18n="settings.displayPreferences"
-            >
-              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"
-                    data-i18n="settings.fullWidthMode"
-                  >
-                    Full Width Mode
-                  </label>
-                  <p
-                    class="text-xs text-gray-400 mt-1"
-                    data-i18n="settings.fullWidthDescription"
-                  >
-                    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
-                class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
-              >
-                <div class="flex-1">
-                  <label
-                    for="compact-mode-toggle"
-                    class="text-sm font-medium text-gray-200 cursor-pointer"
-                    data-i18n="settings.compactMode"
-                  >
-                    Compact Mode
-                  </label>
-                  <p
-                    class="text-xs text-gray-400 mt-1"
-                    data-i18n="settings.compactModeDescription"
-                  >
-                    Display tools as a compact list instead of cards
-                  </p>
-                </div>
-                <label
-                  class="relative inline-flex items-center cursor-pointer ml-4"
-                >
-                  <input
-                    type="checkbox"
-                    id="compact-mode-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>
-
-              <a
-                href="wasm-settings.html"
-                class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-indigo-500/50 transition-all group"
-              >
-                <div class="flex-1">
-                  <span
-                    class="text-sm font-medium text-gray-200 group-hover:text-white"
-                  >
-                    Advanced Settings
-                  </span>
-                  <p class="text-xs text-gray-400 mt-1">
-                    Configure external processing modules (PyMuPDF, Ghostscript,
-                    CoherentPDF)
-                  </p>
-                </div>
-                <i
-                  data-lucide="chevron-right"
-                  class="w-5 h-5 text-gray-500 group-hover:text-indigo-400 transition-colors"
-                ></i>
-              </a>
-            </div>
-          </div>
-
-          <div
-            class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl"
-          >
-            <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
-              </button>
-              <button
-                id="export-shortcuts-btn"
-                class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
-              >
-                <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"
-                data-i18n="settings.settingsAutoSaved"
-              >
-                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
-            </button>
-          </div>
-        </div>
-      </div>
+      {{> settings-modal }}
 
       <!-- Warning Modal -->
-      <div
-        id="warning-modal"
-        class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"
-      >
-        <div
-          class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in"
-        >
-          <div class="p-6">
-            <div class="flex items-start gap-4 mb-4">
-              <div
-                id="warning-icon"
-                class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0"
-              >
-                <i
-                  data-lucide="alert-triangle"
-                  class="w-6 h-6 text-yellow-500"
-                ></i>
-              </div>
-              <div class="flex-1">
-                <h3
-                  id="warning-title"
-                  class="text-xl font-bold text-white mb-2"
-                >
-                  Warning
-                </h3>
-                <p
-                  id="warning-message"
-                  class="text-gray-300 text-sm leading-relaxed"
-                ></p>
-              </div>
-            </div>
-          </div>
-          <div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
-            <button
-              id="warning-cancel-btn"
-              class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
-            >
-              Cancel
-            </button>
-            <button
-              id="warning-confirm-btn"
-              class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
-            >
-              Proceed
-            </button>
-          </div>
-        </div>
-      </div>
+      {{> warning-modal }}
 
       <div id="signature-ghost" class="hidden"></div>
 
diff --git a/src/js/main.ts b/src/js/main.ts
index da8fc80a6..afda3e4a9 100644
--- a/src/js/main.ts
+++ b/src/js/main.ts
@@ -845,10 +845,10 @@ const init = async () => {
 
       if (confirmMode) {
         dom.warningCancelBtn.style.display = '';
-        dom.warningConfirmBtn.textContent = 'Proceed';
+        dom.warningConfirmBtn.textContent = t('warning.proceed');
       } else {
         dom.warningCancelBtn.style.display = 'none';
-        dom.warningConfirmBtn.textContent = 'OK';
+        dom.warningConfirmBtn.textContent = t('alert.ok');
       }
 
       const handleConfirm = () => {
diff --git a/src/partials/settings-modal.html b/src/partials/settings-modal.html
new file mode 100644
index 000000000..4e86cde48
--- /dev/null
+++ b/src/partials/settings-modal.html
@@ -0,0 +1,220 @@
+<div
+  id="shortcuts-modal"
+  class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
+>
+  <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="settings" class="w-6 h-6 text-indigo-400"></i>
+        <span data-i18n="settings.title">Settings</span>
+      </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>
+
+    <!-- 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>
+        <span data-i18n="settings.shortcuts">Shortcuts</span>
+      </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>
+        <span data-i18n="settings.preferences">Preferences</span>
+      </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"
+            class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"
+          ></i>
+          <input
+            type="text"
+            id="shortcut-search"
+            data-i18n-placeholder="settings.searchShortcuts"
+            placeholder="Search shortcuts..."
+            class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500"
+          />
+        </div>
+      </div>
+
+      <div
+        class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3"
+      >
+        <i
+          data-lucide="info"
+          class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"
+        ></i>
+        <p class="text-sm text-indigo-200">
+          <span data-i18n="settings.shortcutsInfo"
+            >Press and hold keys to set a shortcut. Changes are
+            <strong>auto-saved</strong>.</span
+          >
+          <br /><span
+            class="text-yellow-300"
+            data-i18n="settings.shortcutsWarning"
+            >⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T,
+            Cmd/Ctrl+N etc.) as they may not work reliably.</span
+          >
+        </p>
+      </div>
+
+      <div id="shortcuts-list" class="space-y-2">
+        <!-- Shortcuts will be populated here -->
+      </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"
+        data-i18n="settings.displayPreferences"
+      >
+        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"
+              data-i18n="settings.fullWidthMode"
+            >
+              Full Width Mode
+            </label>
+            <p
+              class="text-xs text-gray-400 mt-1"
+              data-i18n="settings.fullWidthDescription"
+            >
+              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
+          class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
+        >
+          <div class="flex-1">
+            <label
+              for="compact-mode-toggle"
+              class="text-sm font-medium text-gray-200 cursor-pointer"
+              data-i18n="settings.compactMode"
+            >
+              Compact Mode
+            </label>
+            <p
+              class="text-xs text-gray-400 mt-1"
+              data-i18n="settings.compactModeDescription"
+            >
+              Display tools as a compact list instead of cards
+            </p>
+          </div>
+          <label class="relative inline-flex items-center cursor-pointer ml-4">
+            <input
+              type="checkbox"
+              id="compact-mode-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>
+
+        <!-- Advanced Settings Link -->
+        <a
+          href="wasm-settings.html"
+          class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-indigo-500/50 transition-all group"
+        >
+          <div class="flex-1">
+            <span
+              class="text-sm font-medium text-gray-200 group-hover:text-white"
+              data-i18n="settings.advancedSettings"
+            >
+              Advanced Settings
+            </span>
+            <p
+              class="text-xs text-gray-400 mt-1"
+              data-i18n="settings.advancedSettingsDescription"
+            >
+              Configure external processing modules (PyMuPDF, Ghostscript,
+              CoherentPDF)
+            </p>
+          </div>
+          <i
+            data-lucide="chevron-right"
+            class="w-5 h-5 text-gray-500 group-hover:text-indigo-400 transition-colors"
+          ></i>
+        </a>
+      </div>
+    </div>
+
+    <div
+      class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl"
+    >
+      <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>
+          <span data-i18n="settings.import">Import</span>
+        </button>
+        <button
+          id="export-shortcuts-btn"
+          class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
+        >
+          <i data-lucide="download" class="w-4 h-4"></i>
+          <span data-i18n="settings.export">Export</span>
+        </button>
+      </div>
+      <div id="preferences-tab-footer" class="hidden w-full">
+        <p
+          class="text-xs text-gray-400 text-center"
+          data-i18n="settings.settingsAutoSaved"
+        >
+          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"
+      >
+        <span data-i18n="settings.resetToDefaults">Reset to Defaults</span>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/partials/warning-modal.html b/src/partials/warning-modal.html
new file mode 100644
index 000000000..28e7cd257
--- /dev/null
+++ b/src/partials/warning-modal.html
@@ -0,0 +1,45 @@
+<!-- Warning Modal -->
+<div
+  id="warning-modal"
+  class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"
+>
+  <div
+    class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in"
+  >
+    <div class="p-6">
+      <div class="flex items-start gap-4 mb-4">
+        <div
+          id="warning-icon"
+          class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0"
+        >
+          <i data-lucide="alert-triangle" class="w-6 h-6 text-yellow-500"></i>
+        </div>
+        <div class="flex-1">
+          <h3 id="warning-title" class="text-xl font-bold text-white mb-2">
+            Warning
+          </h3>
+          <p
+            id="warning-message"
+            class="text-gray-300 text-sm leading-relaxed"
+          ></p>
+        </div>
+      </div>
+    </div>
+    <div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
+      <button
+        id="warning-cancel-btn"
+        class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
+        data-i18n="warning.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        id="warning-confirm-btn"
+        class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
+        data-i18n="warning.proceed"
+      >
+        Proceed
+      </button>
+    </div>
+  </div>
+</div>