diff --git a/app/views/support_interface/api_tokens/index.html.erb b/app/views/support_interface/api_tokens/index.html.erb
index cce10ce4f59..a095ab37a7f 100644
--- a/app/views/support_interface/api_tokens/index.html.erb
+++ b/app/views/support_interface/api_tokens/index.html.erb
@@ -3,7 +3,7 @@
 <%= govuk_button_link_to 'Add a token', new_support_interface_api_token_path %>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-one-quarter">
+  <div class="govuk-grid-column-one-half">
     <%= render SupportInterface::TileComponent.new(
       count: @api_tokens.count,
       label: 'API tokens issued',
@@ -11,7 +11,7 @@
       href: '#not-connected',
     ) %>
   </div>
-  <div class="govuk-grid-column-one-quarter">
+  <div class="govuk-grid-column-one-half">
     <%= render SupportInterface::TileComponent.new(
       count: @api_tokens_last_3_months_count,
       label: 'API tokens used in the last 3 months',
@@ -21,30 +21,33 @@
   </div>
 </div>
 
-<table class='govuk-table'>
-  <thead class='govuk-table__head'>
-    <tr class='govuk-table__row'>
-      <th scope='col' class='govuk-table__header'>ID</th>
-      <th scope='col' class='govuk-table__header govuk-!-width-one-third'>Provider</th>
-      <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Vendor</th>
-      <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Last used at</th>
-      <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Created at</th>
-      <th scope='col' class='govuk-table__header'>Actions</th>
-    </tr>
-  </thead>
+<%= render PaginatedFilterComponent.new(filter: @filter, collection: @api_tokens) do %>
+    <table class='govuk-table'>
+      <thead class='govuk-table__head'>
+        <tr class='govuk-table__row'>
+          <th scope='col' class='govuk-table__header'>ID</th>
+          <th scope='col' class='govuk-table__header govuk-!-width-one-third'>Provider</th>
+          <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Vendor</th>
+          <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Last used at</th>
+          <th scope='col' class='govuk-table__header govuk-!-width-one-quarter'>Created at</th>
+          <th scope='col' class='govuk-table__header'>Actions</th>
+        </tr>
+      </thead>
 
-  <tbody class='govuk-table__body'>
-    <% @api_tokens.each do |token| %>
-    <tr class='govuk-table__row'>
-      <td class='govuk-table__cell'>#<%= token.id %></td>
-      <td class='govuk-table__cell'><%= token.provider.name %></td>
-      <td class='govuk-table__cell'><%= token.provider.vendor_name %></td>
-      <td class='govuk-table__cell'><%= token.last_used_at ? token.last_used_at.to_fs(:govuk_date_and_time) : 'Never' %></td>
-      <td class='govuk-table__cell'><%= token.created_at.to_fs(:govuk_date_and_time) %></td>
-      <td class='govuk-table__cell'>
-        <%= govuk_button_link_to 'Revoke', confirm_revocation_support_interface_api_token_path(token), warning: true %>
-      </td>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
+      <tbody class='govuk-table__body'>
+        <% @api_tokens.each do |token| %>
+        <tr class='govuk-table__row'>
+          <td class='govuk-table__cell'>#<%= token.id %></td>
+          <td class='govuk-table__cell'><%= token.provider.name %></td>
+          <td class='govuk-table__cell'><%= token.provider.vendor_name %></td>
+          <td class='govuk-table__cell'><%= token.last_used_at ? token.last_used_at.to_fs(:govuk_date_and_time) : 'Never' %></td>
+          <td class='govuk-table__cell'><%= token.created_at.to_fs(:govuk_date_and_time) %></td>
+          <td class='govuk-table__cell'>
+            <%= govuk_button_link_to 'Revoke', confirm_revocation_support_interface_api_token_path(token), warning: true %>
+          </td>
+        </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <%# govuk_pagination(pagy: @pagy) %>
+<% end %>
diff --git a/spec/system/support_interface/api_tokens/view_tokens_spec.rb b/spec/system/support_interface/api_tokens/view_tokens_spec.rb
new file mode 100644
index 00000000000..acd381a3381
--- /dev/null
+++ b/spec/system/support_interface/api_tokens/view_tokens_spec.rb
@@ -0,0 +1,40 @@
+require 'rails_helper'
+
+RSpec.describe 'API tokens' do
+  include DfESignInHelpers
+
+  scenario 'Support views vendors with api tokens' do
+    given_i_am_signed_in
+    and_api_tokens_exist
+    when_i_visit_the_tokens_page
+    then_i_see_all_the_providers_with_api_tokens
+  end
+
+  def given_i_am_signed_in
+    sign_in_as_support_user
+  end
+
+  def and_api_tokens_exist
+    vendor = create(:vendor, name: 'vendor_1')
+    provider_1 = create(:provider, name: 'Provider 1', vendor:)
+    provider_2 = create(:provider, name: 'Provider 2', vendor:)
+
+    create(:vendor_api_token, provider: provider_1, last_used_at: 1.month.ago)
+    create(:vendor_api_token, provider: provider_2)
+  end
+
+  def when_i_visit_the_tokens_page
+    visit support_interface_api_tokens_path
+  end
+
+  def then_i_see_all_the_providers_with_api_tokens
+    expect(page).to have_content '2 API tokens issued'
+    expect(page).to have_content '1 API tokens used in the last 3 months'
+
+    within '.govuk-table' do
+      expect(page).to have_content 'Provider 1'
+      expect(page).to have_content 'Provider 2'
+      expect(page).to have_content 'vendor_1'
+    end
+  end
+end