diff --git a/index.html b/index.html
index a710c247..635f2036 100644
--- a/index.html
+++ b/index.html
@@ -588,230 +588,7 @@
       </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
diff --git a/simple-index.html b/simple-index.html
index e39b5e01..889cee88 100644
--- a/simple-index.html
+++ b/simple-index.html
@@ -203,230 +203,7 @@
       </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
diff --git a/src/partials/settings-modal.html b/src/partials/settings-modal.html
new file mode 100644
index 00000000..3963a139
--- /dev/null
+++ b/src/partials/settings-modal.html
@@ -0,0 +1,216 @@
+<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>