diff --git a/app/components/attachment/gallery_item_component.rb b/app/components/attachment/gallery_item_component.rb
new file mode 100644
index 000000000..e32ae942f
--- /dev/null
+++ b/app/components/attachment/gallery_item_component.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Attachment::GalleryItemComponent < ApplicationComponent
+  include GalleryHelper
+  attr_reader :attachment
+
+  def initialize(attachment:)
+    @attachment = attachment
+  end
+
+  def blob
+    attachment.blob
+  end
+
+  def libelle
+    attachment.record.class.in?([Champs::PieceJustificativeChamp, Champs::TitreIdentiteChamp]) ? attachment.record.libelle : 'Pièce jointe au message'
+  end
+
+  def title
+    "#{libelle} -- #{sanitize(blob.filename.to_s)}"
+  end
+end
diff --git a/app/components/attachment/gallery_item_component/gallery_item_component.html.haml b/app/components/attachment/gallery_item_component/gallery_item_component.html.haml
new file mode 100644
index 000000000..09ebb3744
--- /dev/null
+++ b/app/components/attachment/gallery_item_component/gallery_item_component.html.haml
@@ -0,0 +1,27 @@
+.gallery-item
+  - if displayable_pdf?(blob)
+    = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: title do
+      .thumbnail
+        = image_tag(preview_url_for(attachment), loading: :lazy)
+        .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+          Visualiser
+    .champ-libelle
+      = libelle.truncate(25)
+    = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+
+  - elsif displayable_image?(blob)
+    = link_to image_url(blob_url(attachment)), title: title, data: { src: blob.url }, class: 'gallery-link' do
+      .thumbnail
+        = image_tag(variant_url_for(attachment), loading: :lazy)
+        .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+          Visualiser
+    .champ-libelle
+      = libelle.truncate(25)
+    = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+
+  - else
+    .thumbnail
+      = image_tag('apercu-indisponible.png')
+    .champ-libelle
+      = libelle.truncate(25)
+    = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
diff --git a/app/controllers/instructeurs/dossiers_controller.rb b/app/controllers/instructeurs/dossiers_controller.rb
index 152b81f7b..2f4540d52 100644
--- a/app/controllers/instructeurs/dossiers_controller.rb
+++ b/app/controllers/instructeurs/dossiers_controller.rb
@@ -373,23 +373,18 @@ module Instructeurs
     def pieces_jointes
       @dossier = current_instructeur.dossiers.find(params[:dossier_id])
 
-      champs_attachments_and_libelles = @dossier
+      champs_attachments = @dossier
         .champs
         .filter { _1.class.in?([Champs::PieceJustificativeChamp, Champs::TitreIdentiteChamp]) }
-        .flat_map do |c|
-          c.piece_justificative_file.map do |attachment|
-            [attachment, c.libelle]
-          end
-        end
+        .flat_map(&:piece_justificative_file)
 
-      commentaires_attachments_and_libelles = @dossier
+      commentaires_attachments = @dossier
         .commentaires
         .map(&:piece_jointe)
         .map(&:attachments)
         .flatten
-        .map { [_1, 'Messagerie'] }
 
-      @attachments_and_libelles = champs_attachments_and_libelles + commentaires_attachments_and_libelles
+      @gallery_attachments = champs_attachments + commentaires_attachments
     end
 
     private
diff --git a/app/views/instructeurs/dossiers/pieces_jointes.html.haml b/app/views/instructeurs/dossiers/pieces_jointes.html.haml
index 95e08d1fc..222e6e10e 100644
--- a/app/views/instructeurs/dossiers/pieces_jointes.html.haml
+++ b/app/views/instructeurs/dossiers/pieces_jointes.html.haml
@@ -4,32 +4,5 @@
 
 .fr-container
   .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" }
