diff --git a/app/components/instructeurs/dossiers_navigation_component.rb b/app/components/instructeurs/dossiers_navigation_component.rb
new file mode 100644
index 000000000..8a79d2ffa
--- /dev/null
+++ b/app/components/instructeurs/dossiers_navigation_component.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class Instructeurs::DossiersNavigationComponent < ApplicationComponent
+  attr_reader :dossier, :statut
+
+  def initialize(dossier:, procedure_presentation:, statut:)
+    @dossier = dossier
+    @cache = Cache::ProcedureDossierPagination.new(procedure_presentation: procedure_presentation, statut:)
+    @statut = statut
+  end
+
+  def back_url_options
+    options = { statut: }
+    options = options.merge(page: @cache.incoming_page) if @cache.incoming_page
+    options
+  end
+
+  def link_next
+    options = { class: "fr-link fr-icon-arrow-right-line fr-link--icon-right fr-ml-3w" }
+
+    if has_next?
+      tag.a(t('.next'), **options.merge(href: next_instructeur_dossier_path(dossier:, statut:)))
+    else
+      options[:class] = "#{options[:class]} fr-text-mention--grey"
+      tag.span(t('.next'), **options)
+    end
+  end
+
+  def link_previous
+    options = { class: "fr-link fr-icon-arrow-left-line fr-link--icon-left" }
+
+    if has_previous?
+      tag.a(t('.previous'), **options.merge(href: previous_instructeur_dossier_path(dossier:, statut:)))
+    else
+      options[:class] = "#{options[:class]} fr-text-mention--grey"
+      tag.span(t('.previous'), **options)
+    end
+  end
+
+  def has_next? = @has_next ||= @cache.next_dossier_id(from_id: dossier.id).present?
+
+  def has_previous? = @has_previous ||= @cache.previous_dossier_id(from_id: dossier.id).present?
+end
diff --git a/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.en.yml b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.en.yml
new file mode 100644
index 000000000..697df0c32
--- /dev/null
+++ b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.en.yml
@@ -0,0 +1,4 @@
+---
+en:
+  next: Next file
+  previous: Previous file
\ No newline at end of file
diff --git a/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.fr.yml b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.fr.yml
new file mode 100644
index 000000000..05758d6ff
--- /dev/null
+++ b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.fr.yml
@@ -0,0 +1,4 @@
+---
+fr:
+  next: Dossier suivant
+  previous: Dossier précédent
\ No newline at end of file
diff --git a/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
new file mode 100644
index 000000000..0a29b5fc5
--- /dev/null
+++ b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
@@ -0,0 +1,11 @@
+.flex.fr-mb-1w.align-center
+  = render Instructeurs::BackButtonComponent.new(to: instructeur_procedure_path(dossier.procedure, **back_url_options))
+
+  %h1.fr-h3.fr-mb-0
+    = t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name)
+
+  .fr.ml-auto.align-center.flex
+    = link_previous
+    = link_next
+
+= link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"