diff --git a/frontend/components/admin/AdminBookStackTab.vue b/frontend/components/admin/AdminBookStackTab.vue
new file mode 100644
index 0000000..9584353
--- /dev/null
+++ b/frontend/components/admin/AdminBookStackTab.vue
@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <h2 class="text-lg font-bold text-neutral-900">{{ $t('bookstack.settings.title') }}</h2>
+
+        <form class="mt-6 max-w-lg space-y-4" @submit.prevent="handleSave">
+            <MalioInputText
+                v-model="form.url"
+                :label="$t('bookstack.settings.url')"
+                :placeholder="$t('bookstack.settings.urlPlaceholder')"
+                input-class="w-full"
+            />
+
+            <div>
+                <MalioInputText
+                    v-model="form.tokenId"
+                    :label="$t('bookstack.settings.tokenId')"
+                    :placeholder="$t('bookstack.settings.tokenIdPlaceholder')"
+                    input-class="w-full"
+                    type="password"
+                />
+            </div>
+
+            <div>
+                <MalioInputText
+                    v-model="form.tokenSecret"
+                    :label="$t('bookstack.settings.tokenSecret')"
+                    :placeholder="$t('bookstack.settings.tokenSecretPlaceholder')"
+                    input-class="w-full"
+                    type="password"
+                />
+                <p v-if="hasToken && !form.tokenId && !form.tokenSecret" class="mt-1 text-xs text-green-600">
+                    {{ $t('bookstack.settings.tokenConfigured') }}
+                </p>
+            </div>
+
+            <div class="flex gap-3">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:opacity-50"
+                    :disabled="isSaving"
+                >
+                    {{ $t('bookstack.settings.save') }}
+                </button>
+                <button
+                    type="button"
+                    class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 disabled:opacity-50"
+                    :disabled="isTesting"
+                    @click="handleTest"
+                >
+                    {{ $t('bookstack.settings.testConnection') }}
+                </button>
+            </div>
+
+            <p v-if="testResult !== null" class="text-sm font-medium" :class="testResult ? 'text-green-600' : 'text-red-600'">
+                {{ testResult ? $t('bookstack.settings.testSuccess') : $t('bookstack.settings.testFailed') }}
+            </p>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useBookStackService } from '~/services/bookstack'
+
+const { getSettings, saveSettings, testConnection } = useBookStackService()
+
+const form = reactive({
+    url: '',
+    tokenId: '',
+    tokenSecret: '',
+})
+
+const hasToken = ref(false)
+const isSaving = ref(false)
+const isTesting = ref(false)
+const testResult = ref<boolean | null>(null)
+
+async function loadSettings() {
+    const settings = await getSettings()
+    form.url = settings.url ?? ''
+    hasToken.value = settings.hasToken
+}
+
+async function handleSave() {
+    isSaving.value = true
+    try {
+        const result = await saveSettings({
+            url: form.url.trim() || null,
+            tokenId: form.tokenId || null,
+            tokenSecret: form.tokenSecret || null,
+        })
+        hasToken.value = result.hasToken
+        form.tokenId = ''
+        form.tokenSecret = ''
+        testResult.value = null
+    } finally {
+        isSaving.value = false
+    }
+}
+
+async function handleTest() {
+    isTesting.value = true
+    testResult.value = null
+    try {
+        const result = await testConnection()
+        testResult.value = result.success
+    } catch {
+        testResult.value = false
+    } finally {
+        isTesting.value = false
+    }
+}
+
+onMounted(() => {
+    loadSettings()
+})
+</script>