diff --git a/resources/js/Pages/Settings.vue b/resources/js/Pages/Settings.vue
index 09438ac..b1ff826 100644
--- a/resources/js/Pages/Settings.vue
+++ b/resources/js/Pages/Settings.vue
@@ -4,8 +4,8 @@ import AgendaSettings from './Settings/AgendaSettings.vue'
 import LabelImport from './Settings/LabelImport.vue'
 import MacroAssignments from './Settings/MacroAssignments.vue'
 import MacroImport from './Settings/MacroImport.vue'
-import { Head } from '@inertiajs/vue3'
-import { onMounted, ref } from 'vue'
+import { Head, router } from '@inertiajs/vue3'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps({
     settings: { type: Object, default: () => ({}) },
@@ -22,6 +22,7 @@ const submenus = [
     { key: 'macros', label: 'Makro-Import' },
     { key: 'labels', label: 'Label-Import' },
     { key: 'agenda', label: 'Agenda' },
+    { key: 'ccli', label: 'CCLI Import' },
 ]
 
 const activeSubmenu = ref('assignments')
@@ -37,6 +38,35 @@ function switchSubmenu(key) {
     activeSubmenu.value = key
     window.location.hash = key
 }
+
+// Fetch bookmarklet href from the server endpoint
+const bookmarkletHref = ref('javascript:void(0)')
+onMounted(async () => {
+    try {
+        const res = await fetch(route('bookmarklets.ccli'))
+        if (res.ok) {
+            bookmarkletHref.value = await res.text()
+        }
+    } catch {
+        // fallback: keep void
+    }
+})
+
+async function updateSetting(key, value) {
+    try {
+        await fetch(route('settings.update'), {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-XSRF-TOKEN': decodeURIComponent(document.cookie.split('; ').find(r => r.startsWith('XSRF-TOKEN='))?.split('=')[1] ?? ''),
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify({ key, value }),
+        })
+    } catch {
+        // silent fail
+    }
+}
 </script>
 
 <template>
@@ -122,6 +152,76 @@ function switchSubmenu(key) {
                                 v-if="activeSubmenu === 'agenda'"
                                 :settings="settings"
                             />
+
+                            <!-- CCLI Import Settings -->
+                            <div v-if="activeSubmenu === 'ccli'" class="space-y-6">
+                                <div>
+                                    <h3 class="text-base font-semibold text-gray-900">CCLI SongSelect Import</h3>
+                                    <p class="mt-1 text-sm text-gray-500">
+                                        Importiere Songs direkt aus SongSelect in deine Song-Datenbank.
+                                    </p>
+                                </div>
+
+                                <!-- Default Translation Language -->
+                                <div class="rounded-lg border border-gray-200 p-4">
+                                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                                        Standard-Übersetzungssprache
+                                    </label>
+                                    <p class="text-xs text-gray-500 mb-3">
+                                        Wenn ein Song auf SongSelect in mehreren Sprachen verfügbar ist, wird diese Sprache als Übersetzung importiert.
+                                    </p>
+                                    <select
+                                        data-testid="default-translation-language"
+                                        :value="settings.default_translation_language || 'DE'"
+                                        @change="updateSetting('default_translation_language', $event.target.value)"
+                                        class="block w-48 rounded-md border-gray-300 text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500"
+                                    >
+                                        <option value="DE">Deutsch (DE)</option>
+                                        <option value="EN">Englisch (EN)</option>
+                                        <option value="FR">Französisch (FR)</option>
+                                        <option value="ES">Spanisch (ES)</option>
+                                        <option value="NL">Niederländisch (NL)</option>
+                                        <option value="IT">Italienisch (IT)</option>
+                                    </select>
+                                </div>
+
+                                <!-- Bookmarklet Installer -->
+                                <div class="rounded-lg border border-blue-100 bg-blue-50 p-4">
+                                    <h4 class="text-sm font-semibold text-blue-900 mb-2">Browser-Lesezeichen installieren</h4>
+                                    <p class="text-sm text-blue-800 mb-3">
+                                        Mit diesem Lesezeichen kannst du Songs direkt von SongSelect in pp-planer importieren — ohne Copy-Paste.
+                                    </p>
+                                    <ol class="text-sm text-blue-800 space-y-1 list-decimal list-inside mb-4">
+                                        <li>Ziehe den Button unten in deine Lesezeichen-Leiste</li>
+                                        <li>Öffne ein Lied auf <strong>songselect.ccli.com</strong> (du musst eingeloggt sein)</li>
+                                        <li>Klicke das Lesezeichen — der Liedtext wird automatisch übertragen</li>
+                                        <li>Klicke auf „Importieren" — fertig!</li>
+                                    </ol>
+                                    <p class="text-xs text-blue-600 mb-3">
+                                        Lesezeichen-Leiste aktivieren: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+Umschalt+B</kbd> (Mac: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Cmd+Shift+B</kbd>)
+                                    </p>
+                                    <a
+                                        data-testid="ccli-bookmarklet-drag-link"
+                                        :href="bookmarkletHref"
+                                        class="inline-flex items-center gap-2 rounded-md border border-blue-300 bg-white px-4 py-2 text-sm font-medium text-blue-700 shadow-sm cursor-grab hover:bg-blue-50"
+                                        @click.prevent
+                                        draggable="true"
+                                    >
+                                        📥 CCLI Import
+                                    </a>
+                                    <p class="mt-2 text-xs text-blue-500">
+                                        Diesen Button in die Lesezeichen-Leiste ziehen.
+                                    </p>
+
+                                    <!-- Troubleshooting -->
+                                    <details class="mt-4">
+                                        <summary class="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Was tun, wenn der Liedtext nicht erkannt wird?</summary>
+                                        <p class="mt-2 text-xs text-blue-700">
+                                            Falle zurück auf das manuelle Einfügen: Öffne das Lied auf SongSelect, drücke <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+A</kbd> dann <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+C</kbd>, und klicke dann auf „Aus CCLI importieren" in der Song-Datenbank oder im Gottesdienst-Formular.
+                                        </p>
+                                    </details>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>