diff --git a/app/components/DocumentThumbnail.vue b/app/components/DocumentThumbnail.vue
new file mode 100644
index 0000000..d35516b
--- /dev/null
+++ b/app/components/DocumentThumbnail.vue
@@ -0,0 +1,115 @@
+<template>
+  <div
+    v-if="document"
+    class="flex items-center justify-center overflow-hidden rounded-md border border-base-200 bg-base-200/70"
+    :class="thumbnailClass"
+  >
+    <img
+      v-if="canRenderImage"
+      :src="previewSrc"
+      class="h-full w-full object-cover"
+      :alt="altText"
+      loading="lazy"
+      decoding="async"
+    >
+    <iframe
+      v-else-if="canRenderPdf"
+      :src="previewSrc"
+      class="h-full w-full border-0 bg-white"
+      title="Aperçu PDF"
+    />
+    <component
+      v-else
+      :is="icon.component"
+      class="h-6 w-6"
+      :class="icon.colorClass"
+      aria-hidden="true"
+    />
+  </div>
+  <div
+    v-else
+    class="flex h-16 w-16 items-center justify-center rounded-md border border-dashed border-base-200 bg-base-200/40 text-xs text-base-content/40"
+    aria-hidden="true"
+  >
+    —
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getFileIcon } from '~/utils/fileIcons';
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview';
+
+type GenericDocument = {
+  id?: string | number;
+  name?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  path?: string | null;
+  size?: number | null;
+};
+
+const props = defineProps<{
+  document: GenericDocument | null | undefined;
+  alt?: string;
+}>();
+
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024;
+
+const normalizedDocument = computed(() => props.document ?? null);
+
+const canRenderImage = computed(() => {
+  const doc = normalizedDocument.value;
+  return !!(doc && isImageDocument(doc) && doc.path);
+});
+
+const canRenderPdf = computed(() => {
+  const doc = normalizedDocument.value;
+  if (!doc || !isPdfDocument(doc) || !doc.path) {
+    return false;
+  }
+  if (typeof doc.size === 'number' && doc.size > PDF_PREVIEW_MAX_BYTES) {
+    return false;
+  }
+  return true;
+});
+
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src;
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`;
+  }
+  return `${src}#toolbar=0&navpanes=0`;
+};
+
+const previewSrc = computed(() => {
+  const doc = normalizedDocument.value;
+  if (!doc || !doc.path) {
+    return '';
+  }
+  if (isPdfDocument(doc)) {
+    return appendPdfViewerParams(doc.path);
+  }
+  return doc.path;
+});
+
+const thumbnailClass = computed(() => (canRenderImage.value || canRenderPdf.value ? 'h-20 w-16' : 'h-16 w-16'));
+
+const icon = computed(() => {
+  const doc = normalizedDocument.value;
+  return getFileIcon({
+    name: doc?.filename || doc?.name || '',
+    mime: doc?.mimeType || undefined,
+  });
+});
+
+const altText = computed(() => {
+  if (props.alt) {
+    return props.alt;
+  }
+  const doc = normalizedDocument.value;
+  return doc?.name ? `Aperçu de ${doc.name}` : 'Aperçu du document';
+});
+</script>
diff --git a/app/pages/component-catalog.vue b/app/pages/component-catalog.vue
index cc73db3..f653435 100644
--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -91,6 +91,7 @@
           <table class="table table-sm md:table-md">
             <thead>
               <tr>
+                <th class="w-24">Aperçu</th>
                 <th>Nom</th>
                 <th>Catégorie</th>
                 <th>Référence</th>
@@ -99,6 +100,12 @@
             </thead>
             <tbody>
               <tr v-for="component in visibleComposants" :key="component.id">
+                <td class="align-middle">
+                  <DocumentThumbnail
+                    :document="resolvePrimaryDocument(component)"
+                    :alt="resolvePreviewAlt(component)"
+                  />
+                </td>
                 <td>{{ component.name || 'Composant sans nom' }}</td>
                 <td>{{ component.typeComposant?.name || '—' }}</td>
                 <td>{{ component.reference || '—' }}</td>
