diff --git a/app/components/profile/api_token_card_component.rb b/app/components/profile/api_token_card_component.rb
new file mode 100644
index 000000000..840cc9bb5
--- /dev/null
+++ b/app/components/profile/api_token_card_component.rb
@@ -0,0 +1,22 @@
+class Profile::APITokenCardComponent < ApplicationComponent
+  def initialize(created_api_token: nil, created_packed_token: nil)
+    @created_api_token = created_api_token
+    @created_packed_token = created_packed_token
+  end
+
+  private
+
+  def render?
+    current_administrateur.present?
+  end
+
+  def api_and_packed_tokens
+    current_administrateur.api_tokens.order(:created_at).map do |api_token|
+      if api_token == @created_api_token && @created_packed_token.present?
+        [api_token, @created_packed_token]
+      else
+        [api_token, nil]
+      end
+    end
+  end
+end
diff --git a/app/components/profile/api_token_card_component/api_token_card_component.html.haml b/app/components/profile/api_token_card_component/api_token_card_component.html.haml
new file mode 100644
index 000000000..b820cf0ce
--- /dev/null
+++ b/app/components/profile/api_token_card_component/api_token_card_component.html.haml
@@ -0,0 +1,12 @@
+.card.no-list{ 'data-turbo': 'true', id: dom_id(current_administrateur, :profil_api_token) }
+  .card-title Jetons d’identification de l’API (token)
+  %p Ces jetons sont nécessaire pour effectuer des appels vers l’API de #{APPLICATION_NAME}.
+  %p Si vous avez déjà des applications qui utilisent un jeton et vous le révoquez, l’accès à l’API sera bloqué pour ces applications.
+
+  = render Dsfr::ListComponent.new do |list|
+    - api_and_packed_tokens.each do |(api_token, packed_token)|
+      - list.with_item do
+        = render Profile::APITokenComponent.new(api_token:, packed_token:)
+
+  %br
+  = button_to "Créer et afficher un nouveau jeton", api_tokens_path, method: :post, class: "fr-btn fr-btn--secondary"
diff --git a/app/components/profile/api_token_component.rb b/app/components/profile/api_token_component.rb
new file mode 100644
index 000000000..a584281d9
--- /dev/null
+++ b/app/components/profile/api_token_component.rb
@@ -0,0 +1,6 @@
+class Profile::APITokenComponent < ApplicationComponent
+  def initialize(api_token:, packed_token: nil)
+    @api_token = api_token
+    @packed_token = packed_token
+  end
+end
diff --git a/app/components/profile/api_token_component/api_token_component.html.haml b/app/components/profile/api_token_component/api_token_component.html.haml
new file mode 100644
index 000000000..bf2c51dfd
--- /dev/null
+++ b/app/components/profile/api_token_component/api_token_component.html.haml
@@ -0,0 +1,15 @@
+%p
+  %b= "#{@api_token.name} "
+  %span.fr-text--sm= @api_token.prefix
+
+- if @packed_token.present?
+  .fr-text--sm{ style: "width: 80%; word-break: break-all;" }
+    - button = render Dsfr::CopyButtonComponent.new(text: @packed_token, title: "Copier le jeton dans le presse-papier", success: "Le jeton a été copié dans le presse-papier")
+    = "#{@packed_token} #{button}"
+
+  %p Pour des raisons de sécurité, il ne sera plus ré-affiché, notez-le bien.
+
+- else
+  %p Pour des raisons de sécurité, nous ne pouvons vous l’afficher que lors de sa création.
+
+= button_to "Révoquer le jeton", api_token_path(@api_token), method: :delete, class: "fr-btn fr-btn--secondary", data: { turbo_confirm: "Confirmez-vous la révocation de ce jeton ? Les applications qui l’utilisent actuellement seront bloquées." }
diff --git a/app/controllers/users/profil_controller.rb b/app/controllers/users/profil_controller.rb
index ebd75c278..2e039d025 100644
--- a/app/controllers/users/profil_controller.rb
+++ b/app/controllers/users/profil_controller.rb
@@ -1,18 +1,12 @@
 module Users
   class ProfilController < UserController
     before_action :ensure_update_email_is_authorized, only: :update_email
-    before_action :find_transfers, only: [:show, :renew_api_token]
+    before_action :find_transfers, only: [:show]
 
     def show
       @france_connect_informations = FranceConnectInformation.where(user: current_user)
     end
 
-    def renew_api_token
-      @token = current_administrateur.renew_api_token
-      flash.now.notice = 'Votre jeton a été regénéré.'
-      render :show
-    end
-
     def update_email
       requested_user = User.find_by(email: requested_email)
       if requested_user.present? && current_user.ask_for_merge(requested_user)
diff --git a/app/views/users/profil/show.html.haml b/app/views/users/profil/show.html.haml
index 40503da58..0f41d01c5 100644
--- a/app/views/users/profil/show.html.haml
+++ b/app/views/users/profil/show.html.haml
@@ -59,25 +59,7 @@
             - @waiting_transfers.each do |email, nb_dossier|
               %li= t('.one_waiting_transfer', email: email, count: nb_dossier)
 
-  - if current_administrateur.present?
-    .card
-      .card-title Jeton d’identification de l’API (token)
-      %p Ce jeton est nécessaire pour effectuer des appels vers l’API de #{APPLICATION_NAME}.
-
-      - if defined?(@token)
-        %p Jeton : <b>#{@token}</b>
-        %p Pour des raisons de sécurité, ce jeton ne sera plus ré-affiché, notez-le bien.
-
-      - else
-        %p Pour des raisons de sécurité, nous ne pouvons vous l’afficher que lors de sa génération.
-        %p Attention, si vous avez déjà des applications qui utilisent votre jeton, le regénérer bloquera leurs accès à l’API.
-
-      = link_to "Regénérer et afficher mon jeton",
-        renew_api_token_path,
-        method: :post,
-        class: "fr-btn fr-btn--secondary",
-        data: { confirm: "Confirmez-vous la regénération de votre jeton ? Les applications qui l’utilisent actuellement seront bloquées.",
-                disable: true }
+  = render Profile::APITokenCardComponent.new
 
   - if @france_connect_informations.present?
     .card
diff --git a/spec/controllers/users/profil_controller_spec.rb b/spec/controllers/users/profil_controller_spec.rb
index 8a43e6389..ab39e8509 100644
--- a/spec/controllers/users/profil_controller_spec.rb
+++ b/spec/controllers/users/profil_controller_spec.rb
@@ -31,22 +31,6 @@ describe Users::ProfilController, type: :controller do
     end
   end
 
-  describe 'POST #renew_api_token' do
-    let(:administrateur) { create(:administrateur) }
-
-    before { sign_in(administrateur.user) }
-
-    before do
-      allow(administrateur).to receive(:renew_api_token)
-      allow(controller).to receive(:current_administrateur) { administrateur }
-      post :renew_api_token
-    end
-
-    it { expect(administrateur).to have_received(:renew_api_token) }
-    it { expect(response.status).to render_template(:show) }
-    it { expect(flash.notice).to eq('Votre jeton a été regénéré.') }
-  end
-
   describe 'PATCH #update_email' do
     context 'when email is same as user' do
       it 'fails' do