diff --git a/frontend/src/components/settings/ThumbnailBackfillCard.vue b/frontend/src/components/settings/ThumbnailBackfillCard.vue
new file mode 100644
index 0000000..489c45f
--- /dev/null
+++ b/frontend/src/components/settings/ThumbnailBackfillCard.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-card>
+    <v-card-title>Thumbnail backfill</v-card-title>
+    <v-card-text>
+      <p class="text-body-2 mb-3">
+        Scan the library for images with no thumbnail, or whose thumbnail file
+        is missing or corrupt on disk. Repair candidates are re-enqueued for
+        thumbnail generation. Safe to re-run.
+      </p>
+      <v-btn color="primary" rounded="pill" :loading="busy" @click="run">
+        <v-icon start>mdi-image-refresh</v-icon> Run backfill now
+      </v-btn>
+      <span v-if="done" class="ml-3 text-caption">Enqueued.</span>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useThumbnailsStore } from '../../stores/thumbnails.js'
+const store = useThumbnailsStore()
+const busy = ref(false)
+const done = ref(false)
+async function run () {
+  busy.value = true
+  try { await store.triggerBackfill(); done.value = true }
+  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
+  finally { busy.value = false }
+}
+</script>