@@ -134,6 +141,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useComposants } from '~/composables/useComposants'
 import { useToast } from '~/composables/useToast'
+import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 const { showError } = useToast()
 const { composants, loadComposants, loading: loadingComposantsRef, deleteComposant } = useComposants()
@@ -145,6 +154,32 @@ const searchTerm = ref('')
 const sortField = ref<'name' | 'createdAt'>('name')
 const sortDirection = ref<'asc' | 'desc'>('asc')
 
+const resolvePrimaryDocument = (component: Record<string, any>) => {
+  const documents = Array.isArray(component?.documents) ? component.documents : []
+  if (!documents.length) {
+    return null
+  }
+  const normalized = documents.filter((doc) => doc && typeof doc === 'object')
+  const withPath = normalized.filter((doc) => doc?.path)
+  const pdf = withPath.find((doc) => isPdfDocument(doc))
+  if (pdf) {
+    return pdf
+  }
+  const image = withPath.find((doc) => isImageDocument(doc))
+  if (image) {
+    return image
+  }
+  return withPath[0] ?? normalized[0] ?? null
+}
+
+const resolvePreviewAlt = (component: Record<string, any>) => {
+  const parts = [component?.name, component?.reference].filter(Boolean)
+  if (parts.length) {
+    return `Aperçu du document de ${parts.join(' – ')}`
+  }
+  return 'Aperçu du document'
+}
+
 const resolveComparableName = (component: Record<string, any>) => {
   const toComparable = (value?: string | null) =>
     (value ?? '').toString().trim().toLowerCase()
diff --git a/app/pages/pieces-catalog.vue b/app/pages/pieces-catalog.vue
index 95265a1..6530c14 100644
--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -90,6 +90,7 @@
           <table class="table table-sm md:table-md">
             <thead>
               <tr>
+                <th class="w-24">Aperçu</th>
                 <th>Nom</th>
                 <th>Catégorie</th>
                 <th>Référence</th>
@@ -98,6 +99,12 @@
             </thead>
             <tbody>
               <tr v-for="piece in visiblePieces" :key="piece.id">
+                <td class="align-middle">
+                  <DocumentThumbnail
+                    :document="resolvePrimaryDocument(piece)"
+                    :alt="resolvePreviewAlt(piece)"
+                  />
+                </td>
                 <td>{{ piece.name || 'Pièce sans nom' }}</td>
                 <td>{{ piece.typePiece?.name || '—' }}</td>
                 <td>{{ piece.reference || '—' }}</td>
@@ -133,6 +140,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { usePieces } from '~/composables/usePieces'
 import { useToast } from '~/composables/useToast'
+import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
+import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 const { showError } = useToast()
 const { pieces, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
@@ -144,6 +153,35 @@ const searchTerm = ref('')
 const sortField = ref<'name' | 'createdAt'>('name')
 const sortDirection = ref<'asc' | 'desc'>('asc')
 
+const resolvePrimaryDocument = (piece: Record<string, any>) => {
+  const documents = Array.isArray(piece?.documents) ? piece.documents : []
+  if (!documents.length) {
+    return null
+  }
+  const normalized = documents.filter((doc) => doc && typeof doc === 'object')
+  const withPath = normalized.filter((doc) => doc?.path)
+
+  const pdf = withPath.find((doc) => isPdfDocument(doc))
+  if (pdf) {
+    return pdf
+  }
+
+  const image = withPath.find((doc) => isImageDocument(doc))
+  if (image) {
+    return image
+  }
+
+  return withPath[0] ?? normalized[0] ?? null
+}
+
+const resolvePreviewAlt = (piece: Record<string, any>) => {
+  const parts = [piece?.name, piece?.reference].filter(Boolean)
+  if (parts.length) {
+    return `Aperçu du document de ${parts.join(' – ')}`
+  }
+  return 'Aperçu du document'
+}
+
 const resolveComparableName = (piece: Record<string, any>) => {
   const normalise = (value?: string | null) =>
     (value ?? '').toString().trim().toLowerCase()