diff --git a/app/components/admin/budgets/index_component.html.erb b/app/components/admin/budgets/index_component.html.erb
new file mode 100644
index 000000000..e5cb8b340
--- /dev/null
+++ b/app/components/admin/budgets/index_component.html.erb
@@ -0,0 +1,46 @@
+<%= header do %>
+  <%= link_to t("admin.budgets.index.new_link"), new_admin_budget_path %>
+<% end %>
+
+<%= render Admin::Budgets::HelpComponent.new("budgets") %>
+<%= render "shared/filter_subnav", i18n_namespace: "admin.budgets.index" %>
+
+<% if budgets.any? %>
+  <h3><%= page_entries_info budgets %></h3>
+
+  <table class="budgets-table">
+    <thead>
+      <tr>
+        <th><%= t("admin.budgets.index.table_name") %></th>
+        <th><%= t("admin.budgets.index.table_phase") %></th>
+        <th><%= t("admin.actions.actions") %></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% budgets.each do |budget| %>
+        <tr id="<%= dom_id(budget) %>" class="budget">
+          <td class="<%= "budget-completed" if budget.finished? %>">
+            <% if budget.finished? %>
+              <span>
+                <%= t("admin.budgets.index.table_completed") %>
+              </span>
+            <% end %>
+            <strong><%= budget.name %></strong>
+          </td>
+          <td class="small">
+            <%= budget.current_phase.name %>
+          </td>
+          <td>
+            <%= render Admin::Budgets::TableActionsComponent.new(budget) %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <%= paginate budgets %>
+<% else %>
+  <div class="callout primary">
+    <%= t("admin.budgets.index.no_budgets") %>
+  </div>
+<% end %>
diff --git a/app/components/admin/budgets/index_component.rb b/app/components/admin/budgets/index_component.rb
new file mode 100644
index 000000000..6c653cc18
--- /dev/null
+++ b/app/components/admin/budgets/index_component.rb
@@ -0,0 +1,12 @@
+class Admin::Budgets::IndexComponent < ApplicationComponent
+  include Header
+  attr_reader :budgets
+
+  def initialize(budgets)
+    @budgets = budgets
+  end
+
+  def title
+    t("admin.budgets.index.title")
+  end
+end
diff --git a/app/views/admin/budgets/index.html.erb b/app/views/admin/budgets/index.html.erb
index 79da7b03a..37943d5be 100644
--- a/app/views/admin/budgets/index.html.erb
+++ b/app/views/admin/budgets/index.html.erb
@@ -1,47 +1 @@
-<header>
-  <h2><%= t("admin.budgets.index.title") %></h2>
-  <%= link_to t("admin.budgets.index.new_link"), new_admin_budget_path %>
-</header>
-
-<%= render Admin::Budgets::HelpComponent.new("budgets") %>
-<%= render "shared/filter_subnav", i18n_namespace: "admin.budgets.index" %>
-
-<% if @budgets.any? %>
-  <h3><%= page_entries_info @budgets %></h3>
-
-  <table class="budgets-table">
-    <thead>
-      <tr>
-        <th><%= t("admin.budgets.index.table_name") %></th>
-        <th><%= t("admin.budgets.index.table_phase") %></th>
-        <th><%= t("admin.actions.actions") %></th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @budgets.each do |budget| %>
-        <tr id="<%= dom_id(budget) %>" class="budget">
-          <td class="<%= "budget-completed" if budget.finished? %>">
-            <% if budget.finished? %>
-              <span>
-                <%= t("admin.budgets.index.table_completed") %>
-              </span>
-            <% end %>
-            <strong><%= budget.name %></strong>
-          </td>
-          <td class="small">
-            <%= budget.current_phase.name %>
-          </td>
-          <td>
-            <%= render Admin::Budgets::TableActionsComponent.new(budget) %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-
-  <%= paginate @budgets %>
-<% else %>
-  <div class="callout primary">
-    <%= t("admin.budgets.index.no_budgets") %>
-  </div>
-<% end %>
+<%= render Admin::Budgets::IndexComponent.new(@budgets) %>