-    - @attachments_and_libelles.each do |attachment, libelle|
-      .gallery-item
-        - blob = attachment.blob
-        - if displayable_pdf?(blob)
-          = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{libelle} -- #{sanitize(blob.filename.to_s)}" do
-            .thumbnail
-              = image_tag(preview_url_for(attachment), loading: :lazy)
-              .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-                Visualiser
-          .champ-libelle
-            = libelle.truncate(25)
-          = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
-
-        - elsif displayable_image?(blob)
-          = link_to image_url(blob_url(attachment)), title: "#{libelle} -- #{sanitize(blob.filename.to_s)}", data: { src: blob.url }, class: 'gallery-link' do
-            .thumbnail
-              = image_tag(variant_url_for(attachment), loading: :lazy)
-              .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-                Visualiser
-          .champ-libelle
-            = libelle.truncate(25)
-          = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
-
-        - else
-          .thumbnail
-            = image_tag('apercu-indisponible.png')
-          .champ-libelle
-            = libelle.truncate(25)
-          = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+    - @gallery_attachments.each do |attachment|
+      = render Attachment::GalleryItemComponent.new(attachment:)
diff --git a/spec/components/attachment/gallery_item_component_spec.rb b/spec/components/attachment/gallery_item_component_spec.rb
new file mode 100644
index 000000000..53a4ce17d
--- /dev/null
+++ b/spec/components/attachment/gallery_item_component_spec.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Attachment::GalleryItemComponent, type: :component do
+  let(:procedure) { create(:procedure, :published, types_de_champ_public:) }
+  let(:types_de_champ_public) { [{ type: :piece_justificative }] }
+  let(:dossier) { create(:dossier, :with_populated_champs, :en_construction, procedure:) }
+  let(:filename) { attachment.blob.filename.to_s }
+
+  let(:component) { described_class.new(attachment: attachment) }
+
+  subject { render_inline(component).to_html }
+
+  context "when attachment is from a piece justificative champ" do
+    let(:champ) { dossier.champs.first }
+    let(:libelle) { champ.libelle }
+    let(:attachment) { champ.piece_justificative_file.attachments.first }
+
+    it "displays libelle, link and renders title" do
+      expect(subject).to have_text(libelle)
+      expect(subject).not_to have_text('Pièce jointe au message')
+      expect(subject).to have_link(filename)
+      expect(component.title).to eq("#{libelle} -- #{filename}")
+    end
+  end
+
+  context "when attachment is from a commentaire" do
+    let(:commentaire) { create(:commentaire, :with_file, dossier: dossier) }
+    let(:attachment) { commentaire.piece_jointe.first }
+
+    it "displays a generic libelle, link and renders title" do
+      expect(subject).to have_text('Pièce jointe au message')
+      expect(subject).to have_link(filename)
+      expect(component.title).to eq("Pièce jointe au message -- #{filename}")
+    end
+  end
+end
diff --git a/spec/controllers/instructeurs/dossiers_controller_spec.rb b/spec/controllers/instructeurs/dossiers_controller_spec.rb
index 510a16ab6..42a4a3bd3 100644
--- a/spec/controllers/instructeurs/dossiers_controller_spec.rb
+++ b/spec/controllers/instructeurs/dossiers_controller_spec.rb
@@ -1513,7 +1513,9 @@ describe Instructeurs::DossiersController, type: :controller do
       expect(response.body).to include('Télécharger le fichier logo_test_procedure.png')
       expect(response.body).to include('Télécharger le fichier RIB.pdf')
       expect(response.body).to include('Visualiser')
-      expect(assigns(:attachments_and_libelles).count).to eq 3
+      expect(assigns(:gallery_attachments).count).to eq 3
+      expect(assigns(:gallery_attachments)).to all(be_a(ActiveStorage::Attachment))
+      expect([Champs::PieceJustificativeChamp, Champs::TitreIdentiteChamp, Commentaire]).to include(*assigns(:gallery_attachments).map { _1.record.class })
     end
   end
